はてなブログのデザイン「Minimalism」で、ナビゲーションメニューの背景色を変える方法

はてなブログのデザイン「Minimalism」を使用しているこのブログ。

今回は、ブログタイトルのすぐ下に表示されているナビゲーションメニューの色を変えてみようと思い、ググって実践してみました。

f:id:kayoko_cafe:20200427163921j:plain

ナビゲーションメニューは、ブログのタイトル部分のすぐ下に表示されているメニューのこと。

グローバルメニューとも言われているみたい。

はてなブログを「Minimalism」というデザインテーマに変えた直後は、「白い背景色に黒い字」という状態だったんですけど。

ブログ全体が白い背景一色なので、メリハリを付けるためにメニューバーの背景色をこのブログのテーマカラーのベージュにしようと思いまして。

では、具体的な実践方法です！

まず、背景色として使いたい色のカラーコード（＃から始まる6桁の英数字）を調べておきます。

カラーコードはこちらから調べられます。↓

使いたい色のカラーコードをメモ帳にコピペしておきます。

次に、背景色を変えるためのCSSコードが必要です。

それが、これ。↓

#gnav{

background: #カラーコード;

}

これだけ！

ちなみに、このコードはこちらの記事を参考にさせて頂きました。↓

このCSSコードの中にある「カラーコード」のところを、先に調べたカラーコード6桁に書き換えます。

そして、このコードをコピーして、はてなブログの編集画面にある、

デザイン→工具マーク→｛｝デザインCSS　まで進み、コードを1番下に貼り付けます。

最後に、上部にある「変更を保存する」をクリックして完了です！

これを忘れると変更されませんので、ご注意を。(^^;)

コピペのおかげでとっても簡単に変更できました。(´ｰ｀)

kayoko＠おうちcafe

はてなブログのデザインテーマ「Minimalism」のインストールからカスタマイズまでの実践集　↓

いちcafe日記