WordPressテンプレート【Stinger7】の小技|スクロール広告で横並びに広告を配置する

Stinger7にしてから、半月ぐらい経ちました。このブログでは、大きな変更はしないで、ほぼテンプレート素材のまま利用していこうと思います。今回は、右側サイドバーのスクロール広告を横並びに配置する方法を紹介します。以下のような感じで横並びになります。

■スクロール広告とは

このブログでも利用しています。スクロールすると、ずっとついてくるエリアのところです。Adsenseの配置が禁止されているやつですね。で、この部分に細かい広告を横並びにして配置する方法を紹介します。

■CSSの変更

以下のCSSをstyle.cssに追記してください。CSSの設定はこれだけです。

.fix-ad-box {
     display: table-cell;
}

■スクロール広告のところに以下のように記述してください。

以下のように設定してください。fix-ad-boxのdivのところに広告の画像やらバナーを設定してください。横幅が100pxの広告バナーだと、ちょうど横に3つ並びます。

<div class="fix-ad">
	<div class="fix-ad-box">
		要素
	</div>
	<div class="fix-ad-box">
		要素
	</div>
	<div class="fix-ad-box">
		要素
	</div>
</div>

改行をする場合は以下のようにfix-adをもう1セット用意して、設定してください。こうすると、2段目に移動します。

<div class="fix-ad">
	<div class="fix-ad-box">
		要素
	</div>
	<div class="fix-ad-box">
		要素
	</div>
	<div class="fix-ad-box">
		要素
	</div>
</div>
<div class="fix-ad">
	<div class="fix-ad-box">
		要素
	</div>
	<div class="fix-ad-box">
		要素
	</div>
	<div class="fix-ad-box">
		要素
	</div>
</div>

細かく調整していくと、自分のブログに愛着がわくと思うのでぜひやってみてください。では。