初心者でも簡単！グローバルメニューカスタマイズ【はてなブログ】
スポンサードリンク
はてなブログにお越しの皆さん、こんにちは！
グローバルメニューって何なん？
グローバルナビゲーションと違うの？
ブログを始めたばかりの私には分からないことが多すぎて本当に困ります。
グローバルメニューと聞いてどこの部分か分かりますか？
私には分かりませんでした。
知識なさすぎて・・・（言葉に出来ない）
こんな私ですが、Twitterなどで沢山のブロガーさんのブログを徘徊して「いいな」と思ったのは真似していこうと日々勉強させてもらっています。
今回は、「グローバルメニュー」について。
グローバルメニューとは？どうやって設定するのかなど、初心者なりに初心者目線で解説してこうと思います！
グローバルメニューとは
グローバルメニュー＝グローバルナビゲーション
グローバルメニューは対象となるWebサイトの主要コンテンツへのリンクが収集されている目次であり、Webサイト内へのショートカット機能を持つのが特徴です。
因みに、Webサイトの中にはサイトマップが設けられている事が在りますが、これとグローバルメニューは異なる存在になります。
と言うのも、グローバルメニューと言うものは、Webサイト内の各ページに共通して設置してあるWebサイトの目次で在り、サイトマップは１つのWebページを設け、そこに各ページの情報を集約した形で記述が行われているからなのです。
尚、グローバルメニューはSEO対策において役立つものであると言われていますが、これは検索エンジンがWebサイトを巡回する際に、効率良くWebサイト内部を巡回する事が出来るからだと言われています。
ふむふむ。よく分からない。
グローバルメニューとはサイト内の案内メニューのこと
グローバルメニューは、サイト全体のコンテンツ構成を分かりやすくすることや、ユーザーがWebサイトの中のどのコンテンツページを閲覧中であるかを伝える役割もあります。
ユーザーは何かの目的があってサイトを訪問しています。
そのユーザーがWebサイト内を効率良く、迷うことなく目的のコンテンツページに辿り着くようにいわば「道しるべ」となってくれるのです。
サイトを訪れたユーザーに「ここにありますよ！」「今ここにいますよ！」と教えるてくれる存在＝グローバルメニューなのです。
グローバルメニューはここです
グローバルメニューはサイト上のどこに配置してあるの？
私のブログの中ではここになります。
画像を見て、「あぁ、ここか！」と分かったと思います。
ほとんどのサイトに設置してありますし、使ったことある人も多いのでは・・・？
ヘッダー下にある場合もありますが、サイドに配置してある場合もあります。
スマホならプルダウン（ドロップダウン）がグローバルメニューになります。
グローバルメニューのメリット・デメリット
メリット
- ユーザーにとってはサイトの内の情報を探す手間が省ける、便利
- 自分がどのコンテンツページにいるのか分かる
- サイトが何となく引き締まる
デメリット
- 設定の仕方が分からない
- どんな内容をメニューに入れていいのか分からない
私が感じたメリットとデメリットはこんな感じです。
デメリットに関しては、初心者ならではの感じ方だと思います。
ただ、使い方が分かればメリットしかないこと間違いなしなので、まだグローバルメニューを設置していないという方は設置しておくことをおすすめしておきます。
グローバルメニューの設定方法
まず、私は「はてなブログ」でブログを書かせてもらっているので、
やり方ははてなブログでのやり方となります。
そして、テーマは「innocent」を使わせてもらっています。
レスポンシブデザインについて
「innocent」はレスポンシブデザインに対応しているテーマです。
レスポンシブデザインとは、簡単に言うとスマホとPCの表示が統一されるデザインのことで、そちらに関しては過去の記事を参考にしていただけたらと思います。
以上の環境で私が行った手順を紹介していきます。
手順１ フッターにjQueryを記述する
ユーザーがスマホ・タブレットでサイトを訪れた時にメニューを展開させる為に必要なコードになります。
これはフッターのところにコピペして貼りつけるだけでOK。
※jQueryを既に読み込んでいる場合は不要です。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function($) {
$(".menu-toggle").on("click", function() {
$(".main-navigation").toggleClass("toggled");
});
})(jQuery);
</script>
手順２ ヘッダー下HTML
ここでは、グローバルメニューに何を入れるか考えていきます。
お問い合わせ、プライバシーポリシー、ホーム、カテゴリー、プロフィールなど自分が入れたいものを入れて下さい。
↓のコードをコピーしたら、ヘッダー下のカスタマイズに記述します。
<nav class="main-navigation">
<div class="menu-toggle">メニュー</div>
<div class="main-navigation-inner">
<ul>
<li><a href="ここはURL">ここを変更</a></li>
<li><a href="ここはURL">ここを変更</a></li>
<li><a href="ここはURL">ここを変更</a></li>
<li>
<a href="#" class="has-child">カテゴリー</a>
<ul>
<li><a href="カテゴリーURL">カテゴリー名</a></li>
<li><a href="カテゴリーURL">カテゴリー名</a></li>
</ul>
</li>
<li><a href="ここはURL">ここを変更</a></li>
<li><a href="ここはURL">ここを変更</a></li>
</ul>
</div>
</nav>
↑↑のコードでは５つのメニューが表示されます。
もっと増やしたい、項目を入れ替えたい場合には
<li><a href="ここはURL">ここを変更</a></li>を増やしたり、自身で入れ替えを行ってください。
一度メモなどにコピーして編集してから貼り付けると作業が簡単になりますよ！
参考記事↓↓
作業３ デザインCSS
次にデザインCSSにて色の変更や中央に寄せたりと見た目の部分を変えていきます。
デザインCSSは管理画面から「デザイン」→「スパナみたいなやつ」→「デザインCSS」のメモみたいなところです！
中央寄せのコード
@media screen and (min-width: 1024px) {
.main-navigation {
text-align: center;
}
}
手順２で追加したメニューが中央に寄せられます。
背景の色・線の色を変更する
.main-navigation,
.main-navigation ul ul {
background-color: 好きな色;/* 背景色 */
border-top: 3px solid 好きな色;/* 上の線 */
border-bottom: 3px solid 好きな色;/* 下の線*/
}
main-navigation,.main-navigation a {
color: 好きな色; /* 文字色 */
font-size: 13px ;/* 文字の大きさ */
}
好きな色のところは↓のカラーコード表から選びました。
カラーコードの後に「；」を忘れないで！
マウスオーバーした時の設定
マウスオーバーの設定とはマウスでその場所を触った時に色を変更するかどうかの設定になります。
.main-navigation a:hover {
color: 好きな色; /* マウスオーバー時の文字色 */
}
以上が私の行った手順になります。
作業は一度コードをコピーしてメモに貼り付け、変更部分を書き換えた後、設定へと進む方が編集しやすいと思います。
また、カスタマイズはバックアップを取って自己責任でお願い致します。
最後に
いかがでしたか？
まだまだカスタマイズの余地がありそうですが、グローバルメニューがないよりはマシということで設定してみました！
参考になればいいのですが・・・。
ちゃんとスマホの方でも設定が反映されているか確認をお願いします。
カスタマイズはあくまでも自己責任でお願い致します。
ありがとうございました！
