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

はてなブログカスタマイズ!テーマを変更してメニューを設定 - ハテブカスタム

 

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

 

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

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

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

 

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

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

 

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

 

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

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

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

 

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

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

 

blog.hatena.ne.jp

 

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

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

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

 

5分で実装完了!

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

 

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>

 

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

 

はてなブログカスタマイズ!テーマを変更してメニューを設定 - ハテブカスタム

 

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

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

 

はてなブログカスタマイズ!テーマを変更してメニューを設定 - ハテブカスタム

 

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

 

はてなブログカスタマイズ!テーマを変更してメニューを設定 - ハテブカスタム

 

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

現れた白いテキストエリアをクリックすると、エリアが拡大しますので、そこにもし何か記述があれば消さず、一番下にさきほどコピーした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>

 

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

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

 

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

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

 

        <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>

 

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

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

 

はてなブログカスタマイズ!テーマを変更してメニューを設定 - ハテブカスタム

 

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

 

はてなブログカスタマイズ!テーマを変更してメニューを設定 - ハテブカスタム

 

おつかれさまでした!

 

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

 

はてなブログカスタマイズ!テーマを変更してメニューを設定 - ハテブカスタム

 

(ブログ名、長い・・・)

 

はてなブログカスタマイズ!テーマを変更してメニューを設定 - ハテブカスタム

 

う~ん・・れすぽんしぶ!\(^o^)/

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

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

 

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

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