Last updated on 2020年12月31日
こんにちは、mickです。
プログラマ系SEとしてIT企業に11年勤務。
WordPressのテーマにCocoonを使っているとFont Awesomeがすぐに使えます。
Font Awesomeは、ブログサイトの中にアイコンを挿入することができるアイコンセットです。
アイコンをメニューにいれて見栄えをよくしていきます。
メニューをアイコンで飾る
メニューをアイコンで飾って見栄えを変えていきます。
CocoonのFont Awesomeのバージョン5に変更する
CocoonのFont Awesomeのバージョンが5になっているか確認します。
そしてバージョンが5になるように設定を変更します。
Font Awesomeのサイトでアイコンとタグを検索する
Font Awesomeのアイコンギャラリーからアイコンを検索します。
ここでは、homeアイコンを探しています。
Cocoonに付いているFont Awesomeは無料版です。
その範囲でだけアイコンを利用できます。
HTMLタグをコピーします
アイコンを表示するためのHTMLタグがでてきます。
このHTMLタグをコピーします。
メニューにタグを貼り付ける
メニューにHTMLタグを貼り付けます。
「WordPress」＞「外観」＞「メニュー」
ここの「ナビゲーションラベル」にHTMLタグをそのまま貼り付けて保存すれば完成です。
まとめ。機能はあっても知らないことがある
実は私はFont Awesomeのことを知りませんでした。
これに気がついたのは、ソースコードのハイライトができない問題を解決するためにWeb検索をしていたとき。
せっかく面白い機能があるのに知らないままなことって多いような気がします。
Font Awesomeに気づけてよかった。
以上、みなさまの助けなれば幸いです。
初稿 2020/07/15