↑クリックしてプレゼント受け取りページへ移動する↑

ブログを作る

見出しの前(左側)におしゃれなアイコン画像を表示させる方法lWordPress

読みやすい文章や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の見出し前(左側)にアイコン画像を表示させる方法についてご紹介しました。

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

ABOUT ME
結城おさむ
結城おさむ
株式会社オープンエリア代表WEB/マーケッター&コンサルタント/北陸のインフラ企業の元サラリーマン/月10〜180万円の収入を得るコンサル生を続々と輩出/無料のメールマガジン配信中
【今だけ0円】WEBを使って収入源を増やすノウハウを受け取る!

数年前まで田舎でくすぶっていたサラリーマンだった僕が、たった1つのブログを作ったことで人生が変わりました。

副業で始めたブログビジネスで、週1回だけ働いて月24万円の収入を得られるようになり、今ではストレスフリーな毎日を送れています。

  • 自宅やカフェで自由に働けるノマドライフに興味がある
  • 脱サラして、人間関係に疲れることない人生を叶えたい
  • ブログで収入を得るために何から始めていいか分からない…!
  • 帰りのチケットを取らなくても海外旅行に行ける生活に憧れる

 

開放感にあふれた人生を描くために初心者向けのブログ入門書を無料でプレゼントしています。

ゼロスタートの人にも「あ、ブログってこうやって稼げるんだ!」と反響をいただき、分かりやすい動画・文章でやさしく解説をしています。

僕のメルマガ登録者さん限定で、今だけ0円で配布をしていますがいつ値上げをするか分かりませんので、今のうちに無料プレゼントをお見逃しなく。

ボタンをクリックして、登録フォームに「名前」と「メールアドレス」を入力したら、すぐにプレゼントが手に入ります。