【WordPress】 TwentyTwelveでアドセンスを使う場合の注意点

既に使いたいバナーサイズと配置を決めているので、これに合わせてサイトの幅を調整したいと考えています。

数値を2、3つ変更すれば終わるかと楽観視していたのですが、よくよく調べてみると結構厄介なことがわかりました。

まだ結論はでていませんが、調べて考えたことをまとめておきます。

 

スポンサーリンク

1.TwentyTwelveはいろいろな画面サイズにどのように対応しているか

TwentyTwelveでは「レスポンシブWebデザイン」という手法が取られています。

これはひとつのコードでPC、タブレット、スマホなど画面サイズの異なるモニタに対応する技術です。

このテーマの場合は、画面の幅が

a.600px未満
b.600px以上960px未満
c.960px以上

という三段階で表示が変化しています。

a.600px未満の場合

site_width_02

このようにサイトタイトルが中心寄りになり、各メニューがボタンに統合されます。
サイドバーは記事の下に配置されています。
スマホ用といったところでしょうか。

CSSはこの画面サイズが基準になっています。
画面サイズが大きくなるたびに新たなCSSが追加される仕組みです。

 

b.600px以上

親テーマのstyle.cssではこのように指定されています。

site_width_03

600px以上になると、コンテンツとサイトバーを横並びにし、それぞれの幅は割合で可変させています。
そのために表示はこのようになります。

site_width_04b

c.960px以上

通常PCで見ているサイズですが、上記に加え更にCSSが追加されています。

site_width_05b

site_width_06c 

このように画面の幅で表示が3段階に変化します。
これが「レスポンシブ」です。

2.で、何が問題か

以下のように配置でアドセンスのバナーを使いたいと考えています。

site_form_02

何の問題もないように思いますが、画面幅を狭めるとこれが一転します。

site_form_03b

バナーとバナー、さらにバナーとサイドバーのコンテンツが重なってしまいます。

アドセンスの規定では画面がどのサイズであろうとバナーが他の広告やコンテンツと重なることが許していません。 

どうやら今回考えているバナーの配置とTwentyTwelveとは相性がよくないようです。

 

3.では、どうするか

問題の「レスポンシブ」を動かしているnavigation.jsからオフにしてしまうことが一番確実なようです。
しかし、この内容を子テーマだけでやるのは私のレベルでは到底無理です。

[resolved] Remove the responsive code from the Twenty Tewlve Theme(WordPress.org Forums)

そこで以下の案で検討したいと考えています。

  • コンテンツ(記事)とサイドバーの幅を比率から固定値に変更する。
  • バナーが重なりそうになった場合、サイドバーが記事の下に移動する。
  • 「960px以上は」という条件分岐で設定された内容は、子テーマで打ち消して機能しないようにする。
    (親テーマを改造しない方針のため「960px以上」という条件を1065pxなど他の数値に書き換えることが出来ない)

この方針でカスタマイズを進めたいと考えています。

 

親テーマを直接改造できればどんなに楽かと・・・
うーん。。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA