初心者向けSTINGER8カスタマイズ CSSだけでダブルレクタングル大を横並び編

STINGER8 ロゴ

「俺、AdSenseの審査に通ったらSTINGER8をダブルレクタングルの横並びにするんだ…」

「それあかんやつや」というツッコミは置いといて、今回のエントリーではそんなささやかな希望を叶えられるようお手伝いしたい、という事で出来るだけ簡単な方法を使ってSTINGER8のダブルレクタングル横並びに挑戦してみました。

スポンサーリンク

横並びじゃなきゃ嫌だというこだわり派の為に

STINGER8のダブルレクタングルって縦並びなんですよね…作者さん曰く縦並びの方が収益的には効果が高いという事ですが、それでも横にしたいという拘りのある方も中にはいるんじゃないかと思うんですよね、私とか。

PHPのカスタマイズは無しの方向で

いつも初心者向けカスタマイズとか言っておきながら、あまり初心者の方に易しくない事ばかり書いていた気もしますので反省しました、海より深く反省しました、大事なことなので二回言いました。今日はなんと!

CSSをコピペするだけの簡単なお仕事です。

もちろんその分ムリヤリ感は否めませんが…それはそれで。

今回の修正内容に関して

今回の修正ではメインカラムの幅を42px広げる事になります。正確に言うとその親要素が左右に50pxもパディングを取っているので、それを21pxづつ狭くする事でメインカラムの幅を確保します。

もし、それでは困るという方は広告ユニットをレクタングル大(336 x 280)ではなく通常のレクタングル(300 x 250)にして下さい、何れにしてもCSSだけの対応で済みます。

テスト用のサイトにAdSenseを貼るわけにはいかないので、同じサイズの要素で擬似的に再現してみましたが、実際のイメージはこんな感じになるかと。

STINGER8をCSSだけでダブルレクタングル横並びに

それでは作業に入る前に今回の修正内容を確認しておきたいと思います。

メインカラムのマージンを調整

メインカラムのコンテンツ部分はデフォルトで640pxとなっていますので、レクタングル大を横並びにするには幅が足りないんじゃない?と思われるでしょう、だいじょうぶマイ・フレンド(古)マージンは後からCSSで調整します。

いや、これさっき上の方でそれっぽい事を書いたような…文章を継ぎ接ぎで書くとこうなりますよという悪い見本を残す意味であえてこのままにしておきます。

レクタングル大の幅が336pxでそれを2つ、その間に10pxのマージンを空けるには

336 × 2 + 10 = 682

という事で682pxになるように調整します。

先ほども少し触れましたが、レクタングル大ではなく通常のレクタングルを横並びにするだけならマージンの調整は不要になります。

スポンサーリンクの文言を追加

広告の上にスポンサーリンクの文言を追加するようにしました。広告の上下に適度なマージンがあって明らかに広告だとわかるようなら必須というわけでも無いので、この部分は各自の判断で省略していただいても構わないでしょう。

広告を横並び可能な時だけ横並びに

広告の横並びが可能な時は2つの広告を横並びに配置し、幅が狭くて収まらない時は縦並びになります。

広告の上下のマージンを微妙に調整

本来の仕様では常に縦並びになる事を想定して、2つ目の広告の前に10pxのパディングが入るようになっているので、それをムリヤリ打ち消すのではなく1つ目の広告をそれに合わせる方向で調整してみました。

あと、SNSボタンが少し近い気もするので、もう少しだけ離すようにしてあります。この辺は後からでも調整出来ますので、お好きな数値に設定していただければよろしいかと。

一部のタブレットで懸念される事項

私はタブレットを持っていないので実際に確認したわけではありませんが、恐らく「広告・Googleアドセンスのスマホ用」と「広告・スマホ用記事下のみ」の両方にウィジェットが設定されていると、解像度がそれなりにあるタブレットから見た場合、その2つの広告が横並びになってしまうのではないかと思われます。

とは言っても、その場合スマホでは広告が縦に2つ並んでいるはずですので(現在のGoogleポリシーではどうなのか判断が難しいですが、改定前は確実にアウトだったようです)さすがにその2つのウィジェットを同時に使っている人はいないだろうと思いますが…一応。

ダブルレクタングル横並び化を始めます

お待たせしました、それでは順番にいきましょう。

広告ウィジェットの設定

テキストウィジェットにレクタングル大(または通常のレクタングル)の広告タグをコピペして「広告・Googleアドセンス用336px」に配置するだけです。特別なタグやクラスセレクタを設定する必要はありません。

CSSの設定

テーマの編集からstyle.cssに記述するか、テーマのカスタマイザーから追加CSSに記述するかはおまかせしますが、以下の内容をコピペして保存して下さい。

※2017/2/25 追記
固定ページでは広告が表示されないのでスポンサーリンクの文言だけが表示されてしまっていました。現在は修正済みですがコピペされた方にはご迷惑をおかけして申し訳ありませんでした。
/* レクタングル大を使わない場合は削除 */
.st-main {
	padding: 30px 29px 30px;
}

/* スポンサーリンクの文言が不要な場合は削除 */
.type-post div.entry-content:after {
	content: "スポンサーリンク";
}

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

.adbox > div:first-child {
	margin-right: 10px;
	padding-top: 10px;
}

これで即反映されるはずですが、実際に確認する前にキュッシュを削除する事を忘れないようお願いいたします。

念願のダブルレクタングル横並び完成です

私なりに念入りに検証はしたつもりですが、もし不具合などありましたらお手数ですがコメントかお問い合わせフォームからご連絡をいただければ幸いです。

それでは、あなたのAdSenseライフがフォースと共にあらんことを…

スポンサーリンク
トップへ戻る