ゆうらり Happy Smile
iPhoneのSafariでブログのハンバーガーメニューが開かない不具合の原因は?

iPhoneのSafariでブログのハンバーガーメニューが開かない不具合の原因は?

FC2ブログ日記-カスタマイズの所感など
2021/01/02
胃がん_ブログ_ゆうらりHappySmile_管理人M_イラスト_アイコン_画像
M
#FC2ブログ #ハンバーガーメニュー #ドロワーメニュー #グローバルナビゲーション #ブログカスタマイズ #ブログテンプレート #ブログ日記 #iPhone #Safari #FastClick

iPhoneのSafariでブログのハンバーガーメニューが開かない不具合の原因は?

FC2ブログ『ゆうらりHappySmile』管理人のブロガーM(@yulari_happy )です。

ゆうらりHappySmile 管理人 Mあけましておめでとうございます。

現在のテンプレートを使い始めてから、一応の満足感を得られたこともあり、カスタマイズやブログ日記のほうはすっかりとご無沙汰してしまいました。

ぼちぼちではありますが、FC2ブログを運営するなかで気になったことがあればその都度ご報告するつもりですので、本年も宜しくお願い申し上げますm(__)m

というわけで早速、新年一発目のブログ日記を更新。この記事のお題は、スマホのiPhoneでブログを見た時に表示される「ハンバーガーメニュー」のお話しです。

iPhoneのSafariでブログを閲覧していたら、ハンバーガーメニューをタップしても反応が悪いし開かない…。原因について色々と調べてみた結果、わかったことを書き記しておきます。

iPhoneのSafariでブログを閲覧したらハンバーガーメニューが開かない‼︎不具合に気付いた経緯

ちなみに、僕が現在の「Choir」というFC2ブログのテンプレートを使い始めてから約半年。開発者のAkiraさんからお借りしているものです。

Choir - ブログ内期間限定配布「配布終了」

Choirテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ...

「半年間ずっと気付かなかったの⁉︎」と、お叱りの声を受けてしまいそうですが(汗)ブログの不具合については一応チェックしたつもりでした。

Google Chromeのデベロッパーツールを使い、スマホやiPhoneで閲覧した状態をチェック。何ら問題がないと思っていました。

ところがたまたま、同じテンプレートを使用している他のブログをiPhoneのSafariで閲覧する機会がありまして。記事を読んだ後に、トップページに移動しようと思ってハンバーガーメニューをタップしてみたんです。ところが、何も反応しない…。

「あれ?自分のブログは大丈夫だよな⁉︎」

気になって、さっそく自分のブログを実機で閲覧。ハンバーガーメニューをタップしてみた結果、反応しない事に気付いたのです(汗)

ドロワーメニューが開かない原因を色々と調べてみた結果…

そこで、今更ながら…ネットで「ハンバーガーメニュー(正式にはドロワーメニューと呼ぶみたい)が開かない不具合の原因」を検索してみました。

ちなみに、当ブログで実装されているドロワーメニューは、ページを下にスライドさせてもずっと上部に固定表示されるタイプ。いつでもハンバーガーの所をタップして、メニューを表示させることが出来る仕組みになっています。

Web検索した結果、不具合の原因として可能性があるものは以下の2つでした。

  1. fixedの使い方に問題がある可能性
  2. Googleアドセンスの自動広告

参考までに、記事も掲載しておきます。

【ドロワーメニュー】デベロッパーツール上だと開くのに、スマホ上だと開かない症状

ドロワーメニューを実装した際に、PC用webブラウザのデベロッパーツールだと問題無く表示されるが、iPhoneのsafari(他の環境は試せていないので不明)だと上手く表示されない症状が発生。原因は、fixedしたヘッダーの中にドロワーメニューのhtmlを記述したことでした。

Google AdSense 自動広告の画面上部から出てくる広告がページ全体を押し下げる件 - Corredor

Google AdSense が、ページを解析して自動的に最適な広告を表示する「自動広告」を始めた。 元Google AdSense担当が教える 本当に稼げるGoogle AdSense 収益・集客が1.5倍UPするプロの技60作者: 石田健介,河井大志出版社/メーカー: ソーテック社発売日: 2018/01/20メディア: 単行本この商品を含むブログを見る この中で「テキスト広告とディスプレイ広告」を有効にしてスマホでページを見ると、ページ上部からビッグバナーがスワイプして出てくるようになる。 コレがちょっと厄介で、ページ全体を押し下げるように広告が挿入され、ページの本来のヘッダの上部に、バ…

Google AdSense 自動広告の「アンカー広告」がページを押し下げないようにする - Corredor

Google AdSense 成功の法則 57作者: 染谷昌利出版社/メーカー: ソーテック社発売日: 2014/07/19メディア: 単行本この商品を含むブログ (4件) を見る Google AdSense に導入された「自動広告」のうち、「アンカー広告」という広告ユニットが、ページ全体を押し下げてしまう、という話を以前書いた。 neos21.hatenablog.com 以前の記事では、コンテンツ全体を position: absolute でフローティングすることで、「アンカー広告」にページを押し下げられても逃げられる方法を紹介した。 しかしこの方法だと、「関連コンテンツ」という別の自…

ネット検索しても不具合の原因がわからない

これ以外の原因を指摘する記事も、あるにはありました。しかし、海外で書かれたものを機械で翻訳して日本語がメチャクチャな記事とか、文章がお粗末で内容の薄いコピペ記事ばかりだったので、ここでは割愛します。

で、上に挙げた2つの可能性を、自分の不具合に当てはめてみる。「fixed」に関してはそもそも、この周辺をカスタマイズした記憶がないから、自分の不具合とは関係なさそうです。

したがって、僕も導入しているGoogleアドセンスの自動広告のほうに注目しました。記事を参考にして色々といじってみましたよ。アンカー広告をやめてみたり。しかし、これも関係なかったようです。そうすれば、アンカー広告はカスタマイズして下部に表示させていたんだ…。

結局、ネットで調べた情報では不具合を解決させることが出来ませんでした。こうなると、後は自分でひとつずつ上から下までコードをチェックしていくしかない…。どこかでエラー表示が出てくれると有り難いんですけどね(^_^;)

これは、もの凄く時間のかかる重労働になりそうだ(汗)そんな、終わりの見えない闇を感じつつ、覚悟を決めて作業に取り掛かった次第であります。

あっさり解決‼︎「FastClick」が原因だった

ところが、意外にもあっさりと解決。スマホのiPhoneでSafariからブログを閲覧した時に、ハンバーガーメニューが開かない不具合を引き起こす原因は、head内に記述した「FastClick」だったのです。

問題の箇所が上のほうにあって良かった‼︎

「FastClick」は、ブログのページ読み込み速度を速くするために実装したカスタマイズ。以前の記事でご紹介したことがあります。

【コピペで簡単】 スマホ用Webサイト、ブログのクリック遅延の解消法

こんにちは。FC2ブログを運営するブロガーMです。最近は、スマホを使ってWebサイトやブログを閲覧するのが主流になりました。今回は、スマホでWebを見る時にイライラする原因のひとつ「Clickイベントの遅延」について、その対策をご紹介します。とっても簡単だったので、さっそくボクのFC2ブログにも実装してみましたよ(^^)ちなみに、ボクだけに限らず、ブロガーさん達は皆さんがスマホ主流の流れに沿って自分のサイトをレスポンシ...

あらためて記事を読んでみると、スマホのタップに支障が生じることを自分で書いていたのでした(汗)

さっそく、これをhead内から取り外したら、ちゃんとハンバーガーメニューが開くようになりました。

おわりに

昔は、自分でゼロから作ってグローバルメニューやハンバーガーメニューを実装していた時期もあったんですけどね(^_^;)

現在、お借りしたテンプレートを使ってFC2ブログを運営しているわけですが、テンプレートは作者それぞれの考えを基に構築されたもの。

したがって、テンプレートの内容も多種多様ですから、不具合を見つける場合は、作者の意図を汲みつつチェックしなければならず、ヘタをすると大変な作業になるところでした(汗)

さらに、ハンバーガーメニューの不具合も、使うテンプレートによって原因が違ってくるということですね。

今回は、たまたま「FastClick」に不具合を引き起こす原因がありました。しかし、「FastClick」が別に悪いものだとは思いません。前に使っていたテンプレートでは何ら不具合が生じませんでしたし。

結局、ブログのカスタマイズやテンプレート選びにも、人間と同じく相性というものが存在するのかも知れませんね。

また、Google Chromeのデベロッパーツールは決して万能でないことが今回の件でよく実感できました。テンプレートに何か変更を加えたりカスタマイズした後は、スマホの実機を使ってチェックするべきだと痛感した出来事でした。

あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事ランキング
FC2ブログ日記-カスタマイズの所感など