今日はブログにとってとても重要な部分である、記事のタイトル部分について調べてみます。

記事タイトルは「記事ごとにCSSをわりあてる」で見た記事ごとの囲みのすぐ下に「entry-title」というクラス名で書き出されます。この「entry-title」というクラス名はトップページやその他のページに行っても不変ですが、変化する部分があります。

トップページの記事タイトルのマークアップ

まずトップページを見てみます。

h2 class="entry-title"

「h2」でマークアップされています。どんどん下の記事を見ていっても常に「h2」です。

ではトップページのh1は？

そうなるとh1がどこなのか気になりますね

h1 id="site-title"

サイトのタイトルが「h1」になっています。

シングルページの記事の見出しとサイトタイトルのマークアップ

シングル（個別記事）のページでは記事の見出しが「h1」に変わり、「site-title」は

div id="site-title"

で囲まれるだけになります。

その他のページ

その他、カテゴリーアーカイブ、タグ別アーカイブ、日付アーカイブなどの一覧ページでは、「entry-title」は「h2」でマークアップされています。シングルページと同様にサイトタイトルはdivで囲まれるのみになっています。

では、その他のページのh1は？

カテゴリーアーカイブ、タグ別アーカイブ、日付アーカイブなどの一覧ページでは、新たに「page-title」というクラス名が加わって、「カテゴリーアーカイブ」、「タグ別アーカイブ」、「日付アーカイブ」などというページのタイトルを「h1」でマークアップしています。

固定ページのタイトル

固定ページでは、

h1 class="entry-title"

というようにシングルページのタイトルと同じようになっています。

見出しのマークアップが変化する理由

なぜ、このように見出しが「h1」になったり「h2」になったりするのでしょうか。
トップページでは、「サイトのタイトルが最重要」、と考え「h1」にマークアップし、記事の見出しは「どの記事も同じ重要性」を持つということで、統一して「h2」にしていると考えられます。
ところが個別記事では「最も大事なものをその記事のタイトル」と考え、マークアップを「h1」に変えているのではないでしょうか。

これはサイトの構成としてもよいことですし、SEOの面からもよいことと思います。Twenty Tenがこのようなマークアップになった事はとてもありがたい事ですね。

記事タイトルのデザイン

これをもとに、bodyや記事の囲みのdivにつけられたクラス名と組み合わせれば、記事タイトルのデザインもいろいろと変える事が出来ますね。トップページは記事が並んでいるので、entry-titleはおとなしめに、個別ページでは「ばーーんと目立たせて」、なんてことも簡単にできる訳です。

カテゴリーごとに記事タイトルのデザインを変える

.home .category-1 .entry-title {
   border-left: 10px solid #ff6600;
}	

これは、トップページの、category-1の記事タイトルにのみ、左に太いオレンジのボーダーを表示させるというCSSです。応用すれば、記事タイトルにカテゴリーごとに違うアイコンをつける、などという事もできますね。