読みやすい文章やSEO効果的にも非常に重要なブログの見出し。

目立つ場所だからこそ自分好みにおしゃれにカスタマイズしたい気持ちはありますよね?

ということで今回はWordPressブログの見出し前(左側)に、おしゃれなアイコン画像を表示させる方法についてご紹介していこうと思います。

ちなみに今回の見出しの目標はこんなかんじ↓↓

見出し,アイコン,おしゃれ,画像,方法 これくらいならプラグインも併用して簡単にデザインできますよ!

見出し前(左側)にアイコン画像を表示させる方法


WordPressブログの見出し前(左側)にアイコン画像を表示させる方法は簡単です。

今回はプラグイン『WordPress Visual Icon Fonts』を使ったやり方についてご紹介していきましょう!

※今回はh2見出しのやり方ですが、h3,h4でも一緒ですよ。

1.プラグインWordPress Visual Icon Fontsをインストール


まずはプラグイン「WordPress Visual Icon Fonts」をインストールします。

WordPress Visual Icon Fontsのダウンロードはこちらから!

アイコン,画像,表示,見出し
「ダウンロード」ボタンがあるので、クリックするとダウンロードが開始します。

2.WordPress Visual Icon Fontsを有効化


WordPressのダッシュボード画面に移動し、「プラグイン→新規追加→ファイルのアップロード」を選択します。

ダウンロードしたZipファイルを、ドロッグ&ドロップしたら「今すぐインストール」をクリックして、有効化をしましょう。

見出し,画像,アイコン,表示,方法
これでプラグインの有効化は完了です!

3.「テーマ編集→CSS」にコードを追加


WordPressのダッシュボード画面から「外観→テーマ編集→スタイルシート(CSS)」に移動します。

そして、CSSに以下のコードを追記します。



追加をしたら『ファイルを更新』を押します。

すると、h2見出しのデザインがこんなかんじになります↓↓

見出し,アイコン,画像,表示,方法
うん、いいかんじだ。

でも、これではアイコン画像がチェックマークになっているので、吹き出しマークにしていきましょうね!

見出し,アイコン,おしゃれ,画像,方法

完成図


4.アイコンの色を変更する方法


まずはアイコンの色を変更していきましょう。

さきほど追記したアイコンのcolorを「#FA9CB8→#FFFFFF」に変更して、白色に変えます。

ちなみに全体コードとしてはこれ↓↓



はい、色を変更するとさっきのチェックマークがこんなかんじに↓↓
アイコン,見出し,画像,表示,前
よし!次にチェックマークのアイコンを吹き出しマークに変更していきます!

5.アイコンの画像を変更する方法


それではアイコンの画像を変更します。

まずはどんなデザインのアイコンにするかを、FontAwesomeから選んでいきます。

見出し,アイコン,画像,表示,方法
ずらーっとアイコン一覧が表示されるわけですが、その中からご指名のアイコンを選んでください。

アイコンのUnicodeをコピーしましょう。

見出し,アイコン,画像,表示,方法
こちらのコードをcontentのコードと入れ替えます。「f058→f0e5」

完成した追加コードはこちら↓↓



これで見出しの完成です!

見出し,アイコン,おしゃれ,画像,方法
こんなかんじで簡単にアイコンを見出しにつけることができます!

※ちなみにアイコンが表示されない時は、反映されていない場合だと思うので、何度か更新をするといいでしょう!

さいごに


今回はWordPressの見出し前(左側)にアイコン画像を表示させる方法についてご紹介しました。

見出しは非常に目立つポイントなので、オリジナリティを出していくといいでしょう!