MENU
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
あらゆるモノにHackする、探究者の読み物。
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
  1. ホーム
  2. アフィリエイト
  3. クリック率の高いアドセンス配置。ダブルレクタングルに代わるダブルレスポンシブを提案

クリック率の高いアドセンス配置。ダブルレクタングルに代わるダブルレスポンシブを提案

2023 2/02
アフィリエイト
2019-06-10 2023-02-02
クリック率の高いアドセンス配置。ダブルレクタングルに代わるダブルレスポンシブを提案

アドセンスの配置、悩みまよね。

どこに置けばいいのか?どの形がクリック率が高いのか?などなど、話し出すと付きません。

今回はデスクトップ用でクリック率が高いと言われている、「ダブルレクタングル配置」を改良した「ダブルレスポンシブ」配置を提案したいと思います。

目次

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

フルブラウザで、レクタングルのアドセンスを横並びにダブルで配置する布陣。

[cc id=2335]

これです。(スマホとかで見ている方は一つしか表示されていないと思います)

そもそもクリック率がイイと言われているレクタングルを横にダブルで表示させる豪華絢爛な広告配置。(しつこいとも言う)

ダブルレスポンシブとは?

こちらも上で紹介したダブルレクタングル配置と同じく、アドセンス広告を横に二つ横に並べます。

だた、違うのは中身がレスポンシブ広告である。と言う点です。

レスポンシブのアドセンスの何がイイかと言いますと、今のご時世、フルブラウザで見てくれる人ばっかりでもないわけです。

サイトのテーマにも寄るかと思いますが、訪問者の半分以上がスマホ、またはタブレット、なんてサイトも多いと思います。(当サイトはデスクトップ7割です)

勿論最近のワードプレスのテーマの多くはレスポンシブ表示に対応していますので、クライアントのブラウザの横幅に応じて中身のサイズが変化します。

そうなった時にレクタングル広告ではサイズが可変ではないため、表示崩れが起きてしまいます。

上がipad proで見た場合の「ダブルレクタングル」下が「ダブルレスポンシブ」配置です。

上の方は広告が少し重なってしまっているのが分かると思います。

さらに横幅が圧迫されるipadサイズでは上の写真のように、ダブルレクタングルではメインカラムを完全にはみ出してしまいます。

下側のダブルレスポンシブは綺麗に収まっていますね。

縦長バナーの横並びの是非についてはさておき(笑)

ダブルレスポンシブを作る

ダブルレスポンシブの配置の作り方を解説します。

アドセンス管理画面から広告ユニット作成

レスポンシブ広告のユニットを作成します。

アドセンスの管理画面左側のメニューから、「広告」→「広告ユニット」→「新しい広告ユニット」を選択して、ユニットの作成ウィザードに進みます。

テキスト広告とディスプレイ広告を選択して、レスポンシブユニットを作成します。

名前は管理画面でわかりやすいような名前を付けておけばなんでもOKです。

HTML

<div class="col2-wrap">
  <div class="col">
    <!-- ここに広告コードを貼り付け -->
  </div>
  <div class="col up480">
    <!-- ここに広告コードを貼り付け -->
  </div>
</div>

CSS

@media (max-width: 480px) {
  .up480 {
    display: none;
  }
}

@media (min-width: 480px) {
  .col {
    float: left;
    margin-bottom: 2%;
  }

  .col2-wrap>.col:nth-child(odd) {
    margin-right: 2%;
  }

  .col2-wrap>.col {
    width: 49%;
  }
}

.col2-wrap {
  margin: 0 0 1em;
}

.col {
  width: auto;
  margin-left: 0;
  background-color: transparent;
  text-align: -webkit-center;
  text-align: center;
}

お使いのテーマによっては多少マージンなどの調整が必要な可能性がありますが、これでレスポンシブの横並びが完成です。

ちなみにスマホ表示の時にアドセンス縦にダブルは流石にうっとおしいと思いますので、スクリーンの横幅が480px以下のデバイスでは二個目の広告を非表示にする調整をしています。

480pxの部分はテーマのブレークポイントに合わせて調整する方がいいかもしれません。

まとめ

クリック率が上がると言われているダブルレクタングルを一段階進化させた、ダブルレスポンシブを是非試してみてください。

こちらの記事もオススメです。

あわせて読みたい
【10秒で解決】スマホでアドセンスのレスポンシブが親要素をはみ出す時の解決法 アドセンスをスマホで表示したとき、親要素をはみ出してしまう現象、困りますよね。背景に特段設定のない白ベタのサイトなんかだと気にならないかもしれませんが、当サイトなどはメインコンテンツと背景の色が違うので、どうしても気になるので、修正してみました。
アフィリエイト
アドセンス
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする コメントをキャンセル

email confirm*

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
人気記事
  • IQテストいくつか受けてみました
    ネット上で信憑性がありそうなIQテスト、5種類まとめて受けた結果…
  • hayate
    メルカリの商品を世界最速で購入するためだけのアラートツール
  • 【Python】BeautifulSoupの使い方・基本メソッド一覧|スクレイピング
  • Pythonファイルのexe化
    【悲報】PyInstallerさん、300MBのexeファイルを吐き出すようになる
  • Amazon Echo アレクサのコマンドまとめ
    AmazonEchoの使い方とできる事、アレクサへの指示コマンド一覧
最近の投稿
  • PyQt5 QListWidget の item削除でtextBoxのフォーカスが奪われる2023-03-05
  • WordPressからのメールが届かない時の調査と解決法2023-02-27
  • 保護中: メルカリアラートツール「疾風」v22022-12-01
  • 保護中: メルカリアラートツール【疾風】カスタマイズオプション一覧2021-03-22
  • 保護中: メルカリアラートツール【疾風】インストール手順2021-03-22
目次
目次