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

こんにちはKamekoです。

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

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

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

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

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

目次

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

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

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

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

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

【エラー内容】

①ヘッダーしか表示されなくなり、記事が全く表示されなくなった。

②グローバルメニュー自体は作動するがトグルメニューが作動しなかった。

③グローバルメニューとトグルメニューの幅が異常に広がってしまった。

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

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

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

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

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

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

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

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

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

✔グローバルメニュー自体は作動するがトグルメニューが作動しなかった。

✔グローバルメニューとトグルメニューの幅が異常に広がってしまった。

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

 ②-1HTML&JQueryが原因!?

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

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

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

(HTML&JQueryの一部)

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

src=”http://~~

httpの部分をhttpsにしないと作動しない。

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

②-2Googleアドセンス広告が原因!?

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

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

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

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

なんとっ!

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

f:id:kamekodiary:20210112144636j:plain

これは大変!とよく見てみると、あれっ?

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

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

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

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

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

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

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

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

良かった!!

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

www.xserver.ne.jp

まとめ

解決のために実施したこと

①CSS・HTMLを一度削除して再度入力をした

②HTML&JQueryのURLの一部を訂正

③Googleアドセンス広告の貼付け位置の見直し

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

やっと安心しました。良かった。。

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

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

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

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

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

ブログランキング・にほんブログ村へ
Shareされると喜びます!
目次
閉じる