こんにちは。カスタマイズ継続中のsyu_reiです。
ゆきひーさんのサイトを参考に、メニューの開け閉めができるトグルメニューにしてみました。
コピペだけじゃできなくて困ったので、参考に記事にします。
- トグルメニューとは
- ゆきひーさんのサイトからコードをコピペ
- 問題発生、試行錯誤
- SSL通信（https://~）のサイトではhttp:から始まるものを読み込めない
- ゆきひーさんのコードの中の「http://~」→「https://~」または「//~」で解決
トグルメニューとは
トグルメニューってご存じですか？私は知りませんでした。
ハンバーガーメニューともいうそうです。
ハンバーガーメニューとは、コンピュータの操作画面におけるメニューの表示形式の一つで、「≡」の字に似た3本の横棒が縦に並んだアイコンを画面の隅に常に表示し、これを利用者がタッチやクリックすると主要な操作メニューが出現する方式。
実装するとこんな感じです↓
MENUを押すと下にメニューが開きます。
(本当はMENUの左に３本線が入るはず？なんですかなぜか入ってません…)
パソコンでご覧になっている場合は、試しにブラウザを小さくしてみてください。横長のグローバルメニューからトグルメニューに変わります。面白いです。
ちなみに当サイトでは変わったよってことに気づいてもらえるように、
- グローバルメニュー版 薄い青色
- トグルメニュー版 紺色
ゆきひーさんのサイトからコードをコピペ
さて、実際に作業していきましょう。
ゆきひーさんのサイトからコードをコピペします。
①「デザイン」→スパナマークの「カスタマイズ」→「ヘッダ」→「タイトル下」にコード１をコピペ
②「デザイン」→スパナマークの「カスタマイズ」→「デザインCSS」にコード２をコピペ
説明も書きこんでくださっているので、初心者でもアレンジしやすいです。
本当に助かります。
メモの書き方くらいは覚えましょう↓
参考に色見本のサイトも貼っておきます。自分で選んだ色に変えるだけで、一気に自分でカスタマイズした気持ちになれます。
さて、できたかな？
問題発生、試行錯誤
なんでか動かない…
なぜ？？？
というか、ゆきひーさんのサイトのトグルメニューも動いてないな。
ってことは、コードは間違ってなくて、何かが更新された、または廃止されたんだな。
コードの中にあるアドレスは「http://code.jquery.com/jquery-1.9.1.min.js」のみ！
とりあえず、ネット検索してみました。
ずらー！
うわー！無理むり！
大人しく、めっちゃネットで検索した結果、以下のことが分かりました。
SSL通信（https://~）のサイトではhttp:から始まるものを読み込めない
以下のサイトさんで説明してくれていました。
本当に助かります。
ゆきひーさんのコードの中の「http://~」→「https://~」または「//~」で解決
コード１の「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」
おかげさまでトグルメニュー設置できました！
検索すると際限なくカスタマイズ記事が出てくるはてなブログは素晴らしいと思います！
これからもカスタマイズ続けていきます。
