見出しh2,h3にCSSでグラデーションの下線を付けました

 ブログ記事の見出しの装飾を、下線ボーダーのグラデーションのラインだけという、控え目な装飾のcssで設定しました。いままでテーマtwenty fifteenのデフォルトのまま、フォントサイズと太字の見出しのままにしていました。べつに見出しスタイル不要論者というわけでもないのですが、WP初心者の頃にやらかした次のような失敗などの理由から、デフォルトのままにしていたのです。

  • h2、h3を指定したら、ブログのサブタイトル、ウィジェットのタイトルにまでスタイルが反映されて困った。
  • いじればいじるほど酷くなる、デザイン的センスの欠如

記事本文の見出しh2、h3だけ要素を指定する

 基本の基本の話かもしれませんが、記事本文の見出しだけを装飾したいワケです。初心者のころは、こういう所がわからなかったのです。要素名やクラス名はテーマによって変わってくると思いますので、Chromeブラウザーで調べたい箇所を右クリック「検証」で調べます。以下の例は、ここのサイトテーマtwenty fifteenの場合です。

 見出し2がh2、見出し3がh3なんだからと、初心者の頃に指定したのが上のコレです。これだと記事本文の見出し以外にも、サイドバーのウィジェットタイトル、サイトのサブタイトルまでスタイルが適用されてしまいます。

 本文部分のクラス名 entry-content を一緒に指定することで、本文中の見出しだけをスタイル指定できるようになります。

 投稿ページに限定して、固定ページは除きたい場合は、投稿ページのクラス名 single-post も一緒に指定すれば投稿ページだけを指定することが出来ます。 こんな需要あるかわかりませんが、私はコレでやっています。

BorderのグラデーションをCSSで

 見出しのスタイルは、ものすごくシンプルなアンダーラインだけです。そのラインをCSSでグラデーションにしたのです。

 もちろん、私がこんな複雑なCSSをサクサクと作れるワケがありませんので、参考サイトの情報が元になっています。

CSSでボーダーの両端を徐々に透過させる | UNORTHODOX WORKBOOK | Blog

変更点

 ほぼ参考サイトそのままに、見出しのフォントサイズや左詰め、ボーダーなどはそのままにしているので、ボーダーも左から右へとグラデーションしていくように変えています。h2の見出しはカラーGrayの3pxを幅90%でグラデーション、h3はカラーGoldの2pxを幅70%でグラデーションしています。

こちらの記事もどうぞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です