STINGER5の記事下に設置されたアドセンスを横並びのダブルレクタングルに変更する方法。

Google Adsence

photo credit: keso via photopin cc

前回の記事でSTINGER5のサイドバーのカスタマイズ方法を書きました。

サイドバーから始めよう!STINGER5の導入と同時にカスタマイズしたところとその方法。
先日、BloggerからWordPress+STINGER5に引越しましたが、その数日後にBloggerが落ちて閲覧できなくなるという事態が発生。 改めてWordPress...

一通りカスタマイズを終えた後、どうしても気になったのが記事下にあるアドセンスの配置。

2つのアドセンスを縦に積み上げるデフォルトの状態でも良かったのですが、同じサイズのアドセンスを2つ横並びにするダブルレクタングルに変更したのでその方法を紹介します。

デフォルトのSTINGER5では記事下にあるアドセンス(336×280px)は縦に二つ配置されています。STINGER5の製作者・ENJIさん(@ENJILOG)によるとこの配置が最も効果が高いとのことなのでそのままでも良かったのですが、実験も兼ねてアドセンスを横並びにする”ダブルレクタングル”に変更しました。

なお、336×280pxのアドセンスを横に並べると記事部分の幅が広くなりすぎて文字の折り返しまでが長くなってしまうので、アドセンスのサイズは300×250pxに変更します。

それでは、変更作業を順を追って説明しましょう。

1.アドセンスを横並びにするためSTINGER5の記事部分の横幅を変更する

STINGER5のデフォルトのレイアウトがこちら。

stinger5_layout_1

記事部分の横幅が580pxしかなく、そのままだと300×250pxのアドセンスを横並びにすることができないので横幅を600px以上に広げる必要があります。

さらにアドセンス同士がぴったりと隣接しないようにアドセンス間の余白を10px取りたいのでSTINGER5のレイアウトを以下のように変更します。

stinger5_layout_2

  • 記事部分の幅:610px(うち10pxがアドセンス間の余白)
  • 記事部分の左右のパディング:片側40px(合計80px)
  • サイドバーの幅:300px
  • 記事部分とサイドバー間の余白:20px

でコンテンツ全体の幅の合計が1010pxとなるのでstyle.css内の985行目あたりにある

 のmax-widthを1010pxに変更します。

 これで記事部分の横幅を広げる作業は終了です。

2.STINGER5のCSSファイルを変更してアドセンスを横並びにする

アドセンスを横並びにする方法として左側のアドセンスをfloat: left、右側のアドセンスをfloat: rightで左右に振り分けることにしたのでstyle.cssファイル内に以下を追記します。

さらに、2つのアドセンスをfloatさせたことで高さを失ってしまい追従する要素(僕のブログの場合はSNSボタン)がせり上がってしまうので2つのアドセンスをdiv要素で内包し、クラス名を「gad」として250pxの高さを指定して高さを維持します。

 3.PHPファイルを修正してSTINGER5の記事下に2つのアドセンスを表示させる

single.php内の52行目あたりにあるアドセンスのコードを読み込んでいる部分を

から

に変更します。 これでアドセンスが横並びになりました。

アドセンスの配置方法による効果の違いは諸説あるようですし、当然ブログによっても効果は異なると思うので、いろいろな配置を試してみて一番効果が出るパターンを見つけ出せるかが重要です。

今回のようにレイアウト変更を経験しておくことでカスタマイズの幅が広がると思うのでぜひトライしてみてください。

2 Comments

takuroooon

@ZOROLOGさん

はじめまして。
最近、stinger5にてブログを始めたのですが、アドセンスを記事下に並列配置したく、悪戦苦闘しているところ、貴方HPにたどり着きました。
大変わかりやすい説明で助かっておりますが、一点教えて頂きたい点がございます。

”アドセンスを横並びにする方法として左側のアドセンスをfloat: left、右側のアドセンスをfloat: rightで左右に振り分けることにしたのでstyle.cssファイル内に以下を追記します。”

とありますが、style.cssファイル内のどちら(どの部分、何行目くらい?)に以下を追記をすればよろしいものでしょうか?

/*記事下 左側のアドセンス*/
.gadLeft {
 float: left;
}

/*記事下 右側のアドセンス*/
.gadRight {
 float: right;
}

/*記事下 アドセンスの高さを維持*/
.gad {
 height: 250px;
}

なにぶんド素人でトンチンカンな質問かもしれませんが、ご教示頂けると幸いです。。

返信する
ZORO ZORO

takuroooonさん

こんにちは。ご質問ありがとうございます。
ブログ記事が少しでもお役に立ててうれしいです。

ご質問の回答ですが、僕は300行目あたりに追記しています。
Stinger5はレスポンシブなので閲覧するデバイスの横幅を判定し、
メディアクエリで以下のように適用するCSSを変化させています。

@media only screen and (max-width: 780px)=スマホとタブレットに適用
@media only screen and (min-width: 380px)=タブレットとPCに適用
@media only screen and (min-width: 780px)=PCに適用

上記以外(僕が記述した300行目あたりも)はすべてのデバイスに適用されますが、ブログ記事の「3.アドセンスを読み込んでいるPHPファイルを修正する」で
2つのアドセンスを表示させるタグはPCで閲覧された場合にしか書き出さないようにsingle.phpを修正されたと思いますので、スマホやタブレットの表示に影響を与えることはありません。

※PCに適用する領域(min-width: 780px)に追記しても問題ないかと思いますので、ご自身でカスタマイズされる際に分かりやすい位置へ追記すれば問題ないかと思います。

Stingerのカスタマイズは慣れればそんなに難しくないと思いますのでいろいろとトライしてみてください。

宜しくお願いします!

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です