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

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

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

LUM3N / Pixabay

この記事内ではテーマ「innocent」のカスタマイズ例を紹介しています。

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

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

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

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

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

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

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

カスタマイズ設定手順

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

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

変更方法は

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

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

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

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

色の参考はこちら

www.colordic.org

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

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

背景色が白で上下の線が黒のシンプルなメニューバーです。オシャレでかっこいいです。

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

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

[st-mybox title=”ポイント” fontawesome=”fa-check-circle” color=”#FFD54F” bordercolor=”#FFD54F” bgcolor=”#FFFDE7″ borderwidth=”2″ borderradius=”5″ titleweight=”bold”]

【はてなブログ】メニューに簡単な工夫してアクセス伸びたカスタマイズ

[/st-mybox]

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

 

当サービスお得情報紹介・5名限定モニター生募集

当サイトのサービスはサイト作成だけでなく修正・カスタム・アクセスアップだけに留まらず、初心者向けに副業・アフィリエイトのノウハウも紹介しております。少しでも購入者が満足できるようなサービス提供を心がけております。

特に購入して終了ではなく。サービス終了後も定期的なやりとりを通じてお客様の相談・依頼をいただくことが一番重要だと思っております。長い付き合いになると思いますが、当サービスを利用して会社の利益アップ・脱ノウハウコレクターとなりませんか?

サービス概要に関してはこちらです。

 

学生・主婦の方から社会人の方まで幅広くご依頼をいただいております。

上記のサービスはいずれも好評です。特にアフィエイトをしている人でなかなか成果の出ない人や初心者で何からすれば良いのかわからない人にはおすすめのサービスとなっております。

サービスご依頼ご希望の方はサイト内に設置「お問い合わせ」フォームより依頼・または下記よりご連絡ください。当サービスはプロフィールにもありますよう「ココナラ」にて500件以上の販売実績と評価4.8以上であるプラチナ会員認定

ココナラ経由ではなく当サービスの「お問い合わせ」よりご依頼いただいた方には貴重な特典・割引価格で提供しております。このチャンスにぜひご検討ください。

ご依頼お待ちしております。

また、2020年にはあるモニター生が私のコンサルサポートを実施してココナラ での販売を開始しました。2020年7月末から8月末までの1ヶ月間での成果ですが。売り上げではなく、実際の収入見込みが22万達成できました。新規アカウントです。この調子で頑張って欲しいです。

上記のモニター生同様、ココナラ を使って副業サポートコンサル希望のモニター生を5名募集しております。

モニター価格は2種類あります。私が徹底的にサポートまたは定期的なアドバイスの2パターンあります。興味のある方は、こちらも合わせてお問い合わせよりご連絡ください。5名限定なので迷ったらとりあえずご連絡ください。

ご依頼・ご質問等はコチラから。内容を確認次第、順次対応させて頂きます。

お名前
必須
メールアドレス
必須
サービス内容
メッセージ本文
 
最新情報をチェックしませんか?