Font Awesomeで作った”見出しデザイン”がすっきりキレイ!

アイコンフォントのFont Awesomeを利用して、先頭だけにデザインが入った、すっきりした見出しを作りました。Twenty Seventeenの様な余白が美しいテーマには、CSSで凝った 見出しデザイン を作るよりも、あっています。

CSSでお手製の”見出しデザイン”を作るのも楽しいですが、どこのサイトも似たり寄ったりになりますよね。

見出しデザイン (h1~h6)のを変更

今回デザインを変更したのは、見出し要素h1~h6までです。

ちょっと趣向を変えて、アイコンフォントのFont Awesomeを使ってみました。こんな感じ↓

Twenty Seventeen, 見出しデザイン のサンプル
Twenty Seventeen、見出しのサンプル

ピンク色のアイコンフォントをタグの頭に入れるだけの手抜きCSSです。

h1:before {
	font-family: FontAwesome;
	content: "\f00a\00a0";
	color: #ff7f7f;
}
  • 変更したい見出しをh1~h6から選ぶ
  • 見出しの頭にアイコンが入るように、疑似要素「:before」をつける
  • font-familyは、FontAwesome
  • Font Awesome、The Iconsから選ぶ
  • 好みの色を選ぶ

見出しに使う場合は挿し色があった方がいいでしょうね。最低必要なのはこのくらいです。

Font Awesomeが入っていない場合は、関連記事「Font Awesome をセットアップ」をご参照ください。

Twenty Seventeenの個別投稿の本文だけに反映させる

Twenty Seventeenの見出しは、最近の流行なのか?、よく見かけるようになったスッキリとしたデザインでした。余白も美しいので、それを活かしつつ、チョットだけ挿し色が欲しかっただけなので、大満足です。

ちなみに、h2タグとh5タグだけ微妙にグレーだったり、h5タグよりh6タグの方が大きかったり、余白が上下左右で均等じゃなかったりするのは、Twenty Seventeenの初期状態です。何だか不思議な作りです。

それぞれの追記CSS

h1、大見出しのCSS

h1.entry-title:before {
	font-family: FontAwesome;
	content: "\f00a\00a0";
	color: #ff7f7f;
}

単独の投稿・固定ページだけにアイコンが入るように、entry-titleというクラス内でのh1を指定しています。h1をとっちゃえば、アーカイブページなどでも記事タイトル部分にアイコンが表示されます。

CSSでアイコンを指定する際は、Unicodeでアイコンを指定出来るので便利です。

アイコンと最初の文字の間に空白(\00a0)を入れました。

CSS追記機能を使っても、CSSスタイルシートに書き加える方法でもどちらでも動きました。

h2、中見出しのCSS

div.entry-content h2:before {
	font-family: FontAwesome;
	content: "\f14a\00a0";
	color: #ff7f7f;
}

こちらも投稿・固定ページの本文のh2だけにアイコンが入るように、entry-contentというクラスを指定しています。こちらは投稿ページと固定ページの両方に効いています。

アーカイブページでは、カテゴリーやタグの名前が大見出し(h1タグ)に使われ、中の記事タイトルはh2に降格しますから、記事タイトルと記事内のh2の両方が中見出し扱いになります。上のh1タグのh1指定をとれば、見た目上は辻褄が合うように表示できるのですが、中身が実はh2だらけになってしまうので、投稿内にh2を使用するかどうか悩ましいところです。

h2~h6は、アイコンが変わるだけで、構成は同じですから、説明を割愛させていただきます。

h3、中小見出しのCSS

div.entry-content h3:before {
	font-family: FontAwesome;
	content: "\f138\00a0";
	color: #ff7f7f;
}

h4、小見出しのCSS

div.entry-content h4:before {
	font-family: FontAwesome;
	content: "\f0a9\00a0";
	color: #ff6a6a;
}

h5、極小見出しのCSS

div.entry-content h5:before {
	font-family: FontAwesome;
	content: "\f12e\00a0";
	color: #ff7f7f;
}

h6、最小見出しのCSS

div.entry-content h6:before {
	font-family: FontAwesome;
	content: "\f135\00a0";
	color: #ff7f7f;
}

まとめ

ま、とりあえず、テーマの余白の美しさを活かしつつ、ちょっとした刺し色を入れることができたので、よしとします。

コメントを残す

メールアドレスが公開されることはありません。