メイン部分のCSSカスタマイズ(3)今日はブログにとってとても重要な部分である、記事のタイトル部分について調べてみます。記事タイトルは「記事ごとにCSSをわりあてる」で見た記事ごとの囲みのすぐ下に「entry-title」というクラス名で書き出されます。この「entry-title」というクラス名はトップページやその他のページに行っても不変ですが、変化する部分があります。トップページの記事タイトルのマークアップまずトップページを見てみます。class="entry-title"「h2」でマークアップされています。下の記事を見ていっても常に「h2」です。id="site-title"サイトのタイトルが「h1」になっています。id="site-title"で囲まれるだけになります。その他のページその他、カテゴリーアーカイブ、タグ別アーカイブ、日付アーカイブなどの一覧ページでは、「entry-title」は「h2」でマークアップされています。シングルページと同様にサイトタイトルはdivで囲まれるのみになっています。その他のページのh1は?カテゴリーアーカイブ、タグ別アーカイブ、日付アーカイブなどの一覧ページでは、新たに「page-title」というクラス名が加わって、「カテゴリーアーカイブ」、「タグ別アーカイブ」、「日付アーカイブ」などというページのタイトルを「h1」でマークアップしています。class="entry-title"というようにシングルページのタイトルと同じようになっています。見出しのマークアップが変化する理由なぜ、このように見出しが「h1」になったり「h2」になったりするのでしょうか。トップページでは、「サイトのタイトルが最重要」、と考え「h1」にマークアップし、記事の見出しは「どの記事も同じ重要性」を持つということで、統一して「h2」にしていると考えられます。ところが個別記事では「最も大事なものをその記事のタイトル」と考え、マークアップを「h1」に変えているのではないでしょうか。これはサイトの構成としてもよいことですし、SEOの面からもよいことと思います。Tenがこのようなマークアップになった事はとてもありがたい事ですね。記事タイトルのデザインこれをもとに、bodyや記事の囲みのdivにつけられたクラス名と組み合わせれば、記事タイトルのデザインもいろいろと変える事が出来ますね。トップページは記事が並んでいるので、entry-titleはおとなしめに、個別ページでは「ばーーんと目立たせて」、なんてことも簡単にできる訳です。#ff6600;}これは、トップページの、category-1の記事タイトルにのみ、左に太いオレンジのボーダーを表示させるというCSSです。応用すれば、記事タイトルにカテゴリーごとに違うアイコンをつける、などという事もできますね。Webourgeon。