#001 アウトラインを意識したHTML構造を考える。

wordpressの新しいテーマづくり始めました。

今のテーマを使い始めて約4か月。
そんな短期間でテーマのリニューアルに着手したきっかけは、（早くも飽きてきた、というのもあるけど）「Sass+Compassをお勉強してみよう！」というところから。

ただ、「どうせやるなら、とことんやりたい！」という気持ちも湧いてきちゃいまして。
今持っている知識をフル動員＋新たな知識をできるかぎり吸収しながら、“今の自分にできる最高のwordpressテーマ”を作ってみようと思います。

Contents

1 最初に考えるべきはHTML構造。
2 それを踏まえてhtmlコーディング！
- 2.1 セクショニングって、やっぱりなかなか難しい。。。
- 2.2 このレビューの関連アイテム

最初に考えるべきはHTML構造。

新たにテーマを作るうえで、まず最初に意識したいのは「アウトラインを意識したセマンティックなHTMLでページを構成する」ということ。

なお、当サイトは「ブログ」なので、“一番ちゃんとしてほしいページ”は一つ一つの記事ページ。
検索でヒットするページや、どこかにリンクが貼られるのは基本的にはトップページではなく個々の記事なので、「デザイン（構造的な意味でも、見た目的な意味でも）」は記事ページに最適化する方向で考えていきたいと思います。

というわけで、まずは現状のサイト構造を見直してみます。

少しも寒くないわ、少しも。映画『アナと雪の女王』ネタバレ感想

アウトラインは以下のとおり。

ページのタイトル

Untitled Section[ヘッダーナビ]
『アナと雪の女王』の作品概要
感想
関連してる（かもしれない）記事
Popular Posts人気記事[サイドバー]
Trend今読まれている記事[サイドバー]
What’s new!![サイドバー]

Tag-cloud[フッター]
Categories[フッター]
Archives[フッター]

致命的にダメダメな構造ではないような気もしますが、なんかへんな感じ。

いろいろ考え方はあるんでしょうが、理想としては以下のようなアウトラインにしたい！

ページのタイトル

Untitled Section[ヘッダーナビ]
記事のタイトル

『アナと雪の女王』の作品概要
感想
このレビューの関連アイテム

このエントリーの関連記事
Untitled Section[aside]

Popular Posts人気記事[サイドバー]
Trend今読まれている記事[サイドバー]
What’s new!![サイドバー]

Untitled Section[aside]

Tag-cloud[フッター]
Categories[フッター]
Archives[フッター]

※アウトラインの整理に加えて、「ページのタイトル」と「記事のタイトル」を持たせたこと、関連アイテムをリスト項目として持たせたこと、なども変更事項です。

article、aside、sectioなどのセクショニングの考え方もまたなかなか難しいんですが、以下のサイトを参考に、いままで使っていなかったmainというタグも使って、セマンティックになるように考えてみました。

＜参考：How to Use The HTML5 Sectioning Elements＞

それを踏まえてhtmlコーディング！

考えたhtmlソースは以下のとおり。

[html]
<body>
　　<header>
　　　　<div id="logo">ultiamte-ez.com</div>
　　　　<nav>…</nav><!– メインナビゲーション –>
</header>

<div class="container">
　　<div class="breadcrumb">…</div><!– パンくずリスト –>
<div class="col-md-8"><!– センターカラム –>
<main role="main">
<h1>ページのタイトル</h1>
<p>記事メタ情報（日付、カテゴリー、タグ）</p>
<article>
<h2>「article」のタイトル</h2>
<section>
<p>いつも書いてる記事冒頭のごにょごにょ。</p><!– 見出しなしのsectionはよろしくない。このセクション自体無くしてもいいのかな～と思いつつも。。。要検討！ –>
</section>
<section>
<h3>概要</h3>
<p>本文</p>
</section>
<section>
<h3>感想</h3>
<p>感想記事の本文。つらつらつら～</p>
</section>
<section>
<h4>このレビューの関連アイテム</h4>
<ul>
<li>Amazonへのリンクとか。</li>
<li>AppStoreへのリンクとか。</li>
</ul>
</section>
</article>
<section>
<h1>このエントリーの関連記事</h1>
<ul>
<li>関連記事へのリンク</li>
<li>関連記事へのリンク</li>
</ul>
</section>
</main>
</div><!– ここまでセンターカラム –>
<div class="col-md-4"><!– サイドバー –>
<aside>
<section>
<h1>Popular Posts人気記事</h1>
<ul>…</ul>
</section>
<section>
<h1>Trend今読まれている記事</h1>
<ul>…</ul>
</section>
<section>
<h1>What’s new!!新着記事</h1>
<ul>…</ul>
</section>
</aside>
</div><!– #sidebar –>
</div><!– .container –>

<footer>
<aside>
<section>
<h1>Tag-cloud</h1>
<ul>…</ul>
</section>
<section>
<h1>Categories</h1>
<ul>…</ul>
</section>
<section>
<h1>Archives</h1>
<ul>…</ul>
</section>
</aside>
<p>Copyright 2014 ultimate-ez.com</p>
</footer>
</body>
[/html]

今まで書き溜めた記事の都合上、h3,h4の見出しが突然登場しちゃうのはあまりキレイではないんだけど、しっかりセクショニングをしてあげればアウトラインはきれいに出るはず！
ぶっちゃけ、h3,h4で見出しを付けておいた方がcssの指定なんかがやりやすかったりもしますしね。（よくない考え方なのかな。。）

これまで書き溜めた記事のうち、記事の同一section内でh2、h3、h4が混在しているものが多くありまして。
それらについては、「暗黙的セクショニング」が行われてしまい、ちょっと期待通りのアウトラインを描かなくなってしまうんですが…
ま、「article」内で下位セクションが作られることはそこまで大きな問題ではないはず。。。
ということで、上記のhtmlをベースに、wordpressのテーマファイルへと落とし込んでいこうと思います。