グローバルナビの設定とカスタマイズ方法【Cocoon】

グローバルナビの基本的な設定とカスタマイズ用のサンプルコードです。

基本的な設定はそれほど難しくありませんが、カスタマイズに凝ってしまうと結構な時間が掛かります。

グローバルナビとは

当サイトの場合はタイトルの下にある横長のメニューバーがグローバルナビです。

サイトにどの様なコンテンツがあるのかをユーザーに知らせると共に、各コンテンツへのリンクにもなっています。

①最初に頑張って作ったグローバルナビ

②その後シンプルに

WordPressの設定

①②どちらでも設定する事が出来ますが、今回は①で進めます。

メニューを開く

メニューを新規作成

メニュー名と位置

• メニュー名：任意の名前を入力
• ヘッダーナビにチェックを入れる

表示させる項目を追加

グローバルナビに表示させたいページを追加します。カテゴリーページやタグページが一般的でもありオススメです。「カスタムリンク」で特定記事のURLを指定する事もできます。

並び替えと階層化について

グローバルナビには主項目と副項目という階層があり、主項目にカーソルを合わせると、その下に副項目のメニューが現れるという仕組みになっています。※スマホの場合は主項目のみ

主項目・副項目とは

サイトの作り方によりますが、以下の様な構成が分かりやすいと思います。

階層の目安は2〜3程度

さらに階層を深くする事も出来ます。あまり深すぎると訳が分からなくなるので、多くても2〜3階層くらい迄が良いと思います。

ナビゲーションラベルと説明

実際のページタイトル・カテゴリ名・タグ名称ではなく、ナビゲーションラベルには任意の名前を表示させる事ができます。また、その名称の下に説明を加える事も可能です。

「説明」が表示されない場合

設定(歯車マーク)をクリックすると表示オプションが表れますので、表示させたい項目にチェックを入れてください。

カスタマイズコード

コピペする場合は念の為バックアップを取ってください。各種サイズはサイトに合わせて調整が必要になるかと思います。

メインとなるコード

グローバルナビを際立たせる為に少し影がついています。他にはカーソルを合わせた時の効果やフォントサイズなど。

/*グローバルナビ*/
nav#navi, .menu-header .sub-menu{
 box-shadow:0 2px 5px -6px rgba(0,0,0,.8);
}
.menu-header .sub-menu .item-label{
  font-size: 70%;
  color: #696969;
}
.menu-header .menu-item:hover {
  border-bottom: 1px solid #ffc1e0;
  transition: all .1s ease;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .item-label:hover{
  color: #5ebaba !important;
  transition: all .2s ease;
  border-bottom: none;	
}

※偉そうに説明してますが、コードはリスブロさん等の記事を参考にして勉強させていただきました

スマホ向けカスタマイズ

私はほぼスマホでの見え方しか考えてないので、ここに全力を注ぎました。メニューを2段3段にせず横並にして、更に画面外に追いやられたメニューをスライドして表示させるカスタマイズです。

@media screen and (max-width: 768px){
/*モバイル用*/
ul.menu-mobile{
  overflow-x: auto;
  overflow-y: hidden;
  display: flex !important;
  font-size: 9pt;
  flex-wrap: nowrap;
  justify-content: flex-start;
-webkit-overflow-scrolling: touch;
  padding: 0 1em;
  position: relative;
}
ul.menu-mobile > li{
  padding-right: 1em;
  white-space: nowrap;
}
ul.menu-mobile　.item-label{
  white-space: nowrap;
  font-size: 1px;
}
}

フワッと表示するアニメーション

ページが表示された際に上からフワッと現れるアニメーションです。

#header-container {
animation: Down 1.5s ease-out 0s 1 normal;
}

@keyframes Down {
from {transform: translateY(-10%); opacity: 0;}
100% {transform: translateY(0%); opacity: 1;}
}

調整する部分は{Down 1.5s}と{translateY(-10%)}の数値です。「-10%の位置から本来あるべき位置までを、1.5秒かけて動きます！」という感じです。

グローバルナビの「∨」マークを非表示にする方法【Cocoon】

グローバルナビの∨マーク(アングルダウン)・記号・矢印を非表示にするカスタマイズコード。∨の正式名称はangle down。スマホの場合は副項目の名前に記号が重なってしまったのでスマホのみ非表示にする設定です。

unity-right.com

ヘッダーをスクロールに追従させる設定と重複した時のカスタマイズ【Cocoon】

Cocoonでヘッダーを画面スクロールに追従させて隠したり再表示させる設定方法と重複して2つヘッダーが重なってしまう場合のカスタマイズコード。

unity-right.com