ブログにおけるHTML5のアウトラインを考えてみる

 2014/12/16

HTML5
HTML5でWordPressのテーマを自作するにあたり頭を悩ませたのがHTML5のアウトラインをどう位置付けるかです。HTML5のアウトラインは【セクショニングコンテンツを適切に用いて明示的にセクションを示す】ことを推進されています。なんかむずかしいこと言ってますがsection要素を使ってきちんとアウトラインの生成しましょうね、ってことですね。
しかし新しく作ったWordPressテーマを今まで書いていたブログに使用した場合、アウトラインが正しく生成されない恐れがあります。それに自分でブログを書いている時にうっかりsectionの入れ忘れもありそう。。。そんな感じで困惑しながらわたしが作ったWordPressのブログ用テーマのアウトラインは以下のようになりました。

スポンサーリンク

記事部分はsection要素を使用するのを辞め、暗黙的なアウトラインにした

やはり過去記事にsection要素を今から入れていくのはむずかしいしいと判断し、senctionを入れるのはあきらめて今まで通りh2、h3などを用いて記事を作成し暗黙的なアウトラインを生成していくことに。

とはいえ、いずれ絶対明示的なアウトラインにしてね!って時代が来たとき、すんなりと修正できるようにしました。ざっくりとしていますが以下のような感じです。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<header>
<nav>
</nav>
</header>
<body>
<main>
<header>
<h1>ブログタイトル</h1>
<time>●●年●月●日</time>
</header>
<p>以下記事本文</p>
<aside>記事中アドセンス</aside>
<h2>記事見出しh2</h2>
<p>記事本文</p>
<h3>記事見出しh3</h3>
<p>記事本文</p>
<p>終わり</p>
記事下シェアボタン
<aside>記事下アドセンス</aside>
</main>
<aside>
サイドバー
<h2>サイドバー見出し</h2>
</aside>
<footer>
フッター
<h2<ブログ名</h2<
コピーライト
</footer>
</body>
</html>

HTML5のアウトラインチェックツールHTML 5 Outlinerにて確認するすることができますので、試してみてください。

説明

とりあえず記事タイトルが一番上に来るようにしたかったので、記事タイトル以下はh2へ。articleとsectionは使用していないので暗黙的なアウトラインってことで記事タイトル以下は一段下がっています。

ちょっと迷いはありますがとりあえずこんなとこでいこうかと思います。

まとめ

いろいろ本を読んだり、サイト見たりしたんだけどHTML5のアウトラインの理解に時間がかかってしまった。。。いつかどなたか聡明な方がfunctions.phpにチョコチョコっとコードを書くと過去記事すべてにsectionが入るよ~って教えてくれるのを期待します!!宜しくお願いします!

HTML5 ブログ運営

Please comment!

  

Leave a Reply




現在トラックバックはありません。