画像を多用するのでブログ本体は基本シンプルで問題ないのですが、デスクトップ等で見るときはともかくモバイルで見たときのメニューがちょっと愛想ないなあって感じなので、メニュー名の左側にアイコンを表示させてみました。
メニュー周りの話なのでもしかしたらWordpressそのものに標準装備されているのかもしれませんが、Webフォント「Font Awesome」のバージョン設定をCocoonの方で制御しているようなので、こちらではWordpressテーマ「Cocoon」の話としてまとめています。
Webフォント「Font Awesome」とは
無料で利用可能なWebアイコンフォントです。
有料のプランもあるそうですが、Webデザインに従事しているプロさんやオリジナリティを出したい企業さん向けかな感じです。
私を含め、趣味でちょっと使いたい程度なら無料でも十分ではないかと。
ということで。
ブログのメニューにWebフォントを表示させる方法
Font Awesome4から5に変更（必須ではない）
まずは前準備としてWordpressのダッシュボード内にある [Cocoon設定] をクリックし、[全体] タブをクリック。
タブ中ほどにある [サイトアイコンフォント] 項目にある Font Awesome5 を選択し設定を保存。
これでFont Awesome5が使用可能になりますが、5でしか使えないフォントを使わない限り必須の作業とは言えません。
今後、テーマの方で5がデフォルト指定になる可能性がわいひら氏によって示唆されていますし、意識せずともいずれ5の環境を使っていることになるかもですが、変えておかないことにあまり意味はなさげ。
新規にメニューを作るか既存のメニューを準備
ダッシュボード内にある [外観] をクリックし開いたサブメニューから [メニュー] をクリック。
新規でメニューを作成して項目を選択するか、すでにあるメニュー内の項目を選択するのですが、こちらでは既存のものを使用。
当ブログには主にイラレの使い方を書き留めてある「Adobe」の項目があるので、このサンプルではここにアイコンを付けていきます。
Font Awesomeのコードをコピー＆ペースト
Cocoonの公式サイト（ブログ？）にて紹介されていたのですが、こちらのサイトさんでFont Awesomeのアイコンフォントを一覧化してワンクリックでコードをコピペできるように提供してくださっています。
すんごい楽！ありがたいです。
一覧からりんごのマークをクリック。
て。
ブランドロゴとしてちゃんとあるのすごいな。
これでクリップボードにコピーされたので
メニュー内のナビゲーションラベル部分にコードをペースト
WordPressダッシュボード内のメニュー項目に戻り、ナビゲーションラベル部分に今ほどコピーしたコードをそのままペーストして設定を保存。
ブログを確認すると、メニューの「Adobe」の横にAppleのブランドロゴが表示されました。
ほかの項目にもそれっぽいアイコンフォントを探して設定して
完成！
てかかわええ。
因みに、ナビゲーションラベル部分に貼り付ける方法はこちらのサイトさんを参考にさせていただきました。
こちらの方がとても丁寧に解説されているので、わかりづらかったらこちらを参考にされるといいかなーって感じです。
コメント