このブログではサイドバーに広告を配置しています。Google Adsenseの一般的なレクタングル枠の縦250px×横300pxのものなのですが、そのまま配置したのでは、ウィンドウに十分な横サイズがなければサイドバーからはみ出す形になり、下にスクロールバーが出現することになってしまいます。
それをCSSで解消しました。なかなかいい感じだと思うので、以下にメモしておきます。
広告
0. サイドバーからはみ出す原因
使用しているテーマであるVerbosaは、サイドバーのサイズを調整するオプションが付いてます。
なんとなく、一番バランスがいいかなと思った330pxにしていたのですが、テキストウィジェットのコンテンツ部分の横幅が通常では、パディングなどの関係で300px以下になるのが原因でした。
1. Paddingとmarginを解消
広告を表示しているウィジェットのtextwidgetクラスにmargin-leftにマイナスの値を与えることで、ウィジェットを配置されたときにサイドバーの左端paddingとmarginをキャンセルしました。
目当てのウィジェットのtextwidgetクラスのみに設定することで、CSSの効果がそこだけに波及し、他のウィジェットのレイアウトには影響しません。
2. text-alignを利用して右寄せ
さて、これで良いかんじにレイアウトは出来たのですが、どうマージンを修正するかが迷いますので、もうその辺は気にせず、広告を右寄せにすることにします。
まず、上記でマージンをいじったtextwidgetクラスに、display: inline-block;を追加。その後、text-align: right;で配置。多分これでそれなりにうまいこといくはずです。
どうやらGoogle Adsenseの広告自体がinline-block指定なので、これでいけるみたいです。
以上、このブログにおける、サイドバーに広告を収める方法でした。