ブログ記事の見出しの装飾を、下線ボーダーのグラデーションのラインだけという、控え目な装飾のcssで設定しました。いままでテーマtwenty fifteenのデフォルトのまま、フォントサイズと太字の見出しのままにしていました。べつに見出しスタイル不要論者というわけでもないのですが、WP初心者の頃にやらかした次のような失敗などの理由から、デフォルトのままにしていたのです。
- h2、h3を指定したら、ブログのサブタイトル、ウィジェットのタイトルにまでスタイルが反映されて困った。
- いじればいじるほど酷くなる、デザイン的センスの欠如
このページの目次
記事本文の見出しh2、h3だけ要素を指定する
基本の基本の話かもしれませんが、記事本文の見出しだけを装飾したいワケです。初心者のころは、こういう所がわからなかったのです。要素名やクラス名はテーマによって変わってくると思いますので、Chromeブラウザーで調べたい箇所を右クリック「検証」で調べます。以下の例は、ここのサイトテーマtwenty fifteenの場合です。
h2 {*********;}
h3 {*********;}
見出し2がh2、見出し3がh3なんだからと、初心者の頃に指定したのが上のコレです。これだと記事本文の見出し以外にも、サイドバーのウィジェットタイトル、サイトのサブタイトルまでスタイルが適用されてしまいます。
.entry-content h2 {************;}
.entry-content h3 {************;}
本文部分のクラス名 entry-content を一緒に指定することで、本文中の見出しだけをスタイル指定できるようになります。
.single-post .entry-content h2 {*************;}
.single-post .entry-content h3 {*************;}
投稿ページに限定して、固定ページは除きたい場合は、投稿ページのクラス名 single-post も一緒に指定すれば投稿ページだけを指定することが出来ます。 こんな需要あるかわかりませんが、私はコレでやっています。
BorderのグラデーションをCSSで
見出しのスタイルは、ものすごくシンプルなアンダーラインだけです。そのラインをCSSでグラデーションにしたのです。
/* 見出し */
.single-post .entry-content h2,
.single-post .entry-content h3 {
position: relative;
padding-bottom: 6px;
}
.single-post .entry-content h2:before,
.single-post .entry-content h3:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
margin: 0 auto;
text-align: center;
background-position: center;
background-repeat: no-repeat;
}
.single-post .entry-content h2:before {
height: 3px;
background-image: -webkit-linear-gradient(left,gray,white 90%);
background-image: linear-gradient(to right,gray,white 90%);
}
.single-post .entry-content h3:before {
height: 2px;
background-image: -webkit-linear-gradient(left,gold,white 70%);
background-image: linear-gradient(to right,gold,white 70%);
}
もちろん、私がこんな複雑なCSSをサクサクと作れるワケがありませんので、参考サイトの情報が元になっています。
変更点
ほぼ参考サイトそのままに、見出しのフォントサイズや左詰め、ボーダーなどはそのままにしているので、ボーダーも左から右へとグラデーションしていくように変えています。h2の見出しはカラーGrayの3pxを幅90％でグラデーション、h3はカラーGoldの2pxを幅70％でグラデーションしています。