【Cocoonグローバルナビメニュー】カスタマイズ:幅を最小限にする

Cocoonグローバルナビメニューアイキャッチ ワードプレス

Cocoonのグローバルナビメニューの幅を最小限にして、サイト名とカテゴリ名を表示する方法をご紹介します。

当サイトは、グローバルナビメニューに、サイト名とカテゴリ名を表示し、
ヘッダー画像を非表示にしています。

ヘッダー画像を非表示にしている理由としては、
サイト上部をスッキリ見えるようにしたかったためです。

あとは、ヘッダー画像がないのでサイトに訪問いただいた際に、1画面内に表示される情報が多くなります。

個人的におすすめの設定です。

グローバルナビメニューってどこ?

グローバルナビメニューとは、画面上部にあるメニューやカテゴリ名を表示したりするメニューバーです。


 

Cocoonのヘッダー設定方法

「Cocoon設定」 → 「ヘッダー」

 

「ヘッダーレイアウト」 → 「トップメニュー小」を選択
「キャッチフレーズの配置」 → 「表示しない」を選択

「ヘッダー背景画像」を設定している場合は、「クリア」をクリックして空欄の状態にします。


 

「ヘッダー全体背景色」 → 「ブラック」を選択
「グローバルナビ色」 → 「ブラック」を選択

「グローバルナビメニュー幅」は数値が入っていますが、たぶんデフォルトの数字のまま変えてません。


 

「変更をまとめて保存」をクリック

 

最後に

私がグローバルナビメニューをこの設定にしたきっかけは、Appleのサイトのグローバルナビメニューを見たことです。
ムダがなくシンプルで見やすい!と思います。


 
 
 

【Cocoonエントリーカード】フォントをたった3行のCSSで変更する
...