作業用メモ：WordPressテンプレート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>