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

2015/12/12[公開] 2015/12/16[最終更新]

 ブログ記事の見出しの装飾を、下線ボーダーのグラデーションのラインだけという、控え目な装飾の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%でグラデーションしています。

スポンサー リンク

こちらの記事もどうぞ

コメントを残す

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