ブログのメニューが文字情報だけですと、少し堅苦しさを感じませんか！？メニューにアイコンを付けるだけでぐっとオシャレになるだけでなく、文字だけよりもパッと見てカテゴリ内容が想像つきやすいというメリットがあります。
本記事では、ブログのメニューにアイコンを入れる方法についてご紹介します。
メニューにアイコン表示させる①（Font Awesome）
Cocoon側の設定
Font Awesomeというサイトでアイコンを無料配布しています。WordPress無料テーマ「Cocoon」はこのFont Awesomeに対応しています。
まずはWordPressのメニューのCocoon設定から「全体」タブを選択します。
次にサイトアイコンフォントの「Font Awesome５」を選択します。この設定をしておくことで最新のFont Awesomeもサイトに表示できるようにします。
※デフォルトは「Font Awesome４」になっていると思います。
これでCocoon側の設定は完了です。
Font AwesomeサイトでHTMLコードを確認
Font Awesomeのサイトに入ります。
サイトの左上にある検索バーにキーワードを入れて検索します。日本語対応はしておらず英語での検索になりますが、簡単な単語でOKなので大抵は欲しいアイコンが見つかると思います。
検索結果が表示されますので、好きなアイコンを選んでください。ただし、グレーのアイコンは無料版では選択できません。有料のPRO版を購入されるか、無料で使える黒いアイコンのみを使用しましょう。
①サイト上部のメニュー「Icons」を選択
②サイト左部のメニュー「Free」を選択
次の画面で「Start Using This Icon」を押下します。
すると、アイコンのHTMLコードが表示されるので、これをコピーします。
メニューにHTMLコードを貼り付ける
Font AwesomeサイトでコピーしたHTMLコードをメニューに貼り付けます。
WordPressの外観からメニューを選択し、つぎに「カスタムリンク」を選択します。
「リンク文字列」の枠内または、メニュー追加後の「ナビゲーションラベル」の枠内にHTMLコードを貼り付けます。
最後に画面下にある「メニューを保存」ボタンを押して更新して完了です。
メニューにアイコン表示させる②（Windows10の絵文字）
標準のWindow絵文字を表示させることも可能です。以降の説明はWindows10の場合の操作になります。
まずは先程と同様に、WordPressの外観からメニューを選択し、つぎに「カスタムリンク」を選択します。
次に、「リンク文字列」の枠内または、メニュー追加後の「ナビゲーションラベル」の枠内にメニューに表示させたい文字列とアイコンを入力します。
＜アイコン入力の方法＞
方法①：入力箇所で右クリックし「絵文字」を選択→一覧からアイコンを選択
方法②：「Windowsキー」＋「.（ピリオド）」
方法③：「いえ」「かお」などのキーワードを入力し文字変換（該当アイコンがあれば変換候補の中にアイコンが表示されます）
下のスクショのように絵文字が入ります。Font Awesomeはモノクロですが、カラーアイコンの方が良ければ絵文字を使うと良いでしょう。
まとめ
以上をまとめると、Cocoonでブログメニューにアイコンを入れるには２つの方法があります。
① Font Awesomeを使用する（モノクロ）
② Windows絵文字を使用する（カラー）
コメント