デジモノ大好き+

デジタルグッズ自腹レポ・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]

Stinger8のタイトルとキャッチフレーズはデフォルトだと左寄せになります。 style.cssに追記するだけ style.css に以下を追記。 #header-l { text-align: c …

ソネブロからワードプレスへ。

So-netで「デジモノ大好き」をやっていましたが、ワードプレスで再出発です。 何かと話題のSTINGER。 アフィリエイター向けの無料テーマとして有名ですが、さらにアフィリエイトに特化したAFFIN …

カテゴリーの表示を個性的にしてみた。 [WordPress]

カテゴリー表示はテーマそのままだとちょっと寂しいので、少し手を加えてみました。 今回手を加えたのは、style.cssとfunctions.php。 カテゴリーの親子関係の表示を調整。 style.c …

ソネットブログからWordPressへ引っ越してみた。

ブログのコンテンツ自体は、エクスポート機能を利用すれば問題ないけど、画像の引っ越しは結構やっかい。 忘備録として残しておきます。 ブログ引っ越しの流れを確認しておきましょう。 目次 コンテンツのエクス …

no image

STINGER8の幅を広げてみた。 [WordPress]

記事下広告のAdsenceをダブルレクタングルにしたかったので気持ち幅を広げてみました。 ただ単に広げればいいってもんでもないので、世間一般的なモニター解像度から目標となる幅を決めてみました。 国内に …