Stinger8記事下のアドセンス広告を横並びにしてみた。 [WordPress]

Stinger8デフォルトのままアドセンスの記事下広告を入れると縦に2つ並んでしまうので、横並びにしてみました。

横並びするためには

まずは、サイト幅を広げないとです。

というのもデフォルトのサイズは、

なのでアドセンスを横並びさせることができないので、幅を1100pxに広げます。

ギリ横並びになりますが、もう少し左右のスペースが欲しいので、左右のpaddingを50pxから30pxに変更。

今回は、style.cssとst-ad-on.phpを編集します。

style.cssに追記

位置調整に関するstyle.cssの差分はこんな感じです。

.adbox {
	margin: 0;
    padding: 5px 0 40px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.adbox > div:first-child {
    margin: 0 auto;
    padding-top: 0px;
}

.adbox > div:last-child {
    margin: 0 auto;
    padding-top: 0px;
}

広告の宣言を追加

st-ad-on.phpのadboxの上に1行追加。

<div class="adtxt">スポンサーリンク</div>

<div class="adbox">

文言をセンタリングしたいので、style.cssに追記。

.adtxt {
	padding-top: 35px;
	text-align: center
}