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

※このページにはプロモーションが含まれています

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

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

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

スポンサーリンク

グローバルナビとは

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

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

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

グローバルナビ

②その後シンプルに

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

WordPressの設定

wordpress
ダッシュボードより
  1. 外観 → カスタマイズ → メニュー
  2. 外観 → メニュー

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

メニューを開く

メニュー

メニューを新規作成

メニューを新規作成

メニュー名と位置

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

表示させる項目を追加

グローバルナビに表示させたいページを追加します。カテゴリーページタグページが一般的でもありオススメです。「カスタムリンク」で特定記事の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段にせず横並にして、更に画面外に追いやられたメニューをスライドして表示させるカスタマイズです。

スマホ向けカスタマイズ
  • メニューを横1列に並べる
  • メニューを横にスライド表示したい
@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秒かけて動きます!」という感じです。

スマホで文字とVマークが被ってしまったら
\ 作成したグローバルナビをスクロールに追従させる /

Comment

  1. メイ より:

    ご返信ありがとうございます!
    そして迅速な対応とお気遣いをありがとうございます。

    こちらは本当に役に立つ&参考になるサイトで、「神」という名のもとでブクマさせていただいております。

    それと、文章をお褒めいただきありがとうございます。
    自分のものは全然キレイなんかじゃなく、むしろさーてんさんの文章がキレイだと思います。
    いろいろと記事を読んでフフフっと気持ち悪く微笑んでしまうような箇所が多々あり、
    この人はセンスがいいだけじゃなく面白い人だ!って勝手に思っちゃったりなんかしています。

    もはやただのファンですね(笑

    さて、ふわっとコードをそのままコピペしたところ、一切の反応がありませんでした。

    アニメーション付与にあたって事前に調べた情報では、jQueryの編集が必要だ、とあって
    それを見て諦めた経緯があったのですが、javascript等にコードを書く必要はないのでしょうか?

    どう森で「土地を埋め立ててから街づくりをしよう」と壮大な計画を立てたはいいものの、
    家の移動やら崖の埋め立てやらが面倒で放置気味になっているガサツな自分には難しい作業となっています。

    いま一度、ご確認していただけたらと思います。
    よろしくお願いします。

    • sarten より:

      メイさん

      申し訳ありません・・

      たぶんグローバルナビについてはJavascriptを使ってないと思って再度コードを見直したところ、先ほど追加したコード「header-container」の先頭に付けるべき「#」が抜けておりました・・

      「#header-container」で試してみてください!

      最初は「島クリエーターとは私の事だ」と意気込んで計画的に開発しようと思いましたが、気付いたら無作為に道や河川を作っています。

      でもそれが自分に合っていて楽しいですね。

    • メイ より:

      返信ありがとうございます!

      稼働を確認しました。

      今後もこちらのサイトを参考にさせていただこうと思います。
      また何かありましたらご質問させてください。

      この度はこんな若輩者に丁寧にご教授してくださりありがとうございました。

    • sarten より:

      メイさん

      貴重なご意見有難う御座いました!無事に動作した様で何よりです。

      今後もどうぶつの森頑張りましょう!

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