Simple Life Navi

日常のちょっとした気づき、体験などを掲載します

- トップもご覧ください - 検索画面では「シンプルライフナビ」と検索ください -

Blog

Mobile

Travel

Useful

☕ New Articles ☕️️

はてなブログ|グローバルメニュー(ナビゲーション)のCSS|スマホ対応、コピペOK

スマホ対応 グローバルメニュー(グローバルナビ)の設定

こんにちは。シンプルライフ ナビです。

久しぶりにブログのグローバルメニューのスマホ表示のカスタマイズをしました。

グローバルメニュー(グローバルナビゲーションとも言います)をスライド式に変更しました。*1

 

今回は、グローバルメニュー(グローバルナビ)の設置方法と、コピペもできるCSSコードやカスタマイズ方法をご紹介します。

使ってみたいと思った人はご自身のブログに設定してみてください!*2

グローバルメニュー(グローバルナビゲーション)の表示とその傾向

グローバルメニュー(グローバルナビ)とは、WEBサイトの目次やメニュー、カテゴリを表示し、読者がメニュー等の項目を選択しやすくする表示のことです。

Googleアドセンスの審査申請 の際には設置しておいた方が良い、と言われることもあるので、未設定の方は設定してみましょう。簡単に設置できますよ。

 

このブログでは「はてなブログPro」を利用しており、画面デザインをカスタマイズしています。スマホでの表示は次の画像のイメージになっています。

グローバルナビゲーション

 

スマホの画面表示では、次の理由から多くのメニューの表示をすることはできません。

 スマホ画面の制約
  • 画面の表示面積が狭い
  • 画面の横幅が限定される

そのため、メニューの表示数を少なくするか、画面の端に「メニュー」表示を設けて、「メニュー」表示*3をクリック(タッチ)した場合に、メニュー内容が表示されるようにしているサイトがあります。

 

このブログでもスマホ表示の場合、右上にメニューボタンを表示していますが、あまり押されていないようです。

ハンバーガーメニュー(≡)の場合、どのようなメニューがあるのか直感的にわからないのが理由かもしれません。

そういったことから、最近はスライド式(左右にスライドする方式)のメニューバーを採用するWEBサイトが増えてきているように感じます。

スライド式のナビゲーション・メニューバーを設置する

はてなブログで、スライド式のメニューバーのグローバルナビゲーションを設置する方法は、次の通りです。

HTMLとデザインCSSに次のコードを記述してください。

HTMLコードの記述

HTMLコードを記述する場所は次の通りです。

 ダッシュボード画面 →  デザイン →  カスタマイズ → ヘッダ → ブログタイトル下 にすすみ、既存のコードを消さないように注意して、一番上にHTMLコードを追記してください。
ブログタイトル下

 

記述するHTMLコードは次の通りです。

<ul id="global-nav">
<li class="global-nav-text"><a href="アドレス1"><span class="blogicon-home"></span>&nbsp;メニュー1</a></li>
<li class="global-nav-text"><a href="アドレス2"><span class="blogicon-heart-alt"></span>&nbsp;メニュー2</a></li>
<li class="global-nav-text"><a href="アドレス3"><span class="blogicon-heart-alt"></span>&nbsp;メニュー3</a></li>
<li class="global-nav-text"><a href="アドレス4"><span class="blogicon-heart-alt"></span>&nbsp;メニュー4</a></li>
<li class="global-nav-text"><a href="アドレス5"><span class="blogicon-heart-alt"></span>&nbsp;メニュー5</a></li>
</ul>

 

上のコードは、自分のブログに合わせてカスタマイズしてください。

アドレス1〜5は表示させるサイト(ページ)のアドレスを記載してください。

メニュー1〜5は表示させるメニューの名称や略称を入れてください。

ブログアイコンは、はてなブログ|無料で使える100種類超のアイコンフォント素材  を参考にして、好きなアイコンを設定してください。(アイコンが不要の場合は、「<span class="blogicon-XXXX"></span>&nbsp;」部分を全て削除してください。)

表示メニューの数を増やしたいときは、「<li class~</li>」で囲われている部分をコピーして<ul>~</ul>の間に追加、減らしたいときは削除してください。

 

私の場合の設定例は次の通りです。

項目 内容
アドレス1 https://simplelifenavigation.com
メニュー1 トップ
アイコン blogicon-home

CSSコードの記述

CSSコードを記述する場所は、次の通りです。

 ダッシュボード画面 →  デザイン →  カスタマイズ → デザインCSS にすすみ、既存のコードを消さないように注意して、既存のコードの後ろにCSSコードを追記してください。
デザインCSS

Warning!
CSSコードの記述を改変する場合は、はてなブログ|デザインCSSのバックアップ!トラブルへの備え を参考にして必ずバックアップを取っておきましょう。

 

デザインCSSに記述するCSSコードは次の通りです。

/*グローバルナビ メニュー*/
#global-nav {
    margin: 0 auto 1px;
    padding: 0;
    width: 100%;
    display: block;
    overflow-x: auto;
    font-weight: bold;
    background-color: black ;/* 背景色を指定 */
}
.global-nav-text {
    display: table-cell;
    list-style-type: none;
    text-align: center;
}
.global-nav-text a {
    display: inline-block;
    white-space: nowrap;
    padding: 8px 15px;
    color: white ;/* 文字色 */
    text-decoration: none;
    font-size: 13px;
}
.global-nav-text a:hover {
    background-color: dimgray ;/* マウスがホバーした時の背景色 */
    color: white ;/* マウスがホバーした時の文字色 */
}

@media(min-width: 768px) {
#global-nav {
    display: table; /*PC表示時均等配置*/
}
.global-nav-text a {
    display: block;
    padding: 5px 0;
}
}

 

CSSコードの緑色の部分の色コードを、好きな色に変えてご利用ください。

色コードや色の名称は、WEB色見本 原色大辞典 - HTMLカラーコード を参考にしてください。

文字の大きさを変更する場合は、紫色部分の「フォントの大きさ指定の数値」を変更してください。

メニュー数が少なく、メニューが左寄りになってバランスが悪い場合は、オレンジ色の数値を小さい数値に変更してください。上記コードでは一般的なタブレットの画面サイズ(768px)以上の場合、メニューを均等表示する設定にしています。メニュー数が多い場合は、@media以降は削除してOKです。

完成!スライド式のグローバルメニュー(グローバルナビゲーション)

グローバルメニューの設定はできましたか?

スマホの小さい画面でも、少しスライドすればメニューやカテゴリーをたくさん見てもらえるようになりましたよね!

スライド式メニューバー

スライド式グローバルメニューバーの完成です!

画面スクロールした時、画面の上部にメニューバーを固定したい人は、次の記事の設定もお試しください。

 

たくさんの人にブログを訪れてもらえるよう、また訪れてもらった際に他の記事も見てもらえるよう、あなたもグローバルメニュー(ナビゲーション)のカスタマイズをしてみてください

この記事は参考になりましたか?ではまた!

 

 関連記事

ブログなど カテゴリーの記事一覧 - Simple Life Navi

*1:このブログの2022年6月現在のスマホ画面の表示

*2:事前にバックアップを取るなど、コードの利用は自己責任でお願いします。ご利用のデザインテーマによってはうまく動かない場合があります

*3:3つの横棒で表示されることが多い(≡)ので、その形状から通称ハンバーガーメニューと言われています