今回は、普段の内容と違います。最近、ブログのデザインを変えることが楽しくなってきてちょこちょこいじっています。
その時に起こったトラブルの解消方法があまりにも素晴らしかったので紹介したいと思います。
トラブルの症状
▼「はてなブログアプリ」上では、このように普通に見られた私のサイトですが、
▼スマホのクローム画面で開くと、タイトルが下がり、しばらくするとヘッダー画像の上に広告が入ってしまいました。
▼例えばこんな感じ。ヘッダー画像の上にもろ広告がかぶり、タイトルが押し下げられてひどい状態になってしまいました。
トラブルをどうやって切り分けるか？
このトラブルは、今まで使っていたはてなブログテーマを変更したときに起こりました。しかも、同時にhttpからhttpsに変更したこともあり、何が問題か分からなくなってしまいました。
もう少し状況を詳しくまとめて書き出すと、
トラブル発生状況
- httpからhttpsに変更時に発生（これは関係ないかも）
- ブログテーマを変更したときに発生（これも関係ないような気がするけど、もしかしたらMinimalismテーマに何か関連性があるのかな。）
- 非レスポンシブルデザインの時は問題なし（管理画面＞デザイン＞スマートフォン＞詳細設定＞レスポンシブルデザイン をチェックしないときは問題なし）
- Googleアドセンスの自動広告を導入したときに発生
- 広告ユニットを手動で入れる場合は問題なし
トラブル発生環境
- PC画面では問題なし。スマホ画面のみ発生
- 「はてなブログアプリ」などでは発生しない
- どうやらスマホのクローム画面で発生しているらしい
- Androidスマホで発生している。（iPhoneは使っていないので分からない）
とにかく、自動広告に切り替えたことと、Android端末のchrome上で起こっていることは間違いなさそうです。
別に自動広告にこだわっているわけでもないのであきらめればいいのですが、できないことが悔しくて解消方法を探していました。
救世主となったサイト
いろんなキーワードを検索窓にいれてもなかなか同じ症状にたどり着きません。
そんな時、「自動広告 ズレる」こんなキーワードを入れて発見したこちらのサイトが希望の光に。
画面上部に固定されるタイプの広告だと、画面全体が下に押し下げられて隙間が出来ます。
そうそう、これこれ。似ています。この記事では「アンカー広告」によって画面が押し下げられていますが、私のブログでは「ディスプレイ広告」で画面が押し下げられているようです。けれど、症状は似ていますし、「ディスプレイ広告」をはずして「アンカー広告」を導入すると、同じように画面全体が押し下げられています。
きっとこれに違いないと思って、読み進めるとこちらの記事↓が紹介されていました。
iPhone で「アンカー広告」が表示されている状態で Mac に USB 接続し、Safari ブラウザの Web インスペクタでデバッグしてみた。すると、「アンカー広告」が
body要素にstyle属性を埋め込み、動的にpaddingを変更していることが分かった。これによってページ最上部に隙間ができ、コンテンツが押し下げられていたのだ。
素人の私には、何のことだかよく分かりませんが、こんな風に検証して解決していくプロセスって感動してしまいます。しかも、この原因をもとに導き出したコードはたったの、数行。
え？これで？
と思うくらい簡単なコードでなおりました。魔法のようです。
コピペで簡単修正方法
やり方は超簡単です。
管理画面＞デザイン＞カスタマイズ（スパナマーク）＞デザインCSS
一番下の行に、このサイト↓で紹介されているbodyから始まるコードを全部コピペすればOKです。
Google AdSense 自動広告の「アンカー広告」がページを押し下げないようにする - Corredor
おわりに
分からなくてはまってしまったときに、助けてくれる記事に出会えると本当に感動します。感謝の気持ちを込めてご紹介させていただきたいと思います。ありがとうございました。
できるだけ、子どもの遊びをテーマに、、、と自分の中でしばりを作っていたのですが、あまりにもサクッと修正できたことに感動し記事にしてしまいました。
それにしても、
アドセンス広告を貼っていますが、時々、自分の書いたものがお金をもらうのに値するのか？とドキドキします。時間をかけて読んでくださる方の痕跡をアナリティクスで感じたりすると、「まあいいのかな」とほっとしたり、「お前、またくどくて分かりにくいへたくそな文章かきやがって」と恩師の毒舌を思いだし襟を正さなきゃと思ったりもします。
でも、新しいシステムを体験してみたいという好奇心には勝てません。そんなわけで、自動広告を導入し遊ばせてもらっています。
