【WordPress】 TwentyTwelve 子テーマでレスポンシブをカスタマイズする

懸案となっていた「TwentyTwelveのレスポンシブによるアドセンスバナーの重なり」の問題にようやく解決策が見つかったのでまとめておきます。

問題にしていたのは、サイト幅を狭めるとバナーが他のバナーやサイドバーのコンテンツに重なってしまうため、画面サイズによってはアドセンスの規定違反になるということです。

詳しくはこちら
【WordPress】 TwentyTwelveでアドセンスを使う場合の注意点

スポンサーリンク

1.まず結果から

サイトが最終的にどのようになったかを見て行きましょう。

サイトは幅を狭めると以下のように変化します。

まず、PCサイズ。

この状態から画面幅を狭めていくと、左右のグレーの余白から減っていきます。

responsive_customize_03b

次にコンテンツ(記事)とサイドバー間の隙間が減っていきます。

responsive_customize_06b

更に狭めていくと、コンテンツとサイドバーが重なる直前に1カラムに変化します。

サイズ的にはタブレット用といったところでしょうか。

responsive_customize_10c

更に幅を狭めていくとスマホ用となります。

responsive_customize_14

段組みはこのように対応しました。

2.具体的に何をしたのか

今回も子テーマだけで対応しました。
このため少々面倒くさいことになっています。

TwentyTwelveのレスポンシブは以下のように三段階に変化します。

600px未満のCSS

600px以上でCSS追加

960px以上でCSS追加

親テーマを改造しない方針のため、このように子テーマで上書きをしました。

【親】600px未満のCSS

【親】600px以上でCSS追加・・・【子】CSS上書き

【親】960px以上でCSS追加・・・【子】CSS上書き

【子】1093px以上でCSS追加

出来上がったのがこのコードです。

このコードを子テーマのstyle.cssに追記すればOKです。

コードのポイントをまとめると、こんなところでしょうか。

  • 2カラムが表示できない画面幅になった時は、サイト幅をコンテンツ(記事)幅まで減らしています。
    これで強制的に1カラムに変化させています。
  • 1カラム化をしたため、600px以上960px未満でも左右に余白ができてしまいます。
    このため「600px以上」という条件に余白に関するコードを追加しています。
  • 「960px以上」という条件はもう必要ないのですが親テーマから消せないため、余計な処理をしないように子テーマで上書きしています。
  • サイト幅が大きくなったため「1093px以上」という条件を子テーマで追加しています。
  • 画面幅が大きい時のみサイト上下にできる余白を削除しました。
  • 同様に画面幅で2段階に変化する左右のpadding幅を統一しました。

なお、デザインを詰めていくと余白の調整やボーダーラインの追加など出てきますので、数値の調整は必要になると考えています。
あくまでカスタマイズのベースが出来た、ということで。

さらにフッターの幅もこれに合わせました。
同様に子テーマのstyle.cssに以下のコードを追加。

本当はヘッダーの幅も変えなくてはいけないのですが、大きな画像も強引に貼り付けることが出来るため、今回は保留にしています。
必要とあらば手を入れます。

responsive_customize_16

3.まとめ

相当に苦労しましたが、とりあえずベースとなる段組は出来ました。
今後はこれを使って仕上げていきたいと思います。

なお、このサイトにも同じ内容を盛り込みました。
後日変更する可能性もありますが、しばらくはこのまま使うつもりです。
気になる方は実際に画面幅を変えてみてください。

日程にかなりの遅れがでてしまいました。
頑張らなくては。 


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

コメントをどうぞ

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

CAPTCHA