どうも！たら(@hajimetara)です。
今回は、グローバルナビメニューの設定方法とFont Awesome5でアイコンをプラスする方法のご紹介です。
グローバルナビメニューはパソコンなどで上の方に表示されるメニューです。
グローバルナビメニューの設定方法
外観→「メニュー」をクリック。
「ライブプレビューで管理」をクリック。
「メニューを新規作成」をクリックします。
メニュー名を入れてヘッダーメニューをチェックしてから「次」をクリック。
「項目を追加」をクリック。
右側にカスタムリンク、固定ページ、投稿、カテゴリー、タグが表示されます。グローバルナビメニューに入れたいページの▼をクリック。
入れたいページをクリック。
左側のメニューに入りました。クリックすると…
ナビゲーションラベルが表示されるので、ナビゲーションメニューで表示したい名前を入れます。
「公開」をクリックして完了です。
Font Awesome5の設定方法
ナビゲーションメニューは、文字の横にアイコンをつけることもできます。アイコンをダウンロードせずにコードを付け加えるだけなので簡単です。
Font Awesome5を使うための基本設定
Cocoon設定→「Cocoon設定」をクリック。
「全体」タブをクリック。
サイトアイコンフォントの「Font Awesome5」を選択。
フリー画像のページから英語で検索します。
Font Awesome5の使い方
検索で出てきたアイコンの中から1つを選んでクリックします。
アイコンにカラーがついていますが見本です。このカラーになるわけではありません。
アイコンの上の <i classからはじまるコードをクリック。
このコードにサイズなどのコードを加えてナビゲーションラベルに入力します。
Font Awesome5のアイコンサイズと設定
アイコンのサイズはいろいろありますが、ナビゲーションメニューには「fa-lg」が使いやすいと思います。
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
fa-lgのサイズにする場合、コードは…
WordPress
アイコンと文字の間に隙間がないから、ちょっと見にくい。
「fa-fw」を入れると隙間ができるよ！
WordPress
隙間ができて見やすくなった！
ナビゲーションラベルにコードを貼り付けて
「公開」をクリックして完了です。
