More Related Content
Similar to Html5でword pressテーマを作るよ!
Similar to Html5でword pressテーマを作るよ! (20)
More from Muyuu Fujita (14)
Html5でword pressテーマを作るよ!
- 2. 名前 : 藤田 無憂
所属 : (株)ミツエーリンクス
職種 : ディレクター
みハード ー
毎 度おなじ 人ですよ TW : @anticyborg
デ ィスクの
FB : muyuu
Blog : http://stackstock.net
Mail : anticyborg@gmail.com
- 26. 廃止された要素
basefont, big, center, font, s, strike, tt, u, frame,
frameset, noframes, acronym, applet, isindex, dir
主にタグの意味が装飾そのものだったタグがなく
なっているようです。html5では、装飾は全て
CSSで制御しましょう。
- 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>
- 38. まとめ
HTML5は概ね
「もっと構造的に書こうね!」
こんな感じです
- 48. 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]-->
こうしてもいいですね
- 49. IE対策
CSSの問題と対策
header, footer, section 等の新要素はIEで定義されていないの
でスタイルが効きません
CSSで未定義要素をブロック要素として定義してあげましょう
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
- 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を使う方が無難
- 66. コンテンツ部分
index.php, single.php 等のコンテンツ部分を変更します
<?php while (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; ?> す
- 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>
- 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
<header id=”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>
- 80. なので
みんなで情報を収集して
みんなで情報を共有する
そんな良いサイクルを作りませんか?
- 81. でく れて
まで 読ん
最後 (/' □')/
あり がとー