Ayataの

社会人カジュアルゲーマーのゲームブログです

はてなブログでのグローバルメニュー設定方法を紹介！かんたん2ステップのコピペで完了

ブログ運営

「はてなブログをカスタマイズしたい！」って思ったときに真っ先に思いつくのがブログタイトル下にあるメニューだと思います（グローバルメニューと呼ばれています）。

これがあるだけでちゃんとしたブログに見える不思議。そこで今回はグローバルメニューをはてなブログに設定する方法を紹介したいと思います。

設定するだけなら簡単2ステップのコピペでできるのでコードとかが苦手な方でもぜひチャレンジしてみてください。

今回実装するグローバルメニュー

今回は以下のようなグローバルメニューを実装していこうと思います！

特徴は、クリックすると設定されたリンクに飛ぶ、カーソルが乗ると色が変わる、スマホ版では横スクロールできるようになるという感じです。このメニューはPCで見ると横1列、スマホで見ると横にスクロールできるので気になる方は両方で見てみてください。

やること①：ヘッダに追加

まずはヘッダにコードを追加します。追加する場所は"記事の管理" > "デザイン" > "カスタマイズ"にある「ヘッダ」を選択すると現れます。

ヘッダを選択して出てきたメニューにブログタイトル下という場所があるので、そこにある枠にコードを追加します。 追加するのは以下のコード。「URLを入力」にクリックした時に飛んでほしいページのURL、「メニュー」に表示する文字を入れてから張り付けてください。

<ul id="g-nav">
    <li class="nav-item"><a href='URLを入力1'>メニュー1</a></li>
    <li class="nav-item"><a href='URLを入力2'>メニュー2</a></li>
    <li class="nav-item"><a href='URLを入力3'>メニュー3</a></li>
    <li class="nav-item"><a href='URLを入力4'>メニュー4</a></li>
    <li class="nav-item"><a href='URLを入力5'>メニュー5</a></li>
</ul>

上の例では5個のメニューの例を張っています。必要に応じて行を丸ごと増やしたり減らしたりして、項目数を調整してください。

やること②：デザインCSSに追加

次はデザインCSSにコードを追加していきます。追加する場所は"記事の管理" > "デザイン" > "カスタマイズ"の一番下にある「デザインCSS」を選択すると現れます。

デザインCSSを選択して出てきたメニューにCSSを記述できます。という場所があるので、そこにある枠にコードを追加します。

追加するのは以下のコードです。簡単にカスタマイズできるのはコメントが書いてある部分です。メニューの背景色、メニューの文字色などが変更できます。

#g-nav {
    display: table;
    width: 100%;
    font-weight: bold;
    background-color: #51B8A0;   /*メニュー背景色 */
    height: 40px;
    padding:  0px 0px;
}
.nav-item {
   display: table-cell;
   list-style-type: none;
   text-align: center;
   height: 40px;
}
.nav-item a {
    display: block;
    color: #fff;    /*文字色 */
    padding:  0px 0px;
    text-decoration: none;
    transition: 0.2s;   /*変化にかかる時間*/
    line-height: 40px;
}
.nav-item a:hover {
    background-color: #B7E1D7;   /*カーソルが乗った時の背景色 */
    color: #000000;   /* カーソルが乗った時の文字色 */
}

カラーコードはこんな感じのサイトで探せます。WEB色見本 原色大辞典 - HTMLカラーコード

このブログで使ってるアイコン達 の導入の仕方はこちらで紹介しています。グローバルメニューだけじゃなくてサイドメニューなど使いどころ多いです。

スマホ対応

スマホで横スクロールさせるには、デザインCSSに以下のコードを追加します。ディスプレイの横幅からあふれたメニューがある場合に、無理やり表示せずに横スクロールメニューになります。

/*スマホ対応*/
@media(max-width: 768px) {
    #g-nav {
        display: block;
        overflow-x: auto;
        overflow-y: hidden;
        height: 40px;
    }
    .nav-item a {
        display: inline-block;
        white-space: nowrap;
        padding: 10px 20px;
        line-height: 30px;
    }
}

まとめ

最後までお読みいただきありがとうございました。 今回はグローバルメニューをはてなブログに導入する方法を紹介しました。

かんたん2ステップのコピペで実装できるので、はてなブログを改造したい方はぜひ導入してみてください！