サイドバーに広告を収めるCSS

 このブログではサイドバーに広告を配置しています。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指定なので、これでいけるみたいです。
 以上、このブログにおける、サイドバーに広告を収める方法でした。

広告

コメントを残す

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

CAPTCHA