自宅PCでの見え方だけがおかしいのかなと思っていたんです…。
インフィード広告とは
今回の問題箇所がこちらです。
投稿一覧ページにおける投稿と投稿の間に差し込まれる広告が『インフィード広告』です。
上記の画像を見て分かる通り、広告部分が背景をはみ出し、崩れている状態でした。
投稿と投稿の間に差し込まれることで違和感なく溶け込むのが『インフィード広告』なのですが、これでは違和感ありまくりでした。
そこで、今回はこちらの対応を行いました。
試したコト
- CSSで調整
- 自動広告の設定見直し
CSSで調整
いつものごとく、はじめに『Chrome』の開発者ツールを頼りました。
が、何とか追いかけてみたものの、2時間弱でお手上げ。PHPまで絡んでくるとさすがに一筋縄ではいきません。
自動広告の設定見直し
当ブログはブログ内に表示される広告のほとんどを『GoogleAdSense』の『自動広告』に頼っています。
コードを設定するだけで様々な広告を設定できるので便利な機能ではありますが、今回のようにその便利さが逆に仇となるケースも存在します。
ということで、『自動広告』の設定を見直してみることにしました。
解決方法
サクッと結論。
- 『自動広告』設定から『インフィード広告』表示をOFFに設定。
- 個別に作成した『インフィード広告』を投稿と投稿の間に表示するように設定。
『インフィード広告』表示OFF
『インフィード広告』を表示させないようにする設定は『GoogleAdSense』の『自動広告』設定画面からスイッチ一つで行うことが出来ます。
次の作業を行うことで実質的に『自動広告』の『インフィード広告』表示は無効化されてしまうのですが、念のため非表示設定を行いました。
『インフィード広告』ユニットを投稿と投稿の間に配置
広告ユニットの作成に関しては割愛します。
配置には下記の投稿を参考に、WordPressプラグインの『AdInserter』を利用しました。
WordPressプラグイン【Ad Inserter】は、ほぼ任意の場所にアドセンス広告を簡単に挿入できるプラグイン。 ...
設定後の『AdInserter』がこんな感じです。
表示間隔は一覧表示件数を15に設定しているため、「3,6,9,12」と3投稿おきに設定しました。
結果がこちら。
若干のスペースは気になるものの、当初の崩れを大幅に改善することが出来ました。
最後に
今回の変更により、投稿と同じ大きさで表示されていた画像のみの『インフィード広告』が若干小さめに表示されるようになりました。
表示の崩れが解消できたので、今回はひとまずここまで。
以上です。
スポンサーリンク