はてなブログカスタマイズ！テーマの変更とグローバルメニューの設定

はてなブログのカスタマイズぺージです。
人気テーマ「Innocent」に変更して、ブログ画面の上にグローバルメニューを設定してみました。
作業はカンタンです。5分ほどで終わりました♪

カスタマイズの方法はいろいろあるけど・・

はてなブログをはじめて、メニューをつけて見栄えをカッコよくしたい！と思ったのでいくつか方法がないか調べてみました。

※ちなみに、「ハンバーガーメニュー」というのは、Webサイトなどの右上などにある、「 ≡」こういうマークです。トグル、トグルメニューともいいます。（そっちが正式？）

クリックするとメニューが開いたりするのですが、見た目がハンバーガーのようなので、この名前なんだろうな・・と思ってます。

わたしも、はじめてこの言葉を聞いたときは一瞬、「？」となったのですが、見たままじゃん！と。それからはとくに深くは追求しておりません、あしからず。

さて、「はてなブログ　メニュー」などと検索してみると、いろいろなタイトルが並びます。

どのページも非常に親切・ていねいに、ＨＴＭＬやＣＳＳをいじってカスタマイズする方法が述べられており、いくつか参考にさせていただきました。

おのおの試した結果、わたしのスキル不足と、選んだテーマとの相性などもあるのか、実装するのにひじょうに苦労しました・・。

ちょっとめんどくさい・・とも感じてしまいました。

できればカンタンにすませたい！

スキルや知識のあるかたはそれでもいいけど、このブログは初心者のかたのため（というか、自分(^▽^; ）に書こう！と決めたので、もっとカンタンな方法がないものか？！、と思い、そもそもテーマでそういうのがないか探したら、すぐにいいのがみつかってしまいましたｗ

blog.hatena.ne.jp

てか、めちゃ人気テーマじゃん！ってかたは多くいらっしゃると思うのですが、はてブ初心者のわたしと同じレベルのかたもいらっしゃるはず！ということにして続けます(^▽^;)

ここから先を読めば、たった５分でカッコいいレスポンシブなグローバルメニューが実装できるはず？！

※ちなみに「レスポンシブ」というのは、PC、スマートフォンなど、ちがう画面サイズでサイトを見てもデザインを損なわず、使いやすく調整して表示すること、です。

５分で実装完了！

なによりよかったのは、プレビューしてインストール、そのまま作者さんのページで紹介されているカスタマイズ通り操作すれば、５分で実装完了できちゃいました。

moonnote.hateblo.jp

プログラムのスキルはとくに必要なくて、ほとんどコピペだけでいけるのがいい！

わたしがメニューを設置したいと思った動機は、自己紹介とお問い合わせとプライバシーポリシーのページをナビっておきたい、というのと、とり急ぎカスタムするのはあとまわしで・・早めにカッコつけたい！という不純なもの？なので、まさに目的にピッタリでした。

さいわい、少しだけプログラムの知識があったわたしなので、問題なく実装がすんだのですが、わたしも最初そうだったように、jQueryってなに？とかフッタ・・？というかたはたくさんいると思うので、カスタマイズのページを参考に、実装の手順を見ていきます。

ごくカンタンな説明ですが・・

カスタマイズのページにある、用語についてごくごくカンタンに説明します。

• jQuery　‥　Webサイトにカンタンに動き（アニメーション）などをつけられるプログラム。ハンバーガーメニュー≡をクリックしたりタッチしたとき、メニューがサッと出たり閉じたりする動作とかさせます。
• HTML　‥　Webサイトを表示するためのプログラムです。テキストファイル（メモ帳アプリなど）にHTMLを書いて、ブラウザで開くとWebページが表れます。
• ヘッダ　‥　メニューとかロゴとか、Webサイトの上のほうです。
• フッタ　‥　Webサイトの一番下の部分です。テキスト形式のメニューとか社名とかの部分です。メニューもフッターも、基本サイトを使いやすく、見やすくするためのものです。

賛否ありありと思いますが、この先やることはこれぐらいの知識でモーマンタイです！

能書きはこれくらいで・・

では、実装していきます。

①まず、こちらのページから、テーマをインストールします。

Innocent - テーマ ストア

ここで、「テーマをインストールすると現在の設定が破棄されます・・」といった旨のメッセージが・・。

ビビってはいけません。（わたしも相当、ビビりですが・・。）背景画像やデザインCSSをとくにいじった記憶がないかたや、CSSってなんや？というかたは、あまり心配しなくてもいいと思います。

ただ、あくまで自己責任でおねがいします<(_ _)>

ちなみに、このInnocentは、むずかしい CSSの設定が不要で、カンタンにすぐれたメニューを設置できるすばらしいテーマなんです！

②インストールができたら、変更を保存するのをわすれずに！テーマが反映されません。

無事保存できたら、「設定を更新しました ブログを確認する」というメッセージが、画面上部に表示されます。

ねんのためテーマが反映されているか確認してくださいね。

③ここからが本番です！こちらのページを参考に、jQueryの設定からやっていきましょう！

はてなブログテーマ「Innocent」のカスタマイズ（ナビゲーションバー編） - MoonNote

jQueryのコードです。こちらをそのまま、まるごとコピーしてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    (function($) {
        $(".menu-toggle").on("click", function() {
            $(".main-navigation").toggleClass("toggled");
        });
    })(jQuery);
</script>

その後、画面右上の「はてなＩＤ」をクリックしてメニューを開き、「デザイン」を選択します。

すると、この画面に切り替わります。

左上のレンチマークをクリックしてください。デザイン設定画面に切り替えます。

次に、メニューから「フッタ」という項目をクリックして開きます。

フッタを開くと、コードを貼れる場所が開きます。

現れた白いテキストエリアをクリックすると、エリアが拡大しますので、そこにもし何か記述があれば消さず、一番下にさきほどコピーしたjQueryのコードを貼り付けて下さい。

これで、JQueryの設定が終了しました。

④次はHTMLの設定をします。

今度はこちらをそのまま、まるごとコピーして・・

<nav class="main-navigation">
    <div class="menu-toggle">メニュー</div>
    <div class="main-navigation-inner">
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">自己紹介</a></li>
            <li><a href="#">ブログ</a></li>
            <li><a href="#">お問い合わせ</a></li>
            <li><a href="#">プライバシーポリシー</a></li>
        </ul>
    </div>
</nav>

メニューから「ヘッダ」という項目をクリックして開きます。 

ヘッダを開くと、同じくコードを記述できる場所が開きます。

現れた白いテキストエリアをクリックし、エリアを拡大させたら、さきほどと同じように、そこにもし何か記述があれば消さず、一番下にさきほどコピーしたHTMLのコードを貼り付けて下さい。

ここまでできたら、あと少しです！

⑤さいごに、メニューの項目を設定します。

そのままだとコードが機能しないので、ご自身のページに合わせて内容を修正します。

といっても、なにもむずかしくありません！

まず、メニューの項目名をご自身のブログ用に変更します。

④でコピーしたヘッダーのカスタマイズエリアをクリックすると、HTMLの修正ができます。

この部分の

        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">自己紹介</a></li>
            <li><a href="#">ブログ</a></li>
            <li><a href="#">お問い合わせ</a></li>
            <li><a href="#">プライバシーポリシー</a></li>
        </ul>

ここを 

            <li><a href="#">ホーム</a></li>

ご自身がメニューに表示したい、ブログの項目に合わせて変更します。基本は、トップ画面や、カテゴリー名などでよいかと思います。

※ちなみに、カテゴリー名は、「ダッシュボード」の「カテゴリー」で確認できます。

コピーしたコードには、５つの項目が並んでいますが、<li> ～ </li> で囲んだ行を追加すれば、メニューに加えられます。逆に減らしたければ、行を削除すればＯＫです。

たとえば、「TOP」「プロフィール」「ダイエット」「美脚」「グルメ」「お問い合わせ」の６項目をメニューにしたければ、以下のように変更します。

        <ul>
            <li><a href="#">TOP</a></li>
            <li><a href="#">プロフィール</a></li>
            <li><a href="#">ダイエット</a></li>
            <li><a href="#">美脚</a></li>
            <li><a href="#">グルメ</a></li>
            <li><a href="#">お問い合わせ</a></li> 
        </ul>

これで、メニュー名の設定ができました。次にリンクURLを設定します。

メニュー名のボタンを押したときに表示したい、ブログのページURLをコピーして、

            <li><a href="#">ホーム</a></li>

こんどは「#」の部分に貼り付けて、変更します。

たとえば、ダイエットのボタンを押すと、ダイエットカテゴリーのページに飛ばしたければ、そのページが仮に「https://rubirubi.hateblo.jp/archive/category/ダイエット」だとすると、以下のように変更します。

            <li><a href="https://rubirubi.hateblo.jp/archive/category/ダイエット">ダイエット</a></li>

おなじように、他のメニュー項目も変更します。

※わたしはそう感じたのですが、もし、編集画面が小さくて操作しにくければ、一度アクセサリなどにあるワードパッドなどで編集してから、コピペしてもよいと思います。

全部の変更が終わったら、わすれずに変更を保存して終了です。

おつかれさまでした！

ＰＣやスマホで、画面を確認してみましょう。

（ブログ名、長い・・・）

う～ん・・れすぽんしぶ！＼(^o^)／

わたしは色を変更したり、多少カスタマイズを加えてますが、こちらを参考にしながら今やったような感じでやれば、できると思いますので、ぜひチャレンジしてみてください！

はてなブログテーマ「Innocent」のカスタマイズ（ナビゲーションバー編） - MoonNote

お役にたてれば、うれしいです♪

最後までおつきあいいただき、ありがとうございました(＊^v^＊)/