Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Wp html5

  • Identifiez-vous pour voir les commentaires

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を!

×