LION MEDIAにテーマを変更して一ヶ月程たち、ようやく一通りのセットアップが終わりそうです。
外観→カスタマイズからほとんどの事が設定可能であるため、WordPress初心者でも大体だいじょうぶ。
ほんと無料テーマとは思えないほど充実しています。感謝感謝。
hakumaiも小さい問題は起こりながらもなんとか進めてきたのですが、ある問題に相当頭を抱えました。。
AdSenseのインフィード広告の表示が崩れる。
原因と対処法について記載します。
インフィード広告設置はコード貼り付けのみ
LION MEDIAでは、AdSenseから取得した広告コードを貼り付けるだけで簡単にトップ画面にインフィード広告を設置可能です。
外観→カスタマイズから広告設定のインフィード広告欄に広告コードを貼り付けるだけ。
ver.2.0.0から追加された模様。お手軽過ぎてやばい。
貼り付ける広告コードはAdSenseから取得します。
コード取得は通常手順（自動で広告スタイルを作成）で進めればOK。
インフィード広告が表示された！ただし全画面サイズ
簡単簡単〜♪と浮かれて表示を確認しますが、なんと全面広告表示に。
さすがに見栄え悪すぎ（笑）
横の記事とは完全に被って表示されています。
さすがにこれでは私の上品なサイトのイメージを著しく汚すので対応方法を調べます。
AdSense上でインフィード広告の編集
最初に試したのはこれ。
「イメージ」項目のサイズで%やpx指定を入れてみるも、
表示される広告画像のサイズは調整されるもテキストや広告枠の大きさは変わらず。
そもそも「見出し」や「説明」にはサイズ指定可能な項目がありません。
ちなみに中央に表示される、
スライダーを調整することでフィードコンテナのサイズを指定可能に見えますが、これは設定項目ではなくレスポンシブ表示の確認用です。
よく考えれば説明書きの通り当たり前なんですけど、藁にも縋る思いでいじってみたり。。
AdSense公式：スタイルシートでサイズ調整
次に試したのはこれ。
レスポンシブ広告コードを修正する方法
サイズはたしかに変わったものの、LION MEDIAデフォルトのフィードサイズを把握してcssで指定しなければならなく、初心者には結構ハードルがたかいです。
hakumaiも恐る恐るテーマのソースファイルを開いてみるものの、そもそも固定ピクセルでフィードサイズを指定しているところを上手く見つけられません。
どうしたもんかと悩んで諦めかけていたんですが、スタイルシートを触りながらふっと思いたったことが。
インフィード広告の表示が崩れる原因はCSS非同期読込設定！
Googleさんのこの記述、
インフィード広告は、表示されるデバイスのサイズに合わせて自動的に調節されるという意味では、レスポンシブ広告です。インフィード広告の幅は、それが収められているフィード コンテナの幅と常に同じです（インフィード広告の幅の最小値は 250 ピクセルです）。広告のすべての要素が表示可能なスペースに収まるように、インフィード広告は高さが自動的に調整されます。
出典：レスポンシブ インフィード広告のサイズ
なんか引っかかったんですよねー。
じゃあ、コンテナサイズをスタイルシートで指定してあって、さらにレスポンス対策でcssを遅延読込してたらどうなるのっと。
WordPressでcss遅延読込を実現する方法はプラグインを使うのが一般的です。hakumaiも以前はLazy loadを利用していました。
LION MEDIAテーマは「CSS非同期読込設定」の設定が可能なので、今はプラグインを利用していません。
外観→カスタマイズから「SEO設定 [LION用]」の中に見つけたときに、即設定＋プラグインの停止をしていたのを思い出しました。
で、これの設定をオフにしたところ。
無事にサイズ問題も解消し今に至ります。
この問題で1週間以上悩みました。ほんと疲れた。。
うまく行かないときは追加プラグインなしの初期設定で動作確認を
レスポンスは気になるものの、とりあえずはCSS非同期読込設定は無効にしたまま様子見します。
hakumaiの場合はこれで解決しましたが、WordPressで新しいことを、やろうとすると問題が起こることはよくあります。
このテーマを使い始めてからほとんどのプラグインを停止したからか、この考えに至るまでに時間がかかりました（言い訳）。
とりあえず。うまく行かないときはプラグインなしの初期状態で動作確認が鉄則です。
プラグインがほとんど不要なLION MEDIAテーマの場合は、プラグイン確認の代わりににカスタマイズの設定を見直してみましょう。
それにしても広告コード貼り付けだけでインフィード広告まで表示できてしまうLION MEDIAテーマ、ほんとに素晴らしい。
コメント