Wordpress

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

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

ゼロからWEBで収入を得るチカラを育てる
無料メールマガジンに登録する

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

そんな開放的な人生を叶えるための思考や、1記事だけで30万円の利益を出してしまったブログノウハウをシェアし続けているメールマガジンを無料で配信しています。

ボクが全く稼げていない初心者から年収1,000万円のノマドワーカーになるまでのストーリーを読めば、あなたも開放的な人生を叶えることができるはず。

ぜひ、メルマガを購読してみてくださいね!