記事

Twitter BootstrapとGoogle Adsense

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

Twitter Bootstrapはサクッと今風のサイトを作れる便利なCSSフレームワークですが、Google Adsenseと相性が悪いという声もちらほら。

理由はTwitter Bootstrapのグリッドレイアウト。
僕がよく使うレイアウトは、.span9にメインコンテンツ、.span3にサイドバーてな感じなのですが、このspan9のデフォルトの幅が700pxで、Google Adsenseのビッグバナーの幅が728pxということで、728pxのビッグバナーがspan9に収まらないのです。。。

幸いにもTwitter BootstrapはLessで細かい設定を変えれるので、.lessファイルを変更してコンパイルしてやることで問題は解決します。
lessファイルはGitHubからダウンロードすることが出来ます。
コンパイルにはMacをお使いの方ならCodeKitがおすすめ。Windowsの方はWinLessが良いそうです。

さて、僕の場合span9の幅を728pxにしたいので、それを基準に計算します。
前述のとおり、デフォルトのspan9は700px、span1は60pxです。各グリッドのマージンは20px。
ということは、(span1の幅 × 9)+(20px × 8)が728pxになるようにしてやれば良いわけです。

ここからは簡単な方程式。
(X × 9) + (20 × 8) = 728
9X = 728 – 160
X = 63.1111111

というわけで、span1の幅が63.1111111pxと算出されました。

あとはlessファイルにこの数値を記載してやるだけ。
variables.lessの275行目の

@gridColumnWidth:         60px;

この60pxを63.1111111pxに書き換えてやればOK。
span9がちょうど728pxになります。

これでTwitter Bootstrapを使ったサイトにビッグバナーを挿入できますね。

  • このエントリーをはてなブックマークに追加
2013年6月
« 5月   4月 »
 12
3456789
10111213141516
17181920212223
24252627282930

フォトライブラリー

コメントを残す

%d人のブロガーが「いいね」をつけました。