アイコンでおしゃれに表示したりできないかな？
こんな悩みを解決していきます。
グローバルメニューは、記事の内容に関わらず、常時表示されるメニューで、パッと見でサイトの概要を伝えることができます。
また、グローバルナビ、グローバルナビゲーション、ヘッダーメニューとも呼ばれます。
グローバルメニュー が表示されていることで、検索エンジンで検索し直さなくても、一つの記事からサイトのトップ画面や同サイトの他の記事に飛ぶことができます。
今回は、Cocoonでグローバルメニュー を設定する方法、アイコンでおしゃれにするカスタマイズについて解説していきます。
・Cocoonでグローバルメニューを設定する方法
・グローバルメニューの基本のカスタマイズ方法
・応用：アイコンフォントの追加方法
・応用：グローバルメニューに区切り線を表示する方法
グローバルメニューの設定方法
まずは、基本的なグローバルメニューの設定方法を画像付きで解説します。
Cocoonでは
投稿
カスタムリンク
カテゴリー
なお、サンプル画像内では、
・赤色のマル＝変更前の操作を行う箇所
・黄色のマル＝変更されたことを確認する箇所
として解説していきます。
グローバルメニューの作成
まず、グローバルメニューを作成していきます。
画面左側の項目から、外観⇨メニューをクリックします。
以下の画面に切り替わったら、メニュー構造の中のメニュー名を入力し、右下のメニューを作成をクリックします。
グローバルメニュー でなくても自分の分かりやすい名前であれば大丈夫です。
操作をプレビューするには、画面の左上にある、自分のサイト名をクリックします。
以上で、グローバルメニューが作成されています。
続いて、作成したグローバルメニューに
②カスタムリンク
③カテゴリー
を追加する方法を解説していきます。
①固定ページを表示する方法
メニュー項目を追加の中の、固定ページの▼を押して、グローバルメニューに入れたい項目を選択します。
今回は、サイトマップ、サンプルページ、プライバシーポリシー、運営者情報を選択しました。
グローバルメニューに入れたい項目を選択したら、メニューに追加をクリックします。
メニューに追加をクリックしたら、以下の画像のように、先ほど追加した項目が表示されているか確認してください。
②カスタムリンクを表示する方法
メニュー項目を追加のカスタムリンクを▼を押して開きます。
今回は、ホームをカスタムリンクで追加したいと思います。
URLにhttps:// から始まる任意のURLを入力し、リンク文字列には、グローバルメニューで表示したい文言を入れます。
入力したら、メニューに追加をクリックしてください。
以下の画面のように、カスタムリンクで追加した項目が表示されているか確認してみてください！
③カテゴリーを表示する方法
次に、カテゴリーの▼を押して、グローバルメニューに追加したいカテゴリーを選択、メニューに追加します。
これまでと同様、メニュー構造内にカテゴリーが追加されていることを確認してください。
以上でグローバルメニューの作成は完了です。
続いて、グローバルメニューを実際に表示させてみましょう！
グローバルメニューの表示方法
メニュー項目を追加したら、下にスクロールし、メニュー設定の項目を選択します。
※今回は、ヘッダー(サイト上部)に表示するため、ヘッダーメニューを選択しています。
ここまで設定し終わったら、メニューを保存をクリックします。
メニューを保存したら、サイトのトップページへ行き、プレビューしてみましょう。
以下のようにグローバルメニューが表示されていたら完成です。
例えば、カテゴリーをクリックすると、下にカテゴライズした記事が出てくるようになります。
表示順の変更もできる
メニュー構造内の順番をドラッグして入れ替えると、表示される順番を変更できます。
例では、HOMEとライフスタイルを上に持ってきたので、右端から左端に変わっています。
グローバルメニューの表示方法の解説は以上となります。
サイトに応じて表示位置や順番も適宜変更してみてください。
グローバルメニューのカスタマイズ
ここまで、Cocoonでグローバルメニューを設定する基本的な手順を解説してきました。
続いて、簡単なグローバルメニューのカスタマイズ方法をご紹介します。
どれもCocoon設定から行うことができます。
背景色を変える
背景色を変えるには、まず左側のメニューからCocoon 設定をクリックし、ヘッダーを選択します。
下にスクロールしていくと、色を設定する項目があります。
試しに、ヘッダー全体色を変更してみます。
変更をまとめて保存をクリックすると、以下のようにプレビューされます。
また、ヘッダー色(ロゴ部)とグローバルナビメニュー色を変更するとこのようになります。
幅を変える
グローバルメニューのメニュー幅を変更するには、Cocoon設定⇨ヘッダーから設定できます。
Cocoon設定⇨ヘッダーの一番下までスクロールし、グローバルナビメニュー幅のトップメニュー幅を変更してください。
デフォルトの176から120に変更すると以下のようになります。
【幅176】
【幅120】
幅を狭くすると、ひとつが取るスペースが狭くなるので、多くのメニューを1列に追加することができます。
一方で、幅が狭すぎると、プライバシーポリシーのように長い名前のメニューは見切れてしまうので注意してください。
グローバルメニューの外側の幅を記事の幅に揃えるには、Cocoon設定⇨全体を使います。
下にスクロールしていくと、サイト幅の均一化という項目があるのでチェックをつけます。
変更内容を保存をクリックしてから、トップ画面でプレビューしてみてください。
以下の画像のように、グローバルメニューの幅が変更され、黄色い矢印部分の余白が均一になります。
位置を変える
グローバルメニューの配置を変えるには、ヘッダーレイアウトの設定を変更する必要があります。
ヘッダーレイアウトの設定は、先ほどと同じようにCocoon 設定⇨ヘッダーから変更できます。
赤マルの部分の項目を変更することで、黄色の枠の中のレイアウトを変えることができます。
例えば、上から2つ目のセンターロゴ(トップメニュー)を選択すると、以下の画像のように、グローバルメニューがサイト名の上に来ます。
色や表示を変えるだけでもグッとサイトをおしゃれにすることができるので、ぜひ設定してみてください。
アイコンフォントを表示する
アイコンフォントは、FontAwesomeというサイトからコードをコピーして表示します。
まず、ウェブ上でFontAwesomeを開いたら、検索欄で欲しいアイコンを検索します。
※今回はhomeで検索してみました。
出てきたアイコンのうち、一つ目のアイコンをクリックしてみます。
すると、アイコンが大きく表示されるので、そのアイコンで良いか確認してください。
Start Using This Iconをクリックすると、以下の画面が出てきます。
黄色い枠で囲んであるコードを使って設定します。
コードをコピーするには、右側の青い印をクリックしてください。
コードをコピーしたら、WordPressの「外観⇨メニュー」のページに行きます。
そして、コードをカスタムリンクのリンク文字列にペーストし、メニューに追加をクリックしてください。
メニュー作成の時と同様に、メニュー構造の中に追加されていることを確認したら、メニューを保存をクリックします。
保存したら、トップページで表示されているか確認しましょう！
下の画像のように家のアイコンがついたメニューが追加されていれば完了です。
同様の方法でホーム以外にもアイコンフォントを追加することができるので、色々探してみてください！
グローバルメニューに区切り線を入れる
まず、以下のコードをコピーしてください。
#navi .navi-in > ul > li{
border-right: 1px solid #eee;
}
#navi .navi-in > ul > li:last-child{
border-right-width: 0;
}
.navi-in > ul > .menu-item-has-children > a::after{
right: 10px;
}
*コードはこちらから引用しました。(サンプル画像では、区切り線を見やすくするために、#eeeを#000に変更しています)
コードをコピーしたら、外観⇨カスタマイズをクリックします。
以下の画面のようになるので、追加CSSをクリックしてコードをペーストしてください。
ペーストすると右側にプレビュー画面に区切り線が表示されると思います。
画像のように表示されたら、「公開」をクリックして完了となります。
また、区切りの線を、外側にも追加したい場合は以下のコードを使用してください。
#navi .navi-in > ul > li{
border-left: 1px solid #eee;
}
#navi .navi-in > ul > li:last-child{
border-right: 1px solid #eee;
}
.navi-in > ul > .menu-item-has-children > a::after{
right: 10px;
}
区切り線をつけることで、グローバルメニューの見た目にメリハリがつくので、サイトの雰囲気に合わせてカスタマイズしてみてください。
まとめ
今回は、グローバルメニューの設定方法と基本的なカスタマイズ、応用編としてアイコンフォント、区切り線を入れる方法を紹介しました。
Cocoonでは簡単なカスタマイズであれば、Cocoon設定からすることができますが、アイコンや区切り線は少し複雑な設定が必要です。
ただ、慣れてくればそこまで難しくないと思いますので、自分好みにカスタマイズしてみてください！
ここまでご覧いただきありがとうございました。