アドセンスなどの広告を横に2つ並べて
表示することを「ダブルレクタングル」と言います。

ちなみにダブルレクタングルは「ダブル=2つ」
「レクタングル=長方形の広告」という意味です。

記事の下の方にアドセンス広告が
2つ並んでいるブログやサイトは多いですよね~!

 

この記事では「賢威7」で広告をダブルレクタングル表示する方法をご紹介します。
賢威でブログを作っている人は、ぜひ参考にしてみてください!

賢威7でダブルレクタングルを実現!

とりあえず、貼ってみよう

とにかく貼ってみなければ分かりません!
広告に見立てたダミー画像を2つ表示してみましょう。

 

dummydummy

 

う~んとりあえず貼ってみましたが…表示がおかしいですね。

確かに2つ横に並んでいるので
ダブルレクタングルといえばそうなのかもしれませんが…。

左右がぴったりくっついて変な感じがします。
これを調節してみましょう!

クラスで広告の位置を調節!

こういう時はクラスで左右の広告位置を
均等になるように修正してみましょう!

賢威7のテーマ編集→base.cssに以下のクラスを作ってみました。

/*ダブルレクタングル*/
.ad-left {
  float: left;/*左寄せ*/
  margin-left: 5px;/*左に5pxの余白*/
}
.ad-right {
  float: right;/*右寄せ*/
  margin-right: 5px;/*右に5pxの余白*/
}

 

これで広告の位置の指定はOKですね。
あとは表示したい広告のコードを作ったクラスで囲いましょう。

<span class="ad-left">

/*ここに左側に貼りたい広告コード*/

</span>

<span class="ad-right">

/*ここに右側に貼りたい広告コード*/

</span>

 

これでキレイに広告が左右に表示されるはずです!
早速さきほどの画像で実験してみましょう!

dummy dummy

 

おお!イイカンジにダブルレクタングルしてますよ!大成功ですね!

記事内容と重なったり、ずれてる!

dr2

広告と別のコンテンツが重なったり、表示がおかしいぞ!
という時は「section」クラスを使って広告の部分を区切ってあげましょう

幸い賢威には「section-in」というクラスがあるので、
それを利用させていただきましょう!

<div class="section-in">

<span class="ad-reft">
/*ここに広告のコード*/
</span>

/*一部省略!*/

</div>

 

dr01

左右の広告がちょびっとだけずれてる!という時は
先ほどの「span class=”ad-reft(ad-right)”」の部分を改行せずに一行にまとめましょう!

/*改行せずに一行で!*/
<span class="ad-reft"></span><span class="ad-right"></span>

 どうでしょうか?うまく出来ましたか?

ダブルレクタングルの注意点

スマホでこの記事を見ている方はお気づきかもしれませんが…。

今この状態のダブルレクタングルをスマホで見ると
横ではなく”縦”に2つ並んで表示されてしまいます。

 

実はアドセンス広告はスマホ表示する場合は、
広告が縦に2つ以上連続して表示するのを禁止しています!

スマホ画面一杯に広告が表示されていたら
スクロールする時に誤って広告をタップしてしまうからなんですね(・ω・;)

誤タップを誘発するような作りの広告表示はだめだよ!ということです。

 

せっかく賢威7でダブルレクタングルが出来たのにどうすればいいのか!?

心配しなくて大丈夫です。コチラの記事でスマホとPCで表示を切り替える方法を
解説しているので参考にしてみてください。

まとめ

賢威7でダブルレクタングルを表示する方法でした!

最近のWordPressテンプレートには広告のコードを貼り付けるだけで
勝手にダブルレクタングルで表示してくれる機能がついているものが多いですが…。

この方法なら広告の機能が付いていない賢威7や
その他のテンプレートでもダブルレクタングルが実現可能なんです!

賢威でダブルレクタングルしたいという方はぜひ、お試しあれ!!

The following two tabs change content below.
うたと
2014年11月から本格的にアフィリエイトを開始、Lureaで基礎を学ぶ。 初月で○万突破!という感じではなく、地道に少しずつコツコツと稼げるようになったタイプ。現在の月収はほったらかしでも約12,000~16,000ほどのクソザコ。 さらなる飛躍を求めてこのブログを立ち上げます。