ダブルレクタングルのCSSコード。3分で完了する簡単設定

目安時間:約 6分

ダブルレクタングルにする方法

「ダブルレクタングルにしたい」
「横並びにキレイに並べたい!」
「でも縦に並んだりズレたりする……」

そう、ダブルレクタングルって
他人のサイトを参考にしてやっても
なぜか上手くいかないんですよね。
 
私もさんざんいろいろ試してみて
ようやく「コレだ!」っていう
CSSのコードの設定を見つけました。

そこで今回は私が
グーグルアドセンスのレクタングル広告を

ダブルレクタングルにする方法を
分かりやすく紹介していきます。

ダブルレクタングルCSSコードとHTMLの設定方法

ダブルレクタングル やり方

で検索すると色んな人が色んな方法を
様々に紹介していますが

私が最終的にたどり着いたのが
こちらのシンプルなCSSコードと
HTMLの構成です。
 
まずWordPressや無料ブログのCSSに
以下のコードを貼り付けてください。

.wr {
margin:2em 0;
overflow: hidden;
}

.adleft {
margin-right: 20px;
float:left;
}

.adright {
float:left;
}

貼り付けたら忘れずに「保存」を。

広告配置の微調整

アドセンス広告の上下のスペースを
もう少し広げたり縮めたい場合は

.wrのmargin:2em 0;

の2emを5emにするとか
1emにするなどして調整可能です。

 
そして次にWordPressの
アドセンスのプラグインやphpなどに
以下のHTMLを貼り付けてください。

<div class="wr">
<div class="adleft">
※左のアドセンスコード※
</div>

<div class="adright">
※右のアドセンスコード※
</div>
</div>

その際に

※右のアドセンスコード※

と書かれたスペースに
右に表示したいアドセンスのコードを

※左のアドセンスコード※

と書かれたスペースには
左に表示したいアドセンスのコードを
それぞれ挿入してください。

完成形がコチラ。

香港3日間
香港3日間

 
 
なお左右のアドセンスコードは
別々に用意しても

左右共通に使いまわしても
どちらでもお好きなほうでOKです!

上下に重なってしまう……

この方法で設置しても
レクタングルが上下に重なってしまう場合は
ブログのカラムの横幅が狭いせいです。

レクタングル(大)を横に2つ並べる場合

336+336+20(広告間のスペース)=692

最低でも692pxの横幅が必要です。

テーブルでダブルレクタングルはダメ?

一部のサイトでは以下のような

<table>
<tr>
<td>アドセンスコード</td>
<td>アドセンスコード</td>
</tr>
</table>

「テーブルタグ」を使って
ダブルレクタングルを設置する方法が
紹介されています。

しかし本来、テーブルタグは
複数の項目を表にするためにあります。
 
ですからダブルレクタングルのために
テーブルタグを使うのは
HTMLのルールからすると間違いです。

スマホではダブルレクタングルはNG!

このようなダブルレクタングルは
あくまでPC表示のためにあります。

スマホでは画面の幅がせまく
ダブルレクタングルにすると
縦に2つ並んで表示されてしまいます。
 
そのような広告表示をすると
ポリシー違反になるため

スマホでは非表示にするか
シングルのレクタングルを表示するよう
設定しておく必要があります。

PCとスマホの表示を
切り分ける(切り替える)方法は
以下の記事で解説しています。

まとめ

ダブルレクタングルにするCSSの紹介と
設定方法をご紹介してきました。

現在は昔ほどは利用者が減ってきて
ダブルレクタングルは時代遅れ……
みたいな意見も聞かれます。
 
昔にはなかった
レスポンシブなどの
新しいアドセンス広告の形態が
続々登場していますからね。
 
しかし私のブログでは
まだまだ現役バリバリ!

しばらくはまだ使えると思いますよ。

この記事が気に入ったら
いいね ! しよう

【今だけ】アドセンスブログ(実物)を公開中

今ならメルマガに登録していただくと
そのメルマガ内にて

私が作ったアドセンスブログの実物(URL付き)

を限定公開しています。

また、特別に私も愛用中の
非常にクリック率が高い

FC2ブログとSeesaaブログ用の
アドセンス用テンプレート

もプレゼントいたします。

メルマガでは
アドセンスで単価が高いジャンルの探し方など
このブログでは書きにくいことも
包み隠さず暴露していますので
ぜひぜひ読んでみてください。

メルマガの登録や購読は
もちろんすべて「無料」です!

登録は下の登録フォームに

姓(名字)
名(名前)
メールアドレス

をご入力ください。

※姓・名ともハンドルネームなど
本名以外での登録でもかまいません。

↓↓↓↓↓↓↓↓↓↓↓↓

 メルマガへのお申し込みはこちらから









広告

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: 
広告
このブログを書いている人

・2010年10月よりアドセンスを開始

・2015年6月に1ブログで30万円超えを達成

くわしいプロフィールはこちら

最近の投稿
【必読】アドセンス初心者が知っておくべき知識10選
記事の検索はこちら
カテゴリー
タグ
お問い合わせはこちらから

聞いてみたいことがあれば、お気軽にメールをください!

ブログに投票をお願いします