syu_rei’s weblog

30代育休中女子の興味のあること。育児と株と英会話、その他日常。

MENU

はてなブログにトグルメニューを設置する方法。最新のjQueryを読み込もう。

こんにちは。カスタマイズ継続中のsyu_reiです。

 

ゆきひーさんのサイトを参考に、メニューの開け閉めができるトグルメニューにしてみました。

コピペだけじゃできなくて困ったので、参考に記事にします。

 

 

トグルメニューとは

トグルメニューってご存じですか?私は知りませんでした。

ハンバーガーメニューともいうそうです。 

ハンバーガーメニューとは、コンピュータの操作画面におけるメニューの表示形式の一つで、「≡」の字に似た3本の横棒が縦に並んだアイコンを画面の隅に常に表示し、これを利用者がタッチやクリックすると主要な操作メニューが出現する方式。

引用元:ハンバーガーメニューとは - IT用語辞典 e-Words

 

実装するとこんな感じです↓
f:id:syu_rei:20190626190736j:image

MENUを押すと下にメニューが開きます。

(本当はMENUの左に3本線が入るはず?なんですかなぜか入ってません…)

 

パソコンでご覧になっている場合は、試しにブラウザを小さくしてみてください。横長のグローバルメニューからトグルメニューに変わります。面白いです。

ちなみに当サイトでは変わったよってことに気づいてもらえるように、

  • グローバルメニュー版 薄い青色
  • トグルメニュー版   紺色
と、メニューバーの色を違う色に設定しています。

 

ゆきひーさんのサイトからコードをコピペ

 さて、実際に作業していきましょう。

www.yukihy.com

ゆきひーさんのサイトからコードをコピペします。

 ①「デザイン」→スパナマークの「カスタマイズ」→「ヘッダ」→「タイトル下」にコード1をコピペ

②「デザイン」→スパナマークの「カスタマイズ」→「デザインCSS」にコード2をコピペ

 

説明も書きこんでくださっているので、初心者でもアレンジしやすいです。

本当に助かります。

メモの書き方くらいは覚えましょう↓

syu-rei.hatenablog.com

参考に色見本のサイトも貼っておきます。自分で選んだ色に変えるだけで、一気に自分でカスタマイズした気持ちになれます。

www.colordic.org

 

 

さて、できたかな? 

 

問題発生、試行錯誤

なんでか動かない…

 なぜ???

 

というか、ゆきひーさんのサイトのトグルメニューも動いてないな。

ってことは、コードは間違ってなくて、何かが更新された、または廃止されたんだな。

 

コードの中にあるアドレスは「http://code.jquery.com/jquery-1.9.1.min.js」のみ!

とりあえず、ネット検索してみました。

 

f:id:syu_rei:20190628173410p:plain

ずらー!

うわー!無理むり!

 

大人しく、めっちゃネットで検索した結果、以下のことが分かりました。

SSL通信(https://~)のサイトではhttp:から始まるものを読み込めない

以下のサイトさんで説明してくれていました。

pc-walk.com

 本当に助かります。

ゆきひーさんのコードの中の「http://~」→「https://~」または「//~」で解決

 コード1の「http://code.jquery.com/jquery-1.9.1.min.js」を「https://code.jquery.com/jquery-1.9.1.min.js」

か「//code.jquery.com/jquery-1.9.1.min.js」に変えると動きました。

 

ちなみに最新バージョンは3.3.1だそうです。

コピペ用→「//code.jquery.com/jquery-3.3.1.min.js」

 

おかげさまでトグルメニュー設置できました!

 

検索すると際限なくカスタマイズ記事が出てくるはてなブログは素晴らしいと思います!

これからもカスタマイズ続けていきます。