Download as PDF, PPTX
![IE対策これをheaderタグ内に記述します<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->もしくはJSファイルをDLしてテンプレートフォルダにアップして<!--[if lte IE 8]><script src="<?php bloginfo('template_url'); ?>/j/html5.js"></script><![endif]-->こうしてもいいですね](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtml5wordpress-120306152253-phpapp01%2f75%2fHtml5-word-press-48-2048.jpg&f=jpg&w=240)
Recommended
More Related Content
What's hot
Similar to Html5でword pressテーマを作るよ！
More from Muyuu Fujita
Html5でword pressテーマを作るよ！
- 1.
- 2.名前 ： 藤田 無憂 所属 ： (株)ミツエーリンクス 職種 ： ディレクター みハード ー毎 度おなじ 人ですよ TW : @anticyborgデ ィスクの FB : muyuu Blog : http://stackstock.net Mail : anticyborg@gmail.com
- 3.
- 4.
- 5.はじめに何でみんなHTML5に興味があるの？ ‣ 今流行の技術をいち早く取り入れたいから？‣ 今後不可欠になるから？
- 6.はじめに何でみんなHTML5に興味があるの？ ‣ 今流行の技術をいち早く取り入れたいから？‣ 今後不可欠になるから？ ‣ Flashが嫌いだから？
- 7.はじめに何でみんなHTML5に興味があるの？ ‣ 今流行の技術をいち早く取り入れたいから？‣ 今後不可欠になるから？ ‣ Flashが嫌いだから？とてもステキで攻撃的で現実的だと思います
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.まずはじめにHTML5で「覚えるべきこと」を覚えましょ‣ 新しく追加された要素‣ 廃止された要素‣新しい概念、コンテンツモデル‣ アウトラインの概念
- 25.新しい要素‣header ： 親レベル要素のヘッダー‣footer： 親レベル要素のフッター‣section ： 各セクション(章、節)‣nav ： ナビゲーション‣article ： 単一の記事であることを示す‣aside ： articleの内容と関連性の低い要素他にもいっぱい(firure,video,audio等)
- 26.廃止された要素 basefont, big,center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir主にタグの意味が装飾そのものだったタグがなくなっているようです。html5では、装飾は全てCSSで制御しましょう。
- 27.新しい概念、コンテンツモデル今までは「ブロック要素」と「インライン要素」に別れてました div p h1∼6 span a imgul ol li dt dd br strong abbrblockquote form input textarea etc... etc...
- 28.新しい概念、コンテンツモデル今までは「ブロック要素」と「インライン要素」に別れてました div p h1∼6 span a imgul ol li dt dd br strong abbrblockquote form input textarea etc... etc...
- 29.
- 30.‣Flow ： 大体全部フロー・コンテンツ‣Metadata： コンテンツの定義用コンテンツ‣Sectioning ： コンテンツを区切るためのコンテンツ‣Haeading ： 見出し‣Phrasing ： テキスト(テキスト内のタグ含む)‣Embedded ： ドキュメントに埋め込むコンテンツ‣Intaractive ： ユーザーが行動を起こすコンテンツ
- 31.アウトライン 今までは見出しタグだけで文章構造を作成 文章構造としての区切りは見出<h1>ページのタイトル</h1><h2>ページのサブタイトル</h2> しタグだけ →ページに関する文章と本文の<h2>記事タイトル</h2><p>記事本文</p> 区別などはなし<h3>記事内サブタイトル</h3><p>記事本文</p>
- 32.そこんとこ、今回は強化させて頂いてます<hgroup> • hgroupタグで親要素の見出し <h1>ページのタイトル</h1> <h2>ページのサブタイトル</h2> を定義</hgroup> • articleタグで本文を定義<article> • sectionタグで章を定義 <h2>記事タイトル</h2> <p>記事本文</p> <section> 文章に意味を持たせる事で、他 <h3>記事内サブタイトル</h3> のシステムからのデータ流用を <p>記事本文</p> </section> 容易に出来ます</article>
- 33.そこんとこ、今回は強化させて頂いてます<hgroup> • hgroupタグで親要素の見出し <h1>ページのタイトル</h1> <h2>ページのサブタイトル</h2> を定義</hgroup> • articleタグで本文を定義<article> • sectionタグで章を定義 <h2>記事タイトル</h2> <p>記事本文</p> <section> 文章に意味を持たせる事で、他 <h3>記事内サブタイトル</h3> のシステムからのデータ流用を <p>記事本文</p> </section> 容易に出来ます</article>
- 34.そこんとこ、今回は強化させて頂いてます<hgroup> • hgroupタグで親要素の見出し <h1>ページのタイトル</h1> <h2>ページのサブタイトル</h2> を定義</hgroup> • articleタグで本文を定義<article> • sectionタグで章を定義 <h2>記事タイトル</h2> <p>記事本文</p> <section> 文章に意味を持たせる事で、他 <h3>記事内サブタイトル</h3> のシステムからのデータ流用を <p>記事本文</p> </section> 容易に出来ます</article>
- 35.そこんとこ、今回は強化させて頂いてます<hgroup> • hgroupタグで親要素の見出し <h1>ページのタイトル</h1> <h2>ページのサブタイトル</h2> を定義</hgroup> • articleタグで本文を定義<article> • sectionタグで章を定義 <h2>記事タイトル</h2> <p>記事本文</p> <section> 文章に意味を持たせる事で、他 <h3>記事内サブタイトル</h3> のシステムからのデータ流用を <p>記事本文</p> </section> 容易に出来ます</article>
- 36.
- 37.
- 38.まとめHTML5は概ね「もっと構造的に書こうね！」 こんな感じです
- 39.
- 40.ということで、じゃあそろそろWordPressで作りましょうか
- 41.
- 42.
- 43.
- 44.
- 45.IE対策DOMに関する問題こんなhtmlの場合<header> <hgroup><h1>サイトのタイトルが入ると思いますよ</h1> <h2>サイトの説明とかが入るんじゃない？</h2> </hgroup></header>
- 46.IE対策DOMに関する問題期待されるDOMツリー実際のDOMツリーheader header└ hgroup hgroup ├h1 h1 └h2 h2
- 47.
- 48.IE対策これをheaderタグ内に記述します<!--[if lte IE8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->もしくはJSファイルをDLしてテンプレートフォルダにアップして<!--[if lte IE 8]><script src="<?php bloginfo('template_url'); ?>/j/html5.js"></script><![endif]-->こうしてもいいですね
- 49.IE対策 CSSの問題と対策header, footer,section 等の新要素はIEで定義されていないのでスタイルが効きませんCSSで未定義要素をブロック要素として定義してあげましょう<style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }</style>
- 50.
- 51.
- 52.DOCTYPE やたらと長く、本当に意味があったのかよく分 からないDOCTPEはすっかり短くなりました<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html>
- 53.DOCTYPE やたらと長く、本当に意味があったのかよく分 からないDOCTPEはすっかり短くなりました<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html> 短っ！！
- 54.htmlタグ htmlタグにもいっぱい属性を書けと強いられて いた記憶がありますね<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><html lang="ja">
- 55.htmlタグ htmlタグにもいっぱい属性を書けと強いられて いた記憶がありますね<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><html lang="ja"> 短っ！！
- 56.文字エンコーディング html5は基本的にUTF-8を推奨しており、他は非 推奨らしいですよ<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta charset="UTF-8" />
- 57.文字エンコーディング html5は基本的にUTF-8を推奨しており、他は非 推奨らしいですよ<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta charset="UTF-8" /> 短っ！！
- 58.文字エンコーディング html5は基本的にUTF-8を推奨しており、他は非 推奨らしいですよ<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta charset="UTF-8" /> 下位互換があるので上の書き方でも良いらしい
- 59.
- 60.画面大枠のタグ構成ブログだったら大体みなさんこんな構成になってるんじゃないでしょうかbody div#header div#content div#main div#sidebar div#footer
- 61.画面大枠のタグ構成こうしましょうbody header#header ←headerタグに変更div#content section#main aside#sidebar ↑sectionタグに変更 ↑asideタグ に変更 footer#footer ←footerタグに変更
- 62.画面大枠のタグ構成こうしましょbody 気になるところ header#header ←headerタグに変更 なんでid=header、footerつけ てんの？要らなくね？ div#content →はい要りませんね。 section#main aside#sidebar ただ、現行テーマはidとかclass ↑sectionタグに変更 ↑asideタグ とかでスタイルを定義している に変更 ケースが多そうなのでつけたま まの方が楽かと思いました。 「いらない、何も、捨ててしま おう」と言えないのが残念です footer#footer ←footerタグに変更
- 63.画面大枠のタグ構成こうしましょbody 気になるところ header#header ←headerタグに変更 何でdiv#contentはsectionにし ないの？ div#content →sectionは単なるdivの代替タ section#main aside#sidebar グではなく文章のまとまりを意 ↑sectionタグに変更 ↑asideタグ 味するので、特に文章として意 に変更 味をなさない#contentにはdiv を使う方が適切 footer#footer ←footerタグに変更
- 64.画面大枠のタグ構成こうしましょbody 気になるところ header#header ←headerタグに変更 右のウィジェットメニューは navじゃないの？ div#content →navは「主要なナビゲーショ section#main aside#sidebar ン」に使われるべきタグであ ↑sectionタグに変更 ↑asideタグ り、全てのリンクの塊に使うタ (single.phpならarticle) に変更 グではない。 また通常サイドメニューは「メ インコンテンツに関係する」リ ンクばかりではないケースが多 footer#footer ←footerタグに変更 いのでasideを使う方が無難
- 65.
- 66.コンテンツ部分index.php, single.php 等のコンテンツ部分を変更します<?phpwhile (have_posts()) : the_post(); ?><div id="article"> <h1><?php the_title(); ?></h1> <p class="date"><?php the_time('Y年m月d日'); ?></p> <?php the_content(''); ?> <h2>関連するページ</h2> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul></div><?php endwhile; ?>
- 67.コンテンツ部分 こんな感じに変更します <?php while (have_posts()) : the_post(); ?>変更→ <article id="article"> 追加→ <header> <h1><?php the_title(); ?></h1> <p class="date"><?php the_time('Y年m月d日'); ?></p> 追加→ </header> <?php the_content(''); ?> 追加→ <section> <h2>関連するページ</h2> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> 追加→ </section>変更→ </article> <?php endwhile; ?>
- 68.コンテンツ部分 こんな感じに変更します <?php while (have_posts()) : the_post(); ?> ※変更点変更→ <article id="article"> 追加→ <header> •div#articleをarticleに変更 <h1><?php the_title(); ?></h1> <p class="date"><?php the_time('Y年m月d日'); ?></p> •記事タイトルにhgroupを追加 追加→ </header> •関連記事をsectionで纏める <?php the_content(''); ?> 追加→ <section> <h1>関連するページ</h1> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> 追加→ </section>変更→ </article> <?php endwhile; ?>
- 69.コンテンツ部分こんな感じに変更します<?php while (have_posts()): the_post(); ?> 気になるところ<article id="article"> <header> 記事内にもheaderって使える <h1><?php the_title(); ?></h1> <p class="date"><?php the_time('Y年m月d日'); ?></p> の？ </header> →はい。headerは「ページの <?php the_content(''); ?> ヘッダー」を指定するものでは <section> なく、「親要素に対するヘッ <h1>関連するページ</h1> ダ」になります。 <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> </section></article><?php endwhile; ?>
- 70.コンテンツ部分こんな感じに変更します<?php while (have_posts()): the_post(); ?> 気になるところ<article id="article"> <header> 関連するページをsection内に <h1><?php the_title(); ?></h1> <p class="date"><?php the_time('Y年m月d日'); ?></p> 入れたんなら何故記事本文は </header> sectionに入れないの？ <?php the_content(''); ?> →セクショニングコンテンツに <section> は見出しを入れるようにすべき <h1>関連するページ</h1> で、the_content(‘’); には見出し <ul> <li>ページタイトル</li> がないケースの方が多いため <li>ページタイトル</li> sectionに入れていません </ul> </section></article><?php endwhile; ?>
- 71.コンテンツ部分こんな感じに変更します<?php while (have_posts()): the_post(); ?> 気になるところ<article id="article"> <header> 何で関連するページがh1に <h1><?php the_title(); ?></h1> <p class="date"><?php the_time('Y年m月d日'); ?></p> なってるの？ </header> →h1はページに対してユニー <?php the_content(''); ?> クではなくなりました。 <section> <h1>関連するページ</h1> section(正確にはセクショニン <ul> <li>ページタイトル</li> グコンテンツ)で区切られた要 <li>ページタイトル</li> 素の中身に記載する見出しレベ </ul> </section> ルは自由に設定する事が出来ま</article><?php endwhile; ?> す
- 72.サイドナビ部分とりあえずウィジェットを使っているとして、吐き出されるコードを変更しましょう<div id=”xx” class=”widget”><h2 class=”widget_title”>Recent Post</h2> <ul> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul></div>
- 73.サイドナビ部分 変更箇所は大してありませんね変更→ <section id=”xx” class=”widget”> 変更→ <h1 class=”widget_title”>Recent Post</h1> <ul> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul>変更→ </section>
- 74.サイドナビ部分 変更箇所は大してありませんね変更→ <section id=”xx” class=”widget”> ※変更点 変更→ <h1 class=”widget_title”>Recent Post</h1> <ul> <li>テキストテキスト</li> •div#xxをsectionに変更 <li>テキストテキスト</li> •h2をh1に変更 <li>テキストテキスト</li> </ul>変更→ </section>
- 75.フッター・ヘッダー部分 フッター・ヘッダーに関してはこれと言った定番がな いので、「何となくこんな感じ？」を例に出しますheader.php<div id=”header”> <h1 class=”title”><?php bloginfo(‘name’); ?></h1> <h2><?php bloginfo(‘description’); ?></h2> <ul> <?php wp_list_pages('title_li='); ?> </ul> </div>footer.php <div id=”footer”> <p>copyright © <?php echo date(‘Y’); ?> blogname</p> </div>
- 76.フッター・ヘッダー部分 こんな感じに変更します header.php変更→ <header id=”header”> 追加→ <hgropu> <h1 class=”title”><?php bloginfo(‘name’); ?></h1> <h2><?php bloginfo(‘description’); ?></h2> 追加→ </hgroup> <ul> <?php wp_list_pages('title_li='); ?> </ul>変更→ </header> footer.php変更→ <footer id=”footer”> <p>copyright © <?php echo date(‘Y’); ?> blogname</p>変更→ </footer>
- 77.フッター・ヘッダー部分 こんな感じに変更します header.php変更→ <header id=”header”> ※変更点 追加→ <hgroup> <h1 class=”title”><?php bloginfo(‘name’); ?></h1> •div#headerをheaderに変更 <h2><?php bloginfo(‘description’); ?></h2> 追加→ </hgroup> •hgroupを追加 <ul> <?php wp_list_pages('title_li='); ?> •div#footerをfooterに変更 </ul>変更→ </header> footer.php変更→ <footer id=”footer”> <p>copyright © <?php echo date(‘Y’); ?> blogname</p>変更→ </footer>
- 78.フッター・ヘッダー部分 こんな感じに変更しますheader.php <headerid=”header”> 気になるところ <hgroup> <h1 class=”title”><?php bloginfo(‘name’); ?></h1> hgroupって？ <h2><?php bloginfo(‘description’); ?></h2> </hgroup> →見出しが複数の見出しレベル <ul> を持つ場合にグループ化し、ど <?php wp_list_pages('title_li='); ?> </ul> れが見出しになるかを定義 </header> ※最大の見出し以外はアウトラ インに表示されませんfooter.php <footer id=”footer”> <p>copyright © <?php echo date(‘Y’); ?> blogname</p> </footer>
- 79.
- 80.なのでみんなで情報を収集して みんなで情報を共有するそんな良いサイクルを作りませんか？
- 81.でく れて まで 読ん最後 (/' □')/あり がとー