【初心者向け】CSSの編集なしでダブルレクタングルを実装する方法【コピペでOK】

ワンアップ

今回はブログ運営等で使用する広告配置のひとつダブルレクタングルについて紹介します

この記事を読むことで以下のことがわかります

本記事の内容

  • ダブルレクタングルについて
  • CSSの編集なしで実装する方法
  • ダブルレクタングルの注意点

それではさっそく内容に入っていきます

ダブルレクタングルとは?

ダブルレクタングルは簡単に言うと2つ横並びにされた広告です↓こんな感じです

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

ダブルレクタングルのサイズに指定はないのですがレイアウト的に最近では【336×280】の広告をふたつ並べるのが主流のようです。

ぴぃ子
ぴぃ子

通常の広告配置よりもクリック率が高くなることもあり、ダブルレクタングルを実装している人気ブロガーさんも数多くいます。

CSSの編集しなくてもダブルレクタングルは実装可能

ひよこ氏
ひよこ氏

広告のクリック率が上がるならばさっそくダブルレクタングルを実装したいです

ひよこ氏
ひよこ氏

できるだけ手軽に実装するにはどうしたらいいですか?

ぴぃ子
ぴぃ子

本来ならばダブルレクタングル実装にはCSSの編集が必須なのですが初心者の方には少し敷居が高いです

ぴぃ子
ぴぃ子

今回は誰でも手軽にダブルレクタングルを実装することを目的にしているためテーブルを使ったダブルレクタングルの方法を紹介します

以下HTMLのテーブルタグに広告コードを記載したうえで、ブログやサイト内の表示させたい場所に貼り付ければOKです

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

なお、広告コードの大きさですが【336×280】に設定をする必要があります

グーグルアドセンスを張る場合は【広告サイズ】をレスポンシブから【固定】に変更しサイズを手打ちしましょう

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

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

ぴぃ子
ぴぃ子

ダブルレクタングルは人気な広告配置ですが、気をつけなければならないことがあります。

ひよこ氏
ひよこ氏

何ですか?

ぴぃ子
ぴぃ子

ダブルレクタングルはあくまでPC用の広告配置であるということです。

スマホ表示の際はダブルレクタングルは画面が広告に埋め尽くされてしまうため、レイアウト的にもおすすめできません

サイトやブログを訪問してくれた方の視点かrた考えるとダブルレクタングルはPCのみで実装するのがおすすめです

「PCはダブルレクタングルで広告を2つ表示」「スマホはレクタングルの広告1つ表示」と表示を分ける場合こちらも本来ならばCSSの編集が必要になってしまいます。

しかし、最近は有料テーマ、無料テーマ問わずPCとスマホで広告表示を分ける機能が実装されているためCSSを編集する必要なしです

ひよこ氏
ひよこ氏

私が現在利用させていただいているワードプレスの無料テーマCocoon(コクーン)もPCとスマホで広告表示が分かれていました!

まとめ

今回は広告配置のダブルレクタングルについて紹介しました。

一概にダブルレクタングルでクリック率が上がるとは断言できませんが実際にダブルレクタングルを実装して成果を残している方もたくさんいらっしゃいます。

広告の配置に悩んでいる方はとりあえず実装してみるのものもありです。

そして何より広告のクリック率を一番左右するのは、サイト記事の内容です!

日々記事の内容を改善するという努力がとても大切ですね

スポンサーリンク
スポンサーリンク
ワンアップ
phiyokoをフォローする
スポンサーリンク
わたしの教科書

コメント

タイトルとURLをコピーしました