デジモノ大好き+

デジタルグッズ自腹レポ・Wordpress関連。+ バツ1おっさんのライフハック。

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

投稿日:2018年8月14日 更新日:

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

横並びするためには

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

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

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

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

サイトの幅の広げ方に関しては「STINGER8の幅を広げてみた。 [WordPress]」を参考にどーぞ。

今回は、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
}

テーマをいじる場合は、必ずバックアップをとり、自己責任で作業してください。
また、子テーマで作業するのが望ましいです。

↓こんな感じになります。
スポンサーリンク

-WordPress
-, , , ,

関連記事

no image

STINGER8の執筆者とコメントを非表示にしてみた。 [WordPress]

スパムが多いので、コメント欄を非表示にしてみた。 STINGER5は、CSSで非表示にできたんですけど、STINGER8はPHPをいじります。 single.php にある 執筆者: にコメントアウト …

Stinger8サムネイル画像を大きくして、スマホのレイアウト調整してみた。 [WordPress]

Stinger8のサムネイル画像のサイズは、100×100pxと小さくアイキャッチとしてはちょっと弱いので少し大きくしてみました。 そのままだとスマホのレイアウトが崩れてしまうのでそちらも調整。 今回 …

Stinger8ページナビ「PREV」「NEXT」をカスタマイズしてみた。 [WordPress]

関連記事直下にある「PREV」「NEXT」を削除や非表示してるところもあるけど、サイト内リンクを削除してしまうのはもったいない。 せっかくなので、触ってもらえるようにカスタマイズしてみました。 今回手 …

Stinger8のページトップボタンを目立たせてみた。 [WordPress]

主張が強すぎるのもなんですが、あまりにも目立ってないので手を加えてみました。 ↑右端にあるこれね。 (わかりずらいので、囲ってみました。) style.cssを変更 差分はこんな感じです。 #page …

Stinger8パンくずリストをおしゃれにカスタマイズしてみた。 [WordPress]

ナビゲーション系のカスタマイズ連投になりますが、今回はパンくずリストです。 デフォルトは色が薄く目立たないので、アイコンを付けたり、hoverで色付けしたりとちょこっと目立たせています。 今回はいつも …