SlideShare a Scribd company logo
1 of 26
Download to read offline
Bootstrap を使って効率よく
WordPressオリジナルテーマを作る!
WordBench東京8月
Ticklecode.
Yoshinori Kobayashi
小林由憲(こばやしよしのり)
Twitter: @AsbyuKobayashi
ブログ: In Advance Only
生まれは 奈良県 です。
2
アジェンダ
1.BootstrapでWordPressテーマを作るフロー
2.なぜ、Bootstrapを使うのか
3.HTMLファイルからWordPressテーマへ
4.まとめ
1.BootstrapでWordPressテーマを作るフロー
Bootstrapで、HTMLファイルを作成する。
HTMLファイルの状態がもっとも修正しやすい。
ある程度、大きな変更点はこの段階で吸収してしまう。
HTMLを.phpとして分割する。
トップページ
index.html
header.php
footer.php
sidebar.phpindex.php
HTMLコードをテンプレートタグに置き換える。
<ul class="nav navbar-nav navbar-right">
<li><a href="#">HOME</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SKILLS</a></li>
<li><a href="#">WORK&PLAY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<?php wp_nav_menu($menu_prm); ?>
■グローバルメニューの場合
WordPressから動的に変更して出力するものは、テンプレートタグに置き換えていく。
2.なぜ、Bootstrapを使うのか
クロスブラウザ
http://getbootstrap.com/getting-started/
すでに対応済み、検証済み
レスポンシブ
すでに対応済み、検証済み
http://getbootstrap.com/css/#grid
デザインベストプラクティス
見やすく、使いやすいようにあらかじめ考慮されている
http://getbootstrap.com/components/
補足.Bootstrapの拡張、強化
Font Awesome(フォントアーサム)
アイコンフォントの数
・Bootstrap 200 個
・Font Awesome 439 個
awesome:素晴らしい、印象的な という意味
Bootstrapと合わせて使うことを想定されている
ので使いやすい。
http://fortawesome.github.io/Font-Awesome/
Bootswatch(ブートスォッチ) swatch:材料見本 という意味
http://bootswatch.com/
数多くのテーマやカラーバリエーションがある。
細かな部品もたくさんあるので、使いよい。
Masonry(メイソンリー) masonry:石工職、石工術 という意味
Bootstrapでは固定レイアウト。これを強化できる。
http://masonry.desandro.com/
http://getbootstrap.com/examples/offcanvas/
WordPressは同梱済み(/wp-
includes/js/masonry.min.js)
3.HTMLファイルからWordPressテーマへ
WordPressのテンプレートタグをそのまま記載してもBootstrapが有効に
使えない。
WordPressテーマ化にする際の注意。
BootstrapのHTML構造、classを維持しながらテーマ化していく。
例えば、グローバルメニューの場合
<?php wp_nav_menu(); ?>
管理画面であらかじめ設定されたメニューが表示される。
具体例⇒
デフォルトでHTMLが出力されるが、Boootstrap用にはなっていない。
<div class="menu-mainmenu-container">
<ul id="menu-mainmenu" class="menu">
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-
item-30"><a href="http://localhost/wp/">HOME</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page current-
menu-item page_item page-item-2 current_page_item current_page_parent menu-item-31"><a
href="http://localhost/wp/blog/">BLOG</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-
item-35"><a href="http://localhost/wp/about/">ABOUT</a></li>
:
★ Bootstrapが有効になる出力
☆デフォルトのWordPressでのHTML出力
<ul id="menu-mainmenu" class="nav navbar-nav navbar-right">
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-
30"><a href="http://localhost/wp/">HOME</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page current-
menu-item page_item page-item-2 current_page_item current_page_parent menu-item-31"><a
href="http://localhost/wp/blog/">BLOG</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-
35"><a href="http://localhost/wp/about/">ABOUT</a></li>
:
<?php
/* カスタムメニューの出力 */
$menu_prm = array(
‘theme_location' => 'primary',
'menu' => '',
'container' => false,
'container_class' => '',
'container_id' => '',
'menu_class' => 'nav navbar-nav navbar-right',
'menu_id' => '',
'echo' => true,
‘fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu($menu_prm);
?>
wp_nav_menu タグの出力を変更する。
<ul id="menu-mainmenu" class="nav navbar-nav navbar-right">
<li id="menu-item-30" class="menu-item menu-item-type-
post_type menu-item-object-page menu-item-30"><a
href="http://localhost/wp/">HOME</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-
post_type menu-item-object-page current-menu-item page_item
page-item-2 current_page_item current_page_parent menu-item-
31"><a href="http://localhost/wp/blog/">BLOG</a></li>
:
header.php
xxx.html
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/w
p_nav_menu
<?php get_search_form(); ?>
上のタグで searchform.php に記載されているコードが表示される。
例えば、検索フォームの場合
searchform.php にBootstrapの検索フォームのコードを記載する。
具体例⇒
<form class="navbar-form navbar-left" role="search" action="<?php echo home_url('/'); ?>">
<div class="form-group">
<label for ="s"></label>
<input type="text" value="" name="s" id="s" class="form-control" placeholder="Search in the
Web Site">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-
search"></span></button>
</form>
searchform.php にBootstrapの検索フォームを上書きして、修正
http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%8
3%B3%E3%82%B9/get_search_form
WordPressで検索フォームを動かすには以下の条件がある。
~WordPress Codex より ~
ブログのホームページに GET を投げることに注意してください。入力テキストフィールドの名前は s にして、上述の
例のように label を必ず含めてください。
4.まとめ
Bootstrapを使う理由
● クロスブラウザ、レスポンシブのことは既に検証済み!
● デザインはベストプラクティス
⇒使いやすく、見やすいようにあらかじめよく考えられている
● 拡張、強化するためのテーマや部品が豊富にある。
制作・テスト・確認の作業時間を圧倒的に短縮できる。
短縮した時間をさらなるリッチコンテンツの制作にまわせる。
HTMLファイルからWordPressのテーマを作成する際のポイント
● BootstrapのHTML構造、classを維持しながら テーマ化していく。
● 大きな変更点は、Bootstrapで制作するときに吸収しておく。
⇒ テーマ化してあとの変更は工数が大きくなくことが多い。
ご清聴ありがとうございました。

More Related Content

What's hot

更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術Mignon Style
 
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'ParkWordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Parkparkn-park
 
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
ノンプログラマーのためのWordPressテーマ作成ステップアップ術ノンプログラマーのためのWordPressテーマ作成ステップアップ術
ノンプログラマーのためのWordPressテーマ作成ステップアップ術Mignon Style
 
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
 UnderScoreとbootstrapとsassでword pressのテーマをつくろう UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろうTakahiro Nakahata
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座Shinichi Nishikawa
 
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介foom_in
 
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズrie05
 
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でーWP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でータカシ キタジマ
 
子テーマを使ったサイト制作
子テーマを使ったサイト制作子テーマを使ったサイト制作
子テーマを使ったサイト制作shimoyama kengo
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?Shinichi Nishikawa
 
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争Mignon Style
 
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼Mignon Style
 
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話Cherry Pie Web
 
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオンWordBench京都版 _sハンズオン
WordBench京都版 _sハンズオンHidetaka Okamoto
 
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜Mignon Style
 
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜Mignon Style
 
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」タカシ キタジマ
 
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイトWordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイトTakuma Nishiyama
 
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaWordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaShinichi Nishikawa
 
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」Akari Doi
 

What's hot (20)

更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
 
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'ParkWordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
 
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
ノンプログラマーのためのWordPressテーマ作成ステップアップ術ノンプログラマーのためのWordPressテーマ作成ステップアップ術
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
 
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
 UnderScoreとbootstrapとsassでword pressのテーマをつくろう UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
 
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
 
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
 
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でーWP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
 
子テーマを使ったサイト制作
子テーマを使ったサイト制作子テーマを使ったサイト制作
子テーマを使ったサイト制作
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
 
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
 
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
 
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
 
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオンWordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
 
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
 
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
 
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイトWordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
 
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaWordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
 
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
 

Similar to Bootstrapを使って効率よくWordPressオリジナルテーマを作る

WordPress初心者テーマ作成勉強会
WordPress初心者テーマ作成勉強会WordPress初心者テーマ作成勉強会
WordPress初心者テーマ作成勉強会Tsuyoshi.
 
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様株式会社GreenHack
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Muyuu Fujita
 
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Sosuke Kimura
 
第2回こけむさズword press部
第2回こけむさズword press部第2回こけむさズword press部
第2回こけむさズword press部Yuki Suzuki
 
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
情報編集(Web)  第8回: CSSフレームワークを使う Twitter Bootstrap情報編集(Web)  第8回: CSSフレームワークを使う Twitter Bootstrap
情報編集(Web) 第8回: CSSフレームワークを使う Twitter BootstrapAtsushi Tadokoro
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!Takashi Uemura
 
1日でマスターするWordpress講座
1日でマスターするWordpress講座1日でマスターするWordpress講座
1日でマスターするWordpress講座光利 吉田
 
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
情報編集(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ情報編集(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter BootstrapのカスタマイズAtsushi Tadokoro
 
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
芸術情報演習デザイン(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ芸術情報演習デザイン(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter BootstrapのカスタマイズAtsushi Tadokoro
 
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う Twitter Bootstrap芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う Twitter Bootstrap
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter BootstrapAtsushi Tadokoro
 
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩Atsushi Tadokoro
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?Fuminori Mori
 
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマいちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマHideki MACHIDA
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolistShinichiro Kumeuchi
 
WordPressのテンプレートタグを理解する
WordPressのテンプレートタグを理解するWordPressのテンプレートタグを理解する
WordPressのテンプレートタグを理解するYoshinori Kobayashi
 
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩Atsushi Tadokoro
 

Similar to Bootstrapを使って効率よくWordPressオリジナルテーマを作る (20)

WordPress初心者テーマ作成勉強会
WordPress初心者テーマ作成勉強会WordPress初心者テーマ作成勉強会
WordPress初心者テーマ作成勉強会
 
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
 
Wp html5
Wp html5Wp html5
Wp html5
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
 
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
 
第2回こけむさズword press部
第2回こけむさズword press部第2回こけむさズword press部
第2回こけむさズword press部
 
WordPress と Bootstrap
WordPress と BootstrapWordPress と Bootstrap
WordPress と Bootstrap
 
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
情報編集(Web)  第8回: CSSフレームワークを使う Twitter Bootstrap情報編集(Web)  第8回: CSSフレームワークを使う Twitter Bootstrap
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
 
1日でマスターするWordpress講座
1日でマスターするWordpress講座1日でマスターするWordpress講座
1日でマスターするWordpress講座
 
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
情報編集(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ情報編集(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
 
WordPressって何
WordPressって何WordPressって何
WordPressって何
 
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
芸術情報演習デザイン(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ芸術情報演習デザイン(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
 
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う Twitter Bootstrap芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う Twitter Bootstrap
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
 
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
 
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマいちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolist
 
WordPressのテンプレートタグを理解する
WordPressのテンプレートタグを理解するWordPressのテンプレートタグを理解する
WordPressのテンプレートタグを理解する
 
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
 

More from Yoshinori Kobayashi

勉強会、コミュニティの初まりと成長 Developers Summit 2017
勉強会、コミュニティの初まりと成長 Developers Summit 2017勉強会、コミュニティの初まりと成長 Developers Summit 2017
勉強会、コミュニティの初まりと成長 Developers Summit 2017Yoshinori Kobayashi
 
めざせ!書籍出版! 「これからはじめるiPhoneアプリ開発入門」 執筆陣に聞いてみよう! at 貸会議室6F
めざせ!書籍出版! 「これからはじめるiPhoneアプリ開発入門」 執筆陣に聞いてみよう! at 貸会議室6Fめざせ!書籍出版! 「これからはじめるiPhoneアプリ開発入門」 執筆陣に聞いてみよう! at 貸会議室6F
めざせ!書籍出版! 「これからはじめるiPhoneアプリ開発入門」 執筆陣に聞いてみよう! at 貸会議室6FYoshinori Kobayashi
 
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!Yoshinori Kobayashi
 
iPhoneアプリ開発講座:Swiftビギナーズハンズオンセミナー|iOSアプリを作ってみたい、すべての初心者が、体験しながら学べるハンズオンセミナーです!
iPhoneアプリ開発講座:Swiftビギナーズハンズオンセミナー|iOSアプリを作ってみたい、すべての初心者が、体験しながら学べるハンズオンセミナーです!iPhoneアプリ開発講座:Swiftビギナーズハンズオンセミナー|iOSアプリを作ってみたい、すべての初心者が、体験しながら学べるハンズオンセミナーです!
iPhoneアプリ開発講座:Swiftビギナーズハンズオンセミナー|iOSアプリを作ってみたい、すべての初心者が、体験しながら学べるハンズオンセミナーです!Yoshinori Kobayashi
 
第1次 CoEdo増床計画(小林目線)|コワーキングスペースCo-Edo 3周年記念パーティ
第1次 CoEdo増床計画(小林目線)|コワーキングスペースCo-Edo 3周年記念パーティ第1次 CoEdo増床計画(小林目線)|コワーキングスペースCo-Edo 3周年記念パーティ
第1次 CoEdo増床計画(小林目線)|コワーキングスペースCo-Edo 3周年記念パーティYoshinori Kobayashi
 
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015Yoshinori Kobayashi
 
勉強会を開催したことで起こったこと|#ブロフェス2015
勉強会を開催したことで起こったこと|#ブロフェス2015 勉強会を開催したことで起こったこと|#ブロフェス2015
勉強会を開催したことで起こったこと|#ブロフェス2015 Yoshinori Kobayashi
 
Instagram Ruby Gem と Instagram API から学んだことまとめ|【CoEdo.rb】Ruby / Ruby on Rails ...
Instagram Ruby Gem と Instagram API から学んだことまとめ|【CoEdo.rb】Ruby / Ruby on Rails ...Instagram Ruby Gem と Instagram API から学んだことまとめ|【CoEdo.rb】Ruby / Ruby on Rails ...
Instagram Ruby Gem と Instagram API から学んだことまとめ|【CoEdo.rb】Ruby / Ruby on Rails ...Yoshinori Kobayashi
 
個人の成長に合わせた、WordPress学習方法とコミュニティへの関わり方|WordBench山梨 Vol.1:WordBench山梨 はじめの一歩
個人の成長に合わせた、WordPress学習方法とコミュニティへの関わり方|WordBench山梨 Vol.1:WordBench山梨 はじめの一歩個人の成長に合わせた、WordPress学習方法とコミュニティへの関わり方|WordBench山梨 Vol.1:WordBench山梨 はじめの一歩
個人の成長に合わせた、WordPress学習方法とコミュニティへの関わり方|WordBench山梨 Vol.1:WordBench山梨 はじめの一歩Yoshinori Kobayashi
 
WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回
WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回
WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回Yoshinori Kobayashi
 
WordPressで作る世界遺産サイト|Weather Underground Plugin を活用して、 世界の天気予報を表示 編|WordPress...
WordPressで作る世界遺産サイト|Weather Underground Plugin を活用して、 世界の天気予報を表示  編|WordPress...WordPressで作る世界遺産サイト|Weather Underground Plugin を活用して、 世界の天気予報を表示  編|WordPress...
WordPressで作る世界遺産サイト|Weather Underground Plugin を活用して、 世界の天気予報を表示 編|WordPress...Yoshinori Kobayashi
 
WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編
WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編
WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編Yoshinori Kobayashi
 
WordPressで作る世界遺産サイト|Instagram API を使って現地フォト取得
WordPressで作る世界遺産サイト|Instagram API を使って現地フォト取得 WordPressで作る世界遺産サイト|Instagram API を使って現地フォト取得
WordPressで作る世界遺産サイト|Instagram API を使って現地フォト取得 Yoshinori Kobayashi
 
WordPressもくもく勉強会について― WordPressもくもく倶楽部 at コワーキングスペース 茅場町 Co-Edo
WordPressもくもく勉強会について― WordPressもくもく倶楽部 at コワーキングスペース 茅場町 Co-EdoWordPressもくもく勉強会について― WordPressもくもく倶楽部 at コワーキングスペース 茅場町 Co-Edo
WordPressもくもく勉強会について― WordPressもくもく倶楽部 at コワーキングスペース 茅場町 Co-EdoYoshinori Kobayashi
 
WordPressで作る世界遺産サイト|カスタムフィールドとカスタム投稿編
WordPressで作る世界遺産サイト|カスタムフィールドとカスタム投稿編WordPressで作る世界遺産サイト|カスタムフィールドとカスタム投稿編
WordPressで作る世界遺産サイト|カスタムフィールドとカスタム投稿編Yoshinori Kobayashi
 
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会Yoshinori Kobayashi
 
D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-
D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-
D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-Yoshinori Kobayashi
 
プログラミングの学習方法 | How To Learn The Programming 14.05.31 WP-D Fes #02 Interviews ...
プログラミングの学習方法 | How To Learn The Programming 14.05.31 WP-D Fes #02 Interviews ...プログラミングの学習方法 | How To Learn The Programming 14.05.31 WP-D Fes #02 Interviews ...
プログラミングの学習方法 | How To Learn The Programming 14.05.31 WP-D Fes #02 Interviews ...Yoshinori Kobayashi
 
SEO:Google構造化データ、リッチスニペットについて
SEO:Google構造化データ、リッチスニペットについてSEO:Google構造化データ、リッチスニペットについて
SEO:Google構造化データ、リッチスニペットについてYoshinori Kobayashi
 
jQuery UI Tabs で効率よくタブ機能を実現しよう! 14.05.23 HTML5 jQueryビギナーズ
jQuery UI Tabs で効率よくタブ機能を実現しよう! 14.05.23 HTML5 jQueryビギナーズjQuery UI Tabs で効率よくタブ機能を実現しよう! 14.05.23 HTML5 jQueryビギナーズ
jQuery UI Tabs で効率よくタブ機能を実現しよう! 14.05.23 HTML5 jQueryビギナーズYoshinori Kobayashi
 

More from Yoshinori Kobayashi (20)

勉強会、コミュニティの初まりと成長 Developers Summit 2017
勉強会、コミュニティの初まりと成長 Developers Summit 2017勉強会、コミュニティの初まりと成長 Developers Summit 2017
勉強会、コミュニティの初まりと成長 Developers Summit 2017
 
めざせ!書籍出版! 「これからはじめるiPhoneアプリ開発入門」 執筆陣に聞いてみよう! at 貸会議室6F
めざせ!書籍出版! 「これからはじめるiPhoneアプリ開発入門」 執筆陣に聞いてみよう! at 貸会議室6Fめざせ!書籍出版! 「これからはじめるiPhoneアプリ開発入門」 執筆陣に聞いてみよう! at 貸会議室6F
めざせ!書籍出版! 「これからはじめるiPhoneアプリ開発入門」 執筆陣に聞いてみよう! at 貸会議室6F
 
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
 
iPhoneアプリ開発講座:Swiftビギナーズハンズオンセミナー|iOSアプリを作ってみたい、すべての初心者が、体験しながら学べるハンズオンセミナーです!
iPhoneアプリ開発講座:Swiftビギナーズハンズオンセミナー|iOSアプリを作ってみたい、すべての初心者が、体験しながら学べるハンズオンセミナーです!iPhoneアプリ開発講座:Swiftビギナーズハンズオンセミナー|iOSアプリを作ってみたい、すべての初心者が、体験しながら学べるハンズオンセミナーです!
iPhoneアプリ開発講座:Swiftビギナーズハンズオンセミナー|iOSアプリを作ってみたい、すべての初心者が、体験しながら学べるハンズオンセミナーです!
 
第1次 CoEdo増床計画(小林目線)|コワーキングスペースCo-Edo 3周年記念パーティ
第1次 CoEdo増床計画(小林目線)|コワーキングスペースCo-Edo 3周年記念パーティ第1次 CoEdo増床計画(小林目線)|コワーキングスペースCo-Edo 3周年記念パーティ
第1次 CoEdo増床計画(小林目線)|コワーキングスペースCo-Edo 3周年記念パーティ
 
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
 
勉強会を開催したことで起こったこと|#ブロフェス2015
勉強会を開催したことで起こったこと|#ブロフェス2015 勉強会を開催したことで起こったこと|#ブロフェス2015
勉強会を開催したことで起こったこと|#ブロフェス2015
 
Instagram Ruby Gem と Instagram API から学んだことまとめ|【CoEdo.rb】Ruby / Ruby on Rails ...
Instagram Ruby Gem と Instagram API から学んだことまとめ|【CoEdo.rb】Ruby / Ruby on Rails ...Instagram Ruby Gem と Instagram API から学んだことまとめ|【CoEdo.rb】Ruby / Ruby on Rails ...
Instagram Ruby Gem と Instagram API から学んだことまとめ|【CoEdo.rb】Ruby / Ruby on Rails ...
 
個人の成長に合わせた、WordPress学習方法とコミュニティへの関わり方|WordBench山梨 Vol.1:WordBench山梨 はじめの一歩
個人の成長に合わせた、WordPress学習方法とコミュニティへの関わり方|WordBench山梨 Vol.1:WordBench山梨 はじめの一歩個人の成長に合わせた、WordPress学習方法とコミュニティへの関わり方|WordBench山梨 Vol.1:WordBench山梨 はじめの一歩
個人の成長に合わせた、WordPress学習方法とコミュニティへの関わり方|WordBench山梨 Vol.1:WordBench山梨 はじめの一歩
 
WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回
WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回
WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回
 
WordPressで作る世界遺産サイト|Weather Underground Plugin を活用して、 世界の天気予報を表示 編|WordPress...
WordPressで作る世界遺産サイト|Weather Underground Plugin を活用して、 世界の天気予報を表示  編|WordPress...WordPressで作る世界遺産サイト|Weather Underground Plugin を活用して、 世界の天気予報を表示  編|WordPress...
WordPressで作る世界遺産サイト|Weather Underground Plugin を活用して、 世界の天気予報を表示 編|WordPress...
 
WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編
WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編
WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編
 
WordPressで作る世界遺産サイト|Instagram API を使って現地フォト取得
WordPressで作る世界遺産サイト|Instagram API を使って現地フォト取得 WordPressで作る世界遺産サイト|Instagram API を使って現地フォト取得
WordPressで作る世界遺産サイト|Instagram API を使って現地フォト取得
 
WordPressもくもく勉強会について― WordPressもくもく倶楽部 at コワーキングスペース 茅場町 Co-Edo
WordPressもくもく勉強会について― WordPressもくもく倶楽部 at コワーキングスペース 茅場町 Co-EdoWordPressもくもく勉強会について― WordPressもくもく倶楽部 at コワーキングスペース 茅場町 Co-Edo
WordPressもくもく勉強会について― WordPressもくもく倶楽部 at コワーキングスペース 茅場町 Co-Edo
 
WordPressで作る世界遺産サイト|カスタムフィールドとカスタム投稿編
WordPressで作る世界遺産サイト|カスタムフィールドとカスタム投稿編WordPressで作る世界遺産サイト|カスタムフィールドとカスタム投稿編
WordPressで作る世界遺産サイト|カスタムフィールドとカスタム投稿編
 
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
 
D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-
D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-
D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-
 
プログラミングの学習方法 | How To Learn The Programming 14.05.31 WP-D Fes #02 Interviews ...
プログラミングの学習方法 | How To Learn The Programming 14.05.31 WP-D Fes #02 Interviews ...プログラミングの学習方法 | How To Learn The Programming 14.05.31 WP-D Fes #02 Interviews ...
プログラミングの学習方法 | How To Learn The Programming 14.05.31 WP-D Fes #02 Interviews ...
 
SEO:Google構造化データ、リッチスニペットについて
SEO:Google構造化データ、リッチスニペットについてSEO:Google構造化データ、リッチスニペットについて
SEO:Google構造化データ、リッチスニペットについて
 
jQuery UI Tabs で効率よくタブ機能を実現しよう! 14.05.23 HTML5 jQueryビギナーズ
jQuery UI Tabs で効率よくタブ機能を実現しよう! 14.05.23 HTML5 jQueryビギナーズjQuery UI Tabs で効率よくタブ機能を実現しよう! 14.05.23 HTML5 jQueryビギナーズ
jQuery UI Tabs で効率よくタブ機能を実現しよう! 14.05.23 HTML5 jQueryビギナーズ
 

Bootstrapを使って効率よくWordPressオリジナルテーマを作る