グローバルナビメニューとFont Awesome5の設定方法

どうも!たら(@hajimetara)です。

今回は、グローバルナビメニューの設定方法とFont Awesome5でアイコンをプラスする方法のご紹介です。


グローバルナビメニューはパソコンなどで上の方に表示されるメニューです。

 

グローバルナビメニューの設定方法

外観→「メニュー」をクリック。

 

ライブプレビューで管理」をクリック。

 

メニューを新規作成」をクリックします。

 

メニュー名を入れてヘッダーメニューをチェックしてから「」をクリック。

 

項目を追加」をクリック。

 

右側にカスタムリンク固定ページ投稿カテゴリータグが表示されます。グローバルナビメニューに入れたいページの▼をクリック

 

入れたいページをクリック。

 

左側のメニューに入りました。クリックすると…

ナビゲーションラベルが表示されるので、ナビゲーションメニューで表示したい名前を入れます。

公開」をクリックして完了です。

Font Awesome5の設定方法

ナビゲーションメニューは、文字の横にアイコンをつけることもできます。アイコンをダウンロードせずにコードを付け加えるだけなので簡単です。

Font Awesome5を使うための基本設定

Cocoon設定→「Cocoon設定」をクリック。

 

全体」タブをクリック。

 

サイトアイコンフォントの「Font Awesome5」を選択。

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

フリー画像のページから英語で検索します。

矢印アイコンならarrow、HOMEアイコンならhome、封筒アイコンならmailで検索できます。

Font Awesome5の使い方

検索で出てきたアイコンの中から1つを選んでクリックします。

アイコンにカラーがついていますが見本です。このカラーになるわけではありません。

アイコンの上の <i classからはじまるコードをクリック。

このコードにサイズなどのコードを加えてナビゲーションラベルに入力します。

Font Awesome5のアイコンサイズと設定

アイコンのサイズはいろいろありますが、ナビゲーションメニューには「fa-lg」が使いやすいと思います。

fa-lg 
fa-2x 
fa-3x 
fa-4x 
fa-5x 

 

fa-lgのサイズにする場合、コードは…

<i class=”fab fa-wordpress-simple fa-lg“></i>WordPress

WordPress

はじめ
はじめ

アイコンと文字の間に隙間がないから、ちょっと見にくい。

たら
たら

fa-fw」を入れると隙間ができるよ!

<i class=”fab fa-wordpress-simple fa-fw fa-lg”></i>WordPress

WordPress

はじめ
はじめ

隙間ができて見やすくなった!

 

ナビゲーションラベルにコードを貼り付けて

公開」をクリックして完了です。

タイトルとURLをコピーしました