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

スポンサーリンク

グローバルナビの基本的な設定とカスタマイズ用のサンプルコードです。設定はそれほど難しくありませんが、カスタマイズに凝ってしまうと結構な時間が掛かると思います。

今回の目標
  • スマホでもメニューを横並びにしたい
  • スマホでメニューを横にスライドしたい

グローバルナビとは

当サイトの場合はタイトルの下にある横長のメニューバーがグローバルナビです。表示する位置やデザインは多種多様ですので、まずは基本的な設定をしてからカスタマイズしていきましょう。

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

グローバルナビ

その後さらにカスタマイズしてシンプルに

シンプルなグローバルナビ

WordPressの設定

wordpress
  1. 外観 → カスタマイズ → メニュー
  2. 外観 → メニュー

①②どちらでもグローバルナビの設定が出来ますが、今回はで進めます。

メニューを開く

メニュー

メニューを新規作成

メニューを新規作成

メニュー名と位置

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

項目を追加

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

カテゴリやタグから選んで追加

並び替えと階層化

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

主項目と副項目

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

項目の関係性
  • 主項目:カテゴリーページ
  • 副項目:タグページ
メインと副項目

副項目 in 副項目

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

深い階層

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

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

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

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

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

表示オプション

CSSコード

コピペする場合は念の為バックアップを取ってください。各種サイズはサイトに合わせて調整をお願いします。

メインのCSSコード

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

/*グローバルナビ*/
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;	
}

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

スマホ用コード

ハンバーガーメニューが人気ですが、あえてスマホでも横並びにしています。画面内にメニューが収まらないので、横にスライドできる様になっています。

@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;
}
}

Comment

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