【STINGER PLUS2(β)】PCアドセンスを横並びにする最も簡単な方法

STINGERのPCアドセンスを横に2個並べる、最も簡単な方法です。(当社比)

PCアドセンスとは

PCで閲覧したときに記事の下に2つ縦に並んでいる336pxの広告です。これを横並びに300pxの広告を2つ並べるのが今回の内容です。

縦に並べるとその分スクロールが増えます。かと言って広告を減らすのでは本末転倒です。そこで、右に余白を有効活用して少し小さめの広告を横に2つ並べて、スッキリさせようというわけです。

 

よく見かける方法

検索すると、この手のカスタマイズは結構ヒットします。

細かい修正内容は別として、よく見かけるパターンは以下の2つを修正する方法です。

  • st-ad-on.php
  • style.css

簡単にいうと、st-ad-on.phpの広告ウィジェット表示箇所にクラス付けをして、style.cssでそのクラスを指定して色々記述をするというかんじです。

この方法でも、実現可能ですが、もっと簡単な方法がありますので、ご紹介します。

 

もっと簡単な方法

実は、style.cssの修正だけでも実現できます。

/*media Queries タブレットサイズ(600px以上)
----------------------------------------------------*/
@media only screen and (min-width: 600px) {
	/*PCアドセンスを横並び*/
	.adbox:after {
		content: "";
		display: block;
		clear: both;
	}
	.adbox div {
 		float: left;
		margin-right: 20px;
		padding-top: 0!important;
		padding-bottom: 10px;
	}
	.adbox div:last-child {
		margin-right: 0px;
	}

/*-- ここまで --*/
}

 

修正後の広告です。

できるだけ、オリジナルのソースは弄りたくない方におすすめです。

 

 

コメントを残す

メールアドレスが公開されることはありません。