つなろっく

イロトリドリな毎日

はてなブログでトグルメニューが開かない時の対処法【innocent編】

f:id:pea-nut:20190216213014j:image

おすっ!つな(@tu_na_69)です(>_<)

スマホで折りたたんだグローバルメニューが開かない!!という時の対処法です。

 

トグルメニューとは

f:id:pea-nut:20190216231405j:image

スマートフォンなどで見かける、ナビゲーションバーを折りたたんだメニューです。

ハンバーガーメニューなんていう言い方もありますよね。

クリックしても開かない

次々とカスタマイズを加えているうちに、気が付くとスマホのグローバルメニュー(トルグメニュー)が動かなくなっていました(;'∀')

カスタマイズごとに動作確認をしているつもりなのですが、スマホのトグルメニューを毎回開いてみるなんてことは、当然しないので、いつから作動していないのかわからない。

どのカスタマイズが影響を与えているのかわからないのです。

原因はいくつか考えられます。

はてなブログでトグルメニューが動かない時の対処法を一緒にチェックしてみましょう。

コードのミスはないか

カスタマイズがうまく作動しない原因として、いちばん多いのがコードミスです。

コピペするだけなら間違えることはありませんが、カスタマイズで書き換える時になにかひとつ文字を消してしまうだけでも、正常に作動しません。

もう一度ミスがないかコードを確認してみてください。

ごくまれにですが、最初からコードにミスがある場合もあります。こちらもチェックしてみてください。

jQueryが作動していない

はてなブログでトグルメニューを使用する際の「jQuery」 にURLが記載されているコードがあると思います。このコードが「http://」ではじまっている場合、サイトのURLである「https://」と異なっているとうまく作動しないようです。

解決方法はふたつ

・「http」を「https」に書き換える

・URLから「http」部分を削除する

ユウブログさんの記事が参考になります。

はてなブログテーマ「Naked」でトグルメニューが開かない時の対処法 - ユウブログ

わたしの場合は、はじめからコードに「http」が記載されていなかったので、こちらは当てはまりませんでした。

別のトグルメニューを設定してみる

ここまでやってみて解決しない場合、ナビゲーションバーに関するコード以外の部分が原因の可能性が高くなります。

犯人は、コードがナビゲーションバーなのか。

それとも、別のコードなのか。

それを見極めるために、ナビゲーションバーを入れ替えてみます。←これは、無理にやらなくてもいいです。

 

わたしは「innocent」のナビゲーションバーから「ゆきひー」さんのナビゲーションバーにチェンジ!!してみました。

はてなブログにグローバルメニュー(ナビゲーションバー)をつけてみよう - つなろっく

これもまた、作動しない…。

ということは…ナビゲーションバーに関するコードではなく、犯人は別のところにいる!!と推測されます。

ヘッダー高さを調整する

何度かトグルメニューをクリックしているうちに、あれっ?ということに気が付きました。

「メニュー」をクリックすると、タイトルのロゴがクリックされてトップページが表示されるのです。

メニューが開かないのではなく、ヘッダータイトルの中にトグルメニューがすっぽり入りこんでしまったためにメニューのスクリプトが作動していないのではないか、と考えました。

(↓赤で囲んだ部分全体がクリックされている状態)

f:id:pea-nut:20190215214136j:image

 ヘッダータイトルの高さを指定するCSSを削除してみました。

すると・・・メニューが開いた!!

ヘッダーの高さを指定するCSSの書き込みがバグの原因でした。

コピペしてOK!のままだとこういうミスが起こります(;^ω^)

 【修正前】

#blog-title {

    height: 80px; 

}

【修正後】

.header-image-only #blog-title #blog-title-inner {

    height: 80px; 

}

あちこちのサイトを探しまくり、

「もうやだ~」と暴れ出し、

お母さんに「つなちゃんもう今日はやめて寝なさい」と言われ、

「ふんっ」と悪態をつき、力尽き、

目がしょぼしょぼになってもあきらめずに格闘すること3日。

結局、解決の手引きはテンプレート製作者様のサイトにありました。

はてなブログで「タイトル画像」を設定する時のテクニック - MoonNote

検索からたどり着いたのですが、この記事を見つけた時は「青い鳥」を見つけた時のチルチルとミチルの気分でした。

なんということでしょう。

幸せの青い鳥は、すぐとなりにいたのです。

それでも解決しない時は

わたしはなんとか解決しましたが、ここまでやってもやはり解決しないこともあるかもしれません。

どこかが間違っていて、どこが間違っているのかわからない時は、HTMLやCSSをひとつづつ取り除いて、チェックしてみるのもいいかもしれません。手間はかかりますが(;'∀')

無事に解決することをお祈りしています。