【コピペでOK】ダブルレクタングルのやりかた!記事下にレクタングルを横並びにする方法をCSSなしで実現する

ダブルレクタングル 広告横並び やり方 CSSなし

こんにちは、きゃぷてんです。

ダブルレクタングルという広告配置をご存知でしょうか?

数値的なデータでもクリック率の高さが実証させれている配置方法であり、様々なサービス(Yahoo,Qiita・・・挙げたらキリがありません)で実装されているテクニックです。

1円でも多くの利益を追求する各種サービスで実装されているということで、クリック率の高さは折り紙つきというわけです。

本当は、ABテストをして広告配置の実験をするのが良いのですが、そんな時間はない!とか、めんどくせー!という場合は、良いものをパクってしまうのが手っ取り早く成果を出せます。

ダブルレクタングルとは

アフィ太郎くん
きゃぷてんさん、ダブルレクタングルって最近流行ってますよね!僕のブログでも実装してみたいのです。ただ、プログラミングがわからないので、WordPressをいじるのが怖いんですよね・・・
きゃぷてん
ダブルレクタングルを実装しようとして失敗した、なんて話はよく聞きますからね。この記事では初心者でもできるように一番簡単な方法をお伝えします!

 

そもそも、ダブルレクタングルとはなんぞや!?という人も多いと思います。

ダブルレクタングルってなんだかかっこいい名前ですし、難しい技術のようなイメージがあるかもしれません。ただ、このように説明するとしっくりくると思います。

ダブルレクタングルとは、正方形に近い形状の広告を横に2つ並べること

百聞は一見にしかずということで、下の画像を見てください。

ダブルレクタングル 広告横並び やり方 CSSなし

普段からネットサーフィンをするのであれば、必ず見たことがある広告の配置だと思います。

これがダブルレクタングルです。

豆知識

ダブルレクタングル = double(2つ)-rectangle(長方形)

ちなみに、よく使われる広告サイズは「336×280」です。ぎりぎり正方形ではありません。

以前は「300×250」がよく使われていましたが、各種デバイスの画面サイズが大きくなったこと、ブログレイアウトの流行(画面いっぱいに表示など)により、広告を表示できる領域が広がりました。

それを受けて、以前の「300×250」だと「ちょっと小さい」「目立たない」故に「クリックされない」という理由から「336×280」というサイズが主流になりました。

この配置(ダブルレクタングル)を実装するサービスがどんどん増えているので、クリック率の高さを証明していると考えていいでしょう。

ただ実際のところは、記事の内容やサイトの雰囲気等で広告のクリック率は左右されるので、一概に「この配置(ダブルレクタングル)が最強!」と断言することはできません。

しかしながら、多くのサービスで実装され結果も残している広告配置なので、あなたのサイトやブログにも実装する価値はあります。

広告のABテストとか、実験とかめんどくせーよ!

そのように感じるのであれば、とりあえずダブルレクタングルをパクってみて、クリック率がよければそのまま残せばいいし、クリック率が悪ければ以前の広告配置に戻せばいいですね。

CSSをいじらなくても実装は可能

さてさて、ダブルレクタングルを実装しようと調べていると、大体はプログラマーの技術系ブログにたどり着くと思います。

そうなると、「いかに綺麗に」とか「いかにかっこよく」というプログラマーどうしの対決でもしているかのように、凝った設定方法が記事になっています。

しかしながら、求めていることってそこじゃないですよね。

ブログ初心者という目線で考えた場合に重要になるのは以下の点ではないでしょか?

  • とにかく設定が簡単なこと
  • とりあえず見た目がちゃんとしていること

だとすれば、CSSを編集したり凝ったものを作る必要はありません。

HTMLのテーブルタグに広告のコード記載し、それをブログの表示させたい場所に貼り付ければいいのです。

<table>
<tbody>
<tr>
<td>表示させたい広告のコード</td>
<td>表示させたい広告のコード</td>
</tr>
</tbody>
</table>

するとこんな感じでダブルレクタングルが完成します。

ダブルレクタングル 広告横並び やり方 CSSなし

最後に

ダブルレクタングルは非常にクリック率が高い広告の配置と言われていますが、それは検索ユーザーがPCだった場合です。

スマホ相手にダブルレクタングルをやった場合、画面が広告で埋め尽くされるので、ユーザビリティとしては最悪です。嫌悪感を抱く人もいるでしょう。

ちなみに、スマホ画面を広告で埋め尽くす行為ですが、以前はアドセンス規約違反となっていましたが、今は規約の改定によりセーフとなっています。

やること自体はセーフなのですが、ユーザーのことを考えると「PCはダブルレクタングル」で「スマホはレクタングル1つ」というように表示を分けるのがいいと思います。(僕の運営しているアドセンスブログはそうしてます)

すると、結局CSSが必要になってしまうのが悩ましいところですね。

ただ、最近のテンプレート(有料・無料問わず)では、スマホとPCで広告の表示を分ける機能が実装されているものが多いので、そこまで悩む必要はありませんが。

ダブルレクタングル 広告横並び やり方 CSSなし

あなたのシェアが僕の笑顔の源です

コメントを残す

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

ABOUTこの記事をかいた人

きゃぷてん

アフィリエイトは副業でやってます。「まったり自由に生きる」がモットーなのでブログ名をliberty-life-blogにしました。 <趣味> 汚い居酒屋探し、フットサル、お散歩、筋トレ <特技> 足首を無限にポキポキ鳴らせます。