「Simplicity」で見出しデザイン(h2,h3,h4)にアイコンを追加!おしゃれにカスタマイズする方法!

他とは一味違うデザインで「おしゃれ」な見出しにしたいですよね?

今回はWordPress人気テーマSimplicityで見出し(h2,h3,h4)デザインをおしゃれにカスタマイズする方法をご紹介します!

見出し前にアイコンを付ける

siplicity見出しデザインカスタマイズ

見出し前にワンポイントあるだけでおしゃれ感がでますね!

しかも見出し前にアイコンを付けているブログはあまり見かけません。

つまり個性を出すポイントにもなりますね。

好きなアイコンのデザインを探す

当ブログの見出し前アイコンは「Font Awesome 5」を使っています。

Font Awesome アイコン一覧」で好きなアイコンを探します。

好きなアイコンをクリックすると、「fxxx」(アルファベットの「f」+「3桁の数字」)が表示されますので、メモしておきます。

「Font Awesome 5」を導入する

導入方法は次のコードを<head>~</head>に挿入します。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

Simplicityの場合は、header-insert.phpファイル内に記述します。

子テーマをインストールしていない方は、まず子テーマをインストールしましょう。Simplicityの場合は、こちらからインストールできます。

「外観」⇒「テーマの編集」⇒「header-insert.php」をクリックします。

下図赤文字の位置にコードを記述します。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

これで「Font Awesome 5」が使える状態になりました。

h2見出しにアイコンを付けてみる

スタイルシートを編集します。

「外観」⇒「テーマの編集」⇒「style.css」をクリックします。

※style.cssは必ずバックアップを取っておきます。

既にh2見出しデザインのカスタマイズを記述している箇所の下に、次のコードを追記します。

/*.entry-content h2{}の下に追加*/
/*Font Awesome 5 用記述*/
.entry-content h2:before{ 
	font-family: "Font Awesome 5 Free";
	content: "\f369";	/* アイコンコード */
	position: absolute;	/* 位置 */
	left: 0.25em;
	top: 0.5em;
	font-size: 1.0em;	/* サイズ */
	color: #fafafa;		/* 色 */
}

アイコンコード、位置、サイズ、色はお好きな値を設定してください。

これでh2見出し前に「Font Awesome 5」のアイコンが表示されます!

h3,h4見出しのデザインにアイコンを追加したい場合は、上記のh2をh3やh4に置き換えてくださいね。

まとめ

今回はWordPress人気テーマSimplicityで見出し(h2,h3,h4)デザインをおしゃれにカスタマイズする方法をご紹介しました!

説明した内容を簡単にまとめると次の3ステップでしたね。

  1. Font Awesome 5 でアイコン選定
  2. Font Awesome 5 を使うために<head>タグ内にコード追加
  3. スタイルシートにアイコンデザインコード追加

仕組みさえわかってしまえば意外と簡単ですので、ぜひオリジナルの見出しデザインをつくってみてください!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする