白兎のまじメモ:WEBマーケッターの戯言雑記

WEBマーケッターでありフリーランスのECコンサルタントの白兎が書くまじなブログ

Font Awesome(オシャレなフリーアイコン)をワードプレスとはてなブログで使えるようにしたら凄い便利だった!

f:id:shiro-usagi:20190508212734j:plain

 

今日はとっても簡単に設定出来て、ワードプレスで記事を書く時、アイコンにかなりバリエーションがでるFont Awesomeをご紹介しますね。僕はワードプレスと、はてなブログで設定しましたので両方の設定の仕方も書いておきます!

 

このFont Awesomeは本当に便利だし、可愛いアイコン我使えるのが良いんだよね!

 

 

はてなブログでFont Awesomeを使えるようにするには?

 

 

f:id:shiro-usagi:20190508212841j:plain

 

  •  設定↓
  •  詳細設定 ↓
  •  headに要素を追加 ↓

 

この場所に以下のソースコードをコピペでいれて保存!

 

 

実際、アイコンの数は沢山あります。

 実際はてなブログで使う場合は、上のリンクからアイコン選択のページに飛んで、使いたいアイコンをクリックするとソースコードが取得できます。

 

f:id:shiro-usagi:20190508213521j:plain

 

▼...ここからアイコン一覧のソースが見れるよ!

fontawesome.com

 

 

f:id:shiro-usagi:20190508213557j:plain

 

画像のピンクの線の部分をコピーして使えばOK…なんですが、はてなブログの場合ちょっと特殊で「 」を追加します。

 

 

 

ワードプレスでFont Awesomeを使えるようにする

 

f:id:shiro-usagi:20190508213758j:plain

 

 

ワードプレスは設定の部分だけ説明します。後ははてなブログと全く同じです。ただワードプレスはテーマにもよって違うのでどのテーマでも使えるようにプラングインで「Head, Footer and Post Injections」をプラグイン追加で検索してインストールして下さい。

 

ja.wordpress.org

 

有効化したら….

  •  ワードプレス管理画面のレフトナビの設定↓
  •  Head, Footer and Post Injections
  •  ON EVERY PAGE部分にはてなブログと同じコードを貼りつけて保存。

 

f:id:shiro-usagi:20190508213922j:plain

 

まとめ

この白兎のまじメモでも良く使ってるよ!特に...  のアイコンはね。これを使うと一気にブログがお洒落になるし、記事にメリハリが出来ていいよ!オススメ。

 

 

www.shirousagi.site

www.shirousagi.site