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

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

今回チャレンジしたこと
  • スマホでもメニューを横並びにしたい
  • メニューを横にスライドできる様にしたい
スポンサーリンク

グローバルナビとは

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

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

グローバルナビ

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

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

WordPressの設定

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

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

メニューを開く

メニュー

メニューを新規作成

メニューを新規作成

メニュー名と位置

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

項目を追加

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

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

並び替えと階層化

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

主項目と副項目

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

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

副項目 in 副項目

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

深い階層

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

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

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

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

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

表示オプション

カスタマイズコード

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

メインの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;	
}

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

スマホ向けカスタマイズ

私はほぼスマホでの見え方しか考えてないので、ここに全力を注ぎました。

スマホ向けカスタマイズ
  • メニューを横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等にコードを書く必要はないのでしょうか?

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

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

    • sartensarten より:

      メイさん

      申し訳ありません・・

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

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

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

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

      • メイ より:

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

        稼働を確認しました。

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

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

  2. メイ より:

    こんにちは。

    昨日、cocoonのカスタマイズをいろいろみていたところ、さーてんさんのサイトを見つけました。
    自分の知る限り、個人でやっている方で一番センスがよく、 cocoonでここまで出来るんだと感動しております。(無駄閲覧増やしてたらすみません)

    そして、だいぶカスタマイズの参考にさせていただきました。

    一つ質問をしてもよろしいでしょうか。

    こちらの記事を見て思ったのですが、さーてんさんのモバイルヘッダーメニューは「ふわっと」でるようにアニメーションが付与されていると思います。

    当方、cssやhtmlの初歩くらいしか分からないのですが、これやってみたいのです。
    このアニメーションの付与方法を記事にするなりなんなりできますでしょうか?

    さーてんさんの記事は迷える超初心者の救世主だと思います。
    どうかよろしくお願いします。

    • sartensarten より:

      メイさん

      おはようございます。
      コメントありがとうございます!

      PVもなかなか増えない中でモチベーションを維持するのは本当に大変なのですが、記事が役に立った事とコメントでお褒め頂いた事、もう嬉しい限りです。今ニヤニヤしながらどうぶつの森をやっています。

      しかしメイさん、文章がキレイで全体の構成がよくできてますね~
      なかなかの出来る人だなと感じました(笑) ※偉そうにすみません

      ご要望いただいた「ふわっとでてくるやつ」はこのページの最後にコードを追加いたしました。
      もし上手くいかない場合はご連絡いただければと思います。

      大変な時期ですが、感染対策などしながら共にWEBサイトを盛り上げていきましょう。

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