読みやすい文章や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に以下のコードを追記します。
.entry-content h2:before{
color: #FA9CB8;
content: "\f058";
font-family: "FontAwesome",sans-serif;
margin-right: 5px;
}
追加をしたら『ファイルを更新』を押します。
すると、h2見出しのデザインがこんなかんじになります↓↓
うん、いいかんじだ。
でも、これではアイコン画像がチェックマークになっているので、吹き出しマークにしていきましょうね！
4.アイコンの色を変更する方法
まずはアイコンの色を変更していきましょう。
さきほど追記したアイコンのcolorを「#FA9CB8→#FFFFFF」に変更して、白色に変えます。
ちなみに全体コードとしてはこれ↓↓
.entry-content h2:before{
color: #FFFFFF;
content: "\f058";
font-family: "FontAwesome",sans-serif;
margin-right: 5px;
}
はい、色を変更するとさっきのチェックマークがこんなかんじに↓↓
よし！次にチェックマークのアイコンを吹き出しマークに変更していきます！
5.アイコンの画像を変更する方法
それではアイコンの画像を変更します。
まずはどんなデザインのアイコンにするかを、FontAwesomeから選んでいきます。
ずらーっとアイコン一覧が表示されるわけですが、その中からご指名のアイコンを選んでください。
アイコンのUnicodeをコピーしましょう。
こちらのコードをcontentのコードと入れ替えます。「f058→f0e5」
完成した追加コードはこちら↓↓
.entry-content h2:before{
color: #FFFFFF;
content: "\f0e5";
font-family: "FontAwesome",sans-serif;
margin-right: 5px;
}
これで見出しの完成です！
こんなかんじで簡単にアイコンを見出しにつけることができます！
さいごに
今回はWordPressの見出し前(左側)にアイコン画像を表示させる方法についてご紹介しました。
見出しは非常に目立つポイントなので、オリジナリティを出していくといいでしょう！
数年前まで田舎でくすぶっていたサラリーマンだった僕が、たった1つのブログを作ったことで人生が変わりました。
副業で始めたブログビジネスで、週1回だけ働いて月24万円の収入を得られるようになり、今ではストレスフリーな毎日を送れています。
- 自宅やカフェで自由に働けるノマドライフに興味がある
- 脱サラして、人間関係に疲れることない人生を叶えたい
- ブログで収入を得るために何から始めていいか分からない…！
- 帰りのチケットを取らなくても海外旅行に行ける生活に憧れる
開放感にあふれた人生を描くために初心者向けのブログ入門書を無料でプレゼントしています。
ゼロスタートの人にも「あ、ブログってこうやって稼げるんだ！」と反響をいただき、分かりやすい動画・文章でやさしく解説をしています。
僕のメルマガ登録者さん限定で、今だけ0円で配布をしていますがいつ値上げをするか分かりませんので、今のうちに無料プレゼントをお見逃しなく。
ボタンをクリックして、登録フォームに「名前」と「メールアドレス」を入力したら、すぐにプレゼントが手に入ります。
