1. HTML5×ブログ×WordPress

3. PROFILE
• Yuu @regret_raym
– Webクリエイター
– 動画配信会社勤務。
– WordPressの制作経験
• 有料動画会員サイト
• スマートフォン向けギャラリーサイト
– 普段のお仕事
• Movable TypeなどのCMS構築と運用や
サイト制作のディレクションからデザイ
ン、コーディングまで全般

4. INTRODUCTION
• 自己満足サイトを作りたい。
• 情報を発信する場所を作りたい。
• 更新を継続させよう。
• 日々いろいろ拡張したい。

5. プラグインを入れるたび、
毎日のちょっとしたジレンマを解決、
そう、WordPressならね。

6. 構成図
今回はブログ部分のマークアップ基礎！

7. レイアウト
HEADER
CONTENTS
SIDEBAR
FOOTER

8. レイアウト
HEADER
CONTENTS
シンプルなブログテーマで！
SIDEBAR
FOOTER

9. 環境構築（windows）
• XAMPP
– phpmyAdminでお手軽管理
• テキストエディタ
– SakuraとかNotepad ++

10. 環境構築（windows）
• XAMPP
– phpmyAdminでお手軽管理
• テキストエディタ
– SakuraとかNotepad ++

11. WordPressするならWebMatrix
http://www.microsoft.com/japan/web/webmatrix/wordpress/

12. WebMatrixでローカル構築

13. WebMatrixでローカル構築
• ウィザード形式で選択するだけで環境構築。
• ファイルエディタ付で自動補完機能あり。
• ローカルとサーバで転送・ダウンロード可能。
– Windowsサーバーのみ

14. 全体
<header id=“header”> </header>
<div id=“main”> </div>
<section id=“contents”> </section>
<div id=“sidebar”> </div>
<footer id=“footer”> </footer>

15. 全体
<header id=“header”> </header>
Mainはレイアウト要素
<div id=“main”> </div>
<section id=“contents”> </section>
Sidebarは必ずしも、asid
でマークアップされると
は限らない <div id=“sidebar”> </div>
<footer id=“footer”> </footer>

16. 記事要素
<section id=“contents”> </section>
<article class=“entries”> </article>
<header class=“entriesHeader”>
</header>
<div class=“entriesBody”> </div>
<footer class=“entriesFooter”> </footer>

17. 記事要素
Sectionを使うなら見出し要素は必要 <section id=“contents”> </section>
<section id=“contents”>
<h1>BLOG</h1>
<article>～</article> <article class=“entries”> </article>
</section>
<header class=“entriesHeader”>
</header>
<div class=“entriesBody”> </div>
<footer class=“entriesFooter”> </footer>

18. コメント要素
• 私は、コメントを article でマークアップした。仕様では、article は "ユーザー投稿のコメ
ント" にも使えると言っている。しかし、その親の article の中にネストしている。仕様で
は次のように言っている。
• article 要素がネストする場合、内側の article 要素は、原理上は外側の article のコン
テンツに関連した記事を表します。例えば、ユーザーが投稿するコメントを受け付ける
サイトでのウェブログのエントリは、そのウェブログのエントリの article 要素の中にネ
ストした article 要素として、そのコメントを表すことができます。
• これらコメントには、その日付や時間、その著者名も含まれている。もし望むなら、あ
なたはこれらを header に入れることもできる。しかし、私には、それは、まるで、それ
のためのマークアップのように見える。
• Ｈｔｍｌ５を使ったブログのデザイン – html5doctor.jp –より
http://www.html5.jp/html5doctor/designing-a-blog-with-html5.html

19. コメント要素
• 私は、コメントを article でマークアップした。仕様では、article は "ユーザー投稿のコメ
ント" にも使えると言っている。しかし、その親の article の中にネストしている。仕様で
は次のように言っている。
• article 要素がネストする場合、内側の article 要素は、原理上は外側の article のコン
テンツに関連した記事を表します。例えば、ユーザーが投稿するコメントを受け付ける
？？？
サイトでのウェブログのエントリは、そのウェブログのエントリの article 要素の中にネ
ストした article 要素として、そのコメントを表すことができます。
• これらコメントには、その日付や時間、その著者名も含まれている。もし望むなら、あ
なたはこれらを header に入れることもできる。しかし、私には、それは、まるで、それ
のためのマークアップのように見える。
• Ｈｔｍｌ５を使ったブログのデザイン – html5doctor.jp –より
http://www.html5.jp/html5doctor/designing-a-blog-with-html5.html

20. コメント要素

21. コメント要素
<div id="comments">
<h2 id="comments-title">
&ldquo;<span>TEST</span>&rdquo; への3件のコメント</h2>
<ol>
<li>
<article>
<footer> footer 要素は、この場合のよう
<!-- META情報 --> に、適切であれば、そのセクショ
</footer> ンの最初に現れることもありま
<div>
す。
<p>コメントのテスト投稿1番目</p>
</div>
<div> Html5.jpより
<a href='#'>返信 <span>&darr;</span></a> http://www.html5.jp/tag/eleme
</div><!-- .reply --> nts/article.html
</article><!-- #comment-## -->
</li>
</ol>
</div><!-- #comments -->

22. と、ここまで来て、ひとつ気がつく
WordPressじゃなくてもいいような？

23. WordPressは拡張性が高い
だからサイト機能を考えるのが楽しい

24. サイトが作りたくなる記事
• WordPressでどんなサイトでも作れちゃう気になれる無料プラ
グイン9個
– Webクリエイターボックス
– http://www.webcreatorbox.com/webinfo/wordpress-
useful-plugin/
• WordPressでブログじゃないWebサイトを作るときのいろいろ
（サンプル付き）
– Webデザインレシピ
– http://webdesignrecipes.com/wordpress-corporate-
website/

25. WordPressを使うときに
これだけはいつもやっていること

26. 最低限のテーマだけ準備する
• テーマファイル構成
– home.php ・・・ トップページ用
– header.php ・・・ ヘッダー
– footer.php ・・・ フッター
– single.php ・・・ 記事
– page.php ・・・ ページ
– archive.php ・・・ アーカイブ
– functions.php ・・・ 関数・管理
– style.css ・・・ テーマスタイル

27. functions.phpを定義
• バージョン情報関連を削除する
• プロフィール項目削除（ AIM/Yahoo IM/Jabber Google Talk）
• プロフィール項目追加（Twitter、facebook）
• テーマのthumbnails機能の有効化
• ページナビゲーションの実装
• パンくずナビゲーションの実装
• 一般設定に項目を追加する（keyword、description）

28. コメントはSNSと連携させる
• Disqus Comment System
– SNSアカウントがあれば投稿ができる
• Facebook Comments
– facebookユーザーが投稿できる。
• Twitter Mentions as Comments
– Twitterのコメント表示。RTが多いと大変なことに。

29. ユーザーとの交流で
楽しいWordPress Lifeを！