このブログのテーマは、『WordPressデザインブック3.x対応』をもとに作っています。
トップページ、カテゴリーページ、タグページ、検索結果ページには、記事のタイトル・サムネイル画像・記事の概要の一覧を表示しています。ブログのタイトルにH1タグを使い、記事のタイトルにH2タグを使っています。
記事の個別ページには、記事のタイトル・アイキャッチ画像・記事を表示しています。ここでも、ブログのタイトルにH1タグ、記事のタイトルにH2タグを使っていました。
このブログでは、最初見出しタグを使っていませんでした。『プロ・ブロガーの 必ず結果が出るアクセスアップ テクニック100』を読み、、記事の本文中にH3とH4のタグを使うようにしたところ、Googleからのアクセスが目に見えて増えました。。
この本と、バズ部の記事『SEO内部対策で検索流入数を一日で３０%増加させた時に行った２０の事』では、記事のタイトルには、H1タグをつけることを推奨しています。
そこで、記事のタイトルにH1タグをつけました。その時の方法は、次の記事にまとめています。
しかし、この状態では、記事のタイトルは、H1タグがついていて、記事の本文には、H3とH4タグが使われています。本文中にはH2タグが使われていません。これは、あまり良い状態ではありません。
そこで、今回、記事の本文中にH2タグをつけるようにしました。ところが、H2タグは、トップページ等で記事のタイトルに使われています。
H1タグのときと同じように、IDセレクタをつけたところ、The W3C Markup Validation Serviceのチェックでたくさんのエラーが出てしまいました。
同一のIDセレクタは、ひとつのHTMLで１回しか使えないようです。そこでクラスセレクタを使用しました。備忘録代わりに、ここに記録しておきます。
トップページ等のHTML
<h2 class="listtitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
トップページ等のCSS
div.post h2.listtitle {
font-size: 1.75em;
font-family: 'Trebuchet MS', sans-serif;
font-weight: bold;
padding: 10px 10px;
margin: 5px}
div.post h2.listtitle a {text-decoration: none;
color: #D5004A;
}
記事の個別ページのHTML
<h2 class="p">～</h2>
記事の個別ページのCSS
div.post h2.p {
margin-top: 3.2em;
color: #D5004A;
font-size: 1.34em;
font-weight: bold;
background: #ffffff;
border-top:1px solid #dddddd;
border-right:1px solid #dddddd;
border-bottom:1px solid #dddddd;
border-left:3px solid #D5004A;
padding: 5px 0 5px 10px;
background: -moz-linear-gradient(top, #ffffff, #f6f5ea); /* FF */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f6f5ea));/* Webkit */
-pie-background:linear-gradient(top, #ffffff, #f6f5ea); /* ie */
behavior: url(images/PIE.htc); /* ie */
}
記事の個別ページでH2タグにクラスセレクタを使うことは避けたかったのですが、試行錯誤しても、よい方法がわかりませんでした。トップページ等と記事の個別ページで同じCSSを使えば良いのですが、ここは変えたいところです。よい方法がわかる方は教えていただけると幸いです。
【2014年4月13日追記】
記事の個別ページでH2タグにクラスセレクタを指定しても、しなくてもよいように変更しました。
クラスセレクタを指定してもよいので、今までの記事の変更も発生しません。
簡単に説明すると、HTMLの記事を出力する部分をブロックレベル要素として、クラスセレクタを使って名前をつけます。
CSSでは、その名前をつけたクラスセレクタで指定したブロックレベル要素内のH2タグの表示方法を定義するようにします。
HTML
<div class="entry"> <?php the_content(); ?> </div>
CSS
div.post div.entry h2 {
margin-top: 3.2em;
color: #D5004A;
font-size: 1.34em;
font-weight: bold;
background: #ffffff;
border-top:1px solid #dddddd;
border-right:1px solid #dddddd;
border-bottom:1px solid #dddddd;
border-left:3px solid #D5004A;
padding: 5px 0 5px 10px;
background: -moz-linear-gradient(top, #ffffff, #f6f5ea); /* FF */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f6f5ea));/* Webkit */
-pie-background:linear-gradient(top, #ffffff, #f6f5ea); /* ie */
behavior: url(images/PIE.htc); /* ie */
}
