Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wp html5

  • Login to see the comments

Wp html5

  1. 1. HTML5×ブログ×WordPress
  2. 2. PROFILE • Yuu @regret_raym – Webクリエイター – 動画配信会社勤務。 – WordPressの制作経験 • 有料動画会員サイト • スマートフォン向けギャラリーサイト – 普段のお仕事 • Movable TypeなどのCMS構築と運用や サイト制作のディレクションからデザイ ン、コーディングまで全般
  3. 3. INTRODUCTION • 自己満足サイトを作りたい。 • 情報を発信する場所を作りたい。 • 更新を継続させよう。 • 日々いろいろ拡張したい。
  4. 4. プラグインを入れるたび、毎日のちょっとしたジレンマを解決、 そう、WordPressならね。
  5. 5. 構成図 今回はブログ部分のマークアップ基礎!
  6. 6. レイアウト HEADER CONTENTS SIDEBAR FOOTER
  7. 7. レイアウト HEADER CONTENTS シンプルなブログテーマで! SIDEBAR FOOTER
  8. 8. 環境構築(windows)• XAMPP – phpmyAdminでお手軽管理• テキストエディタ – SakuraとかNotepad ++
  9. 9. 環境構築(windows)• XAMPP – phpmyAdminでお手軽管理• テキストエディタ – SakuraとかNotepad ++
  10. 10. WordPressするならWebMatrix http://www.microsoft.com/japan/web/webmatrix/wordpress/
  11. 11. WebMatrixでローカル構築
  12. 12. WebMatrixでローカル構築• ウィザード形式で選択するだけで環境構築。• ファイルエディタ付で自動補完機能あり。• ローカルとサーバで転送・ダウンロード可能。 – Windowsサーバーのみ
  13. 13. 全体 <header id=“header”> </header> <div id=“main”> </div> <section id=“contents”> </section> <div id=“sidebar”> </div> <footer id=“footer”> </footer>
  14. 14. 全体 <header id=“header”> </header> Mainはレイアウト要素 <div id=“main”> </div> <section id=“contents”> </section> Sidebarは必ずしも、asid でマークアップされると は限らない <div id=“sidebar”> </div> <footer id=“footer”> </footer>
  15. 15. 記事要素 <section id=“contents”> </section> <article class=“entries”> </article> <header class=“entriesHeader”> </header> <div class=“entriesBody”> </div> <footer class=“entriesFooter”> </footer>
  16. 16. 記事要素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>
  17. 17. コメント要素• 私は、コメントを article でマークアップした。仕様では、article は "ユーザー投稿のコメ ント" にも使えると言っている。しかし、その親の article の中にネストしている。仕様で は次のように言っている。• article 要素がネストする場合、内側の article 要素は、原理上は外側の article のコン テンツに関連した記事を表します。例えば、ユーザーが投稿するコメントを受け付ける サイトでのウェブログのエントリは、そのウェブログのエントリの article 要素の中にネ ストした article 要素として、そのコメントを表すことができます。• これらコメントには、その日付や時間、その著者名も含まれている。もし望むなら、あ なたはこれらを header に入れることもできる。しかし、私には、それは、まるで、それ のためのマークアップのように見える。• Html5を使ったブログのデザイン – html5doctor.jp –より http://www.html5.jp/html5doctor/designing-a-blog-with-html5.html
  18. 18. コメント要素• 私は、コメントを article でマークアップした。仕様では、article は "ユーザー投稿のコメ ント" にも使えると言っている。しかし、その親の article の中にネストしている。仕様で は次のように言っている。• article 要素がネストする場合、内側の article 要素は、原理上は外側の article のコン テンツに関連した記事を表します。例えば、ユーザーが投稿するコメントを受け付ける ??? サイトでのウェブログのエントリは、そのウェブログのエントリの article 要素の中にネ ストした article 要素として、そのコメントを表すことができます。• これらコメントには、その日付や時間、その著者名も含まれている。もし望むなら、あ なたはこれらを header に入れることもできる。しかし、私には、それは、まるで、それ のためのマークアップのように見える。• Html5を使ったブログのデザイン – html5doctor.jp –より http://www.html5.jp/html5doctor/designing-a-blog-with-html5.html
  19. 19. コメント要素
  20. 20. コメント要素 <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 -->
  21. 21. と、ここまで来て、ひとつ気がつくWordPressじゃなくてもいいような?
  22. 22. WordPressは拡張性が高いだからサイト機能を考えるのが楽しい
  23. 23. サイトが作りたくなる記事• WordPressでどんなサイトでも作れちゃう気になれる無料プラ グイン9個 – Webクリエイターボックス – http://www.webcreatorbox.com/webinfo/wordpress- useful-plugin/• WordPressでブログじゃないWebサイトを作るときのいろいろ (サンプル付き) – Webデザインレシピ – http://webdesignrecipes.com/wordpress-corporate- website/
  24. 24. WordPressを使うときにこれだけはいつもやっていること
  25. 25. 最低限のテーマだけ準備する• テーマファイル構成 – home.php ・・・ トップページ用 – header.php ・・・ ヘッダー – footer.php ・・・ フッター – single.php ・・・ 記事 – page.php ・・・ ページ – archive.php ・・・ アーカイブ – functions.php ・・・ 関数・管理 – style.css ・・・ テーマスタイル
  26. 26. functions.phpを定義• バージョン情報関連を削除する• プロフィール項目削除( AIM/Yahoo IM/Jabber Google Talk)• プロフィール項目追加(Twitter、facebook)• テーマのthumbnails機能の有効化• ページナビゲーションの実装• パンくずナビゲーションの実装• 一般設定に項目を追加する(keyword、description)
  27. 27. コメントはSNSと連携させる• Disqus Comment System – SNSアカウントがあれば投稿ができる• Facebook Comments – facebookユーザーが投稿できる。• Twitter Mentions as Comments – Twitterのコメント表示。RTが多いと大変なことに。
  28. 28. ユーザーとの交流で楽しいWordPress Lifeを!

×