グローバルナビを追加する

改造

そもそもグローバルナビって何よ?

グローバルナビ(グローバル・ナビゲーション)とは、Webサイトの原則すべてのページに共通で表示された当該サイトの主要ページへのリンクのこと。

一般的にはサイトのページ上部、サイドバー、ページ下端に、メニューボタンやタブ、テキストで表示される。また、スマホ画面では「ハンバーガーメニュー」と呼ばれる3本線アイコンからのプルダウンメニューで表示されるサイトが多いそうな。

Simplicity2には、最初に設定されていないので、作ってあげないとダメなのだ。

スポンサーリンク

グローバルナビの設定

WordPress 5.0、Simplicity 2では、「グローバルナビ」は「メニュー」という風に呼ばれて設定ができる。

「外観」>「メニュー」と進んで、設定していけば良い。

だけどこれ、なかなか分かりにくいので、一つ一つ解説していこう。

ちなみに、最初の設定は「プライバシーポリシー」というのが出ているのだと思う。

デザイン性のかけらもないね(涙)

グローバルナビの設計

設計などと大きな事を書いたけれど、「どうしたいのか」という話だ。

僕は、単純にクリックするとカテゴリー別に記事が分けられるような仕組みにしておきたいのだけれど、メニューが増えてくると、そういう構造では使いにくくなってしまうので、その辺りはなかなか悩ましい。

メニューをダウンリストタイプで設計されているサイトもある。若干使いにくい部分はあるが、言ってみればツリー構造に出来るので情報量を増やすことが出来る。

ただ、最初からある程度決めておかないと、おかしなことになりかねないので、方針を決めるという意味で「設計」をしておくべきだというわけ。

さて、僕のサイトだが、以前のサイトはグローバルナビのメニューをクリックすると、固定ページに飛ぶ構造にしてあった。ある意味、ダウンリストタイプと似た構造になっていると言えよう。この構造の欠点は、記事を追加するとダウンリストをいちいちメンテナンスする必要があるという点である。

しかし……、この階層構造は個人的にはクリックしにくいと感じている。だって、マウスがメニューを選んでいないとダウンリストが開示されない構造なので、マウスのポインタが外れてしまうと、ダウンリストがたたまれてしまう。下位のメニューを選びたいのにもどかしい思いをすることはそれなりにあるのだ。

それと、この階層構造というのは、「パンくずリスト」という考え方で補完できる話でもある。

このブログだと、こんな感じだ。

ちなみに「ホーム」>「キッチン小物」>「アイテム」という構造になっているのがパンくずリストと呼ばれるもので、階層構造にすることができる。

グローバルナビを表示させる

表示のさせ方は比較的簡単だ。

「外観」>「メニュー」と進んで、「メニューの項目を追加」という所で、メニューに項目を追加することが出来る。

このブログでは、上に示したようにカテゴリー別に分ける構造にするので、「カテゴリー」を選択し、そこから表示されているカテゴリーの中から項目に追加したいと考えるものにチェックを入れる。

そうすると、「メニュー構造」の所に「項目」が表示される。

あとは、「メニュー設定」のところの「ヘッダーナビ」の所をチェック。3つ選択肢があるが、好きなものを選べば良い。

ここでは「ブログ」と「キッチン小物」の2つを選択したので、どうなったかというと……。

こんな風に入る。

……デザイン的に寂しいね。

グローバルナビの装飾をする

取りあえずは、設定を変更することである程度の装飾が可能だ。

まずは、グローバルナビの背景色だが、「外観」>「カスタマイズ」で「色」に行くと、変更できる部分がある。

「グローバルナビ色」が背景色で、「グローバルナビリンク色」が文字色だ。

「グローバルナビリンクホバー色」は、マウスカーソルが乗ったときに、部分的に背景色を変える設定である。

さて、グローバルナビの調整だが、これ以上やっていこうと思うとCSSを色々と触らなければならない模様。

それは別の機会にしておきたい。

カテゴリーを装飾する

ところで、カテゴリーを示す文字も色がついていないと寂しいかな?とおもって、ちょっと触ってみた。

/* カテゴリ文字設定 */ #list .post-meta .category a { color:#00AA00; font-size:12px; font-weight:bold; text-decoration:none; padding:0 4px; }

こんな感じのを、「外観」>「メニュー」>「テーマエディタ」と進んでいただいて、style.cssにぺたりと貼っていただければOK色が変わるよ。

自分なりのカラーを選んで、「color」の所で設定して欲しい。



ランキングへの応援クリックよろしく!
にほんブログ村 その他生活ブログへ

コメント

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