【はてなブログ】グローバルメニューとトグルメニューのエラー原因はコレだった！初心者が解決！

こんにちはKamekoです。

先日、ようやく念願のグローバルメニューを設置できました♪

しかし、正常に機能するまでなぜか何度かエラーが発生してしまい、解決するまでに苦労しました(；▽；)

どうやら、Googleアドセンス広告が関係していたみたいです。

今回、「グローバルメニュー・トグルメニューのエラーを解決できた話」を書いていきます。

※現在はワードプレスへ移行しています。

グローバルメニュー・トグルメニューのエラーを解決!!

今回設定したグローバルメニューは、スマホではトグルメニューに切り替わるようになっています。

初めに、実際に発生したエラー内容について書いていきます。

実際に発生したグローバルメニュー・トグルメニューのエラー

グローバルメニューの設置を試みてから正常に機能するまで、実は３回エラーが発生しています。

もうね、CSSやHTMLのことを分からない私としては、何が原因かサッパリで泣きそうになりました(;_;)

では、解決方法を見ていきます。

グローバルメニュー・トグルメニューのエラー解決①

【エラー内容】ヘッダーしか表示されなくなり、記事が全く表示されなくなった。

 当時、ブログカスタマイズを一度に色々行ったせいか、グローバルメニューのCSSを入力した途端にヘッダーしか表示されなくなりました。いきなり記事が画面から消えてしまったのです。

この場合は、「入力したグローバルメニューのCSSコード」を一旦全て削除。

そうすることにより、サイトは元に戻り記事もちゃんと表示されるようになりました。

ブログを始めて本当に初期の頃だったので、物凄く焦りました(^_^;)

グローバルメニュー・トグルメニューのエラー解決②

 ここでは、２つのエラーが同時に発生し解決できた話を書いていきます。

 ②-1HTML＆JQueryが原因！？

表示はされていますが、何度タップしても全く反応しない。

グローバルメニューの設定にゆきひーさんの記事を参考にさせて頂いていますが、どこか入力ミスしたのかと思い何度も見直したけれど入力ミスではなさそう。

そこで、原因を探るべく必死でググっていると。コードの一部に原因がありそう。

（HTML＆JQueryの一部）

どうやら、自分のサイトのURLがhttpsなら

らしいので早速変更。この部分を変更してあげると正常に動き始めることが多いみたいです。

②-２Googleアドセンス広告が原因！？

グローバル・トグルメニューが作動しない原因として、HTML＆JQueryのコードの一部を訂正してあげると、正常に機能するという声が多かったです。

しかし、当サイトは全く動かない。。。

どうして？？原因が分からない！何度かCSSを貼りかえてみたけれど変わらず。。

と、思っていると今度はグローバルメニューの幅が異常に広がっていることに気が付きました。

なんとっ！

下記の赤枠で囲ってある部分にグローバルメニューが広がっていましたっ!!!

これは大変！とよく見てみると、あれっ？

Googleアドセンス広告の幅にあわせるように拡大されています。

画像では分かりませんが、グローバルメニューの上下に広告が表示されてしまいその広告の高さに合わせるように、グローバルメニューが広がっていました(^_^;)

なぜ、そのような状態になってしまったのかハッキリとした原因究明には至りませんでしたが、何かしらで広告がグローバルメニューに影響を与えてしまったのだろうという事は考えられます。

そこで、まずはGoogleアドセンス広告の貼付け位置の変更をしてみよう！と思い試みました。

私は、広告の貼り付位置を自動設定にしていたので手動に変更して貼り直し。

まだ、納得した貼り方では無いですがとりあえずヘッダー位置にある広告をなんとかしたかったので、今はこのままで様子見です。

さて、ヘッダー下に貼られてあった広告を外すと、直りました!!グローバルメニュー元に戻りましたぁ！

同時にトグルメニューも正常に動くようになりました。

良かった!!

▼貼り方はこちらの記事を参考にさせて頂きました。

まとめ

この３つを実施しエラーが解決できました。

今回特に実感したことは、やはりバックアップは必ずとっておくべき。と、いうこと。

普段バックアップはとっていますが、もし、バックアップをとっておらず一から構築していく事を考えるとゾッとします。

せっかく作りあげたものが無駄にならないよう、バックアップはとるようにしたいですね。

この記事が少しでも参考になれば嬉しいです。

最後までお読みくださりありがとうございます。