【はてなブログ】メニューバー設置方法・人気カスタマイズ(背景色や文字色変更)

はてなブログのカスタマイズに夢中になってしまいブログランキングが1位→14位とだらけている日々を送っています。今回はグローバルナビゲーション(メニュー)の設置とメニューバーのカスタマイズ方法のまとめです。

メニューバーをレスポンシブ対応で設置

LUM3N / Pixabay

この記事内ではテーマ「innocent」のカスタマイズ例を紹介しています。→現在はwordpressに引越し。ただ、はてなブログは好きなのではてなブログ向けのカスタム紹介は今後も展開していきます。サブブログではてなブログをしようしてますので、そのカスタムをこちらで紹介するようにしました。ご了承ください

僕のはてなブログの最初のテーマが「innocent」。現在はシンプルを求めて「minimalism」と非常にシンプルなデザインを選んでいます。カスタマイズメインで考えるならinnocentがおすすめかと個人的には思っております。

メニューバーもシンプルで2階層まで表示可能です。レスポンシブ対応でスマホでもメニューバーを2階層まで表示が簡単にできるのでおすすめです。

基本的な設定手順は2つのstepで簡単に設置可能です。上のリンク先で ①フッターにコピペする。②ヘッダータイトル下にコピペしてタイトルとリンクして飛ばしたいURLを入力するだけです。

この2つの手順でレスポンシブ対応でメニューが簡単に設置できました。これにもう少し自分のサイトの個性を見せたいと思うなら文字の色や背景色のカスタマイズをしてくだい。

メニューの個性カスタマイズ

「innocent」のメニューはモノトーンでかっこいいと思います。しかし、サイトのイメージに全く合わない場合は色を変更する必要があります。

そのためにカスタマイズ方法をまとめておきます。(フォントの色、背景の色、文字の大きさ、カーソルを合わせたときの色の変更方法、上下に線が有無など

カスタマイズ設定手順

はてなブログ→デザイン→カスタマイズ→デザインCSSに以下のコードを貼付けてください。

背景色、文字の色、文字の大きさ、ホバーの色をあなたのサイトに合わせて自由に変えてください。

変更方法は

「#00336D;/* 背景色 */」の#00336Dの値を変えると色が変更します。

文字の大きさの変更方法は

「font-size: 16px ;/* 文字の大きさ */」の数字の値を変更すると大きさが変更できます。

また、上下の線に関してはあなたの好みです。僕のサイトでは採用していますが、いらない場合はその部分を削除すると消えます。

色の参考はこちら

www.colordic.org

最近人気のメニューバーのカスタマイズ

最近シンプルなメニューバーとして人気のカスタマイズを紹介します。僕もwordpressのサイトで使用しています。

背景色が白で上下の線が黒のシンプルなメニューバーです。オシャレでかっこいいです。上記のような感じのグローバルメニューになります。

そのコードはこちらです。

よかったら利用してください。今回は以上です。

またこんなカスタマイズも書いています。最後まで読んでいただきありがとうございました。

企業向けHP/個人向けブログ|無料制作サービス3月31日まで

ホームページ・ブログ制作依頼に高額料金を払っていませんか?

フリーランス・個人事業主だからこそ無料でできるサービス。もちろん、無料だからといって質の心配無用。多数の企業様とのご依頼経験を積んだプロによるサービス。

今回は指定のサーバーに契約していただ人のみ限定のサービスとなります。たったこれだけの条件でHPやブログを運営可能。

・おしゃれなHPで集客したい・お店の商品をネットで販売したいなど

・学生・主婦が隙間時間にブログで稼ぐのは当たり前の時代!コソッとバレずに副収入を稼ぐノウハウもご一緒にプレゼント!

今回の企画は3月31日までの期間限定となりますので、お早めのご依頼お待ちしております

※現在、多数のご依頼をいただいております。

依頼をご希望の方に関してはお問い合わせよりご連絡ください。基本即日対応させていただきますが、納期につきましては多少前後することがありますのでご了承ください。

※初めてホームページを依頼するという方も安心してご相談くださいませ。

初めてで分からないのはお客様皆様ご一緒です。まずはお気軽にお問い合わせくださいませ。

おすすめの記事