Simplicityの「投稿・固定ページ」にウィジェットのみでアドセンス広告を配置する設定例

Simplicity1.7.4にて、より手軽に広告を設定できるように広告専用ウィジェットを追加しました。

以下はその設定方法です。

Simplicity1.7.4から広告用ウィジェットを追加しました。 photo by Peter Kaminski 広告専用のウィジェッ...

Simplicity1.6.5以降、本文部分などに多くのウィジェットを追加しました。

これは、Google AdSenseのカスタムフィールドを個別に設定できるようにしたり、その他のサービスの広告を自由に設置するために追加したものです。

その後、「設定例などを書かなければ」とは思っていたのですが、いろいろやることがあったり、思いついた機能追加の方を優先して書いていませんでしたが、今回書いてみたいと思います。

photo by Robbie G1

スポンサーリンク

投稿・固定ページの広告配置例

今回ウィジェットを利用して、投稿ページ(固定ページでも可)に広告をセットします。

その広告配置の一例として、以下のようにセットしたいと思います。

パソコン表示時

パソコンでの広告配置は以下になります。

  • 投稿本文中(H2見出し手前)×1
  • 投稿本文下ダブルレクタングル×2

投稿ページの報告配置

(使いまわしの画像なので番号はあまり気にしないでください)

モバイル表示

モバイルでは、以下のように表示されます。

  • 投稿本文中(H2見出し手前)×1
  • 投稿本文下×1
  • 関連記事下×1

投稿ページモバイルの広告配置

設定準備

ウィジェットで広告の設定をする前に、「外観→カスタマイズ」にあるテーマカスタマイザーから以下の設定を行っておきます。

広告項目

「広告」項目にある「全ての広告を表示」のチェックを外しておきます。

2015-05-28_15h22_08

これは、広告が誤って多く表示されないためです。

レイアウト(全体・リスト)項目

「レイアウト(全体・リスト)」項目にある「完全レスポンシブデザインにする」のチェックを外します。

噛んでレスポンシブデザインをOFF

これは、今回行うダブルレクタングルの設定が、レスポンシブの邪魔をするからです。

完全レスポンシブサイトには、完全レスポンシブサイト用の設定をする必要があるかもしれません。

スタイルなどを設定すれば、完全レスポンシブでもいけるかもしれませんが、今回は割愛します。

ウィジェットで広告を配置する

ウィジェットで投稿ページに広告を配置するには、以下のように書きます。

固定ページでも同様に設定できます。

アドセンスのカスタムチャンネルの設定方法などは、また別の話なので割愛します。設定方法は「AdSense カスタムチャンネル」などで検索して、調べてください。

投稿本文中(固定ページ本文中)ウィジェット

「パソコン用テキストウィジェット」と「モバイル用テキストウィジェット」を1つずつ入れます。

投稿本文中ウィジェットエリアの広告設定

パソコン・モバイル用テキストウィジェットには、タイトルを入力しないでセットしてください。

テキストウィジェット設定

タイトルを入力すると、H4見出しが表示されてしまうので、以降のウィジェットでもセットしないでください。

パソコン用テキストウィジェット

パソコン用テキストウィジェットには、以下のように入力します。

<div class="ad-space">
  <div class="ad-label">スポンサーリンク</div>
  【本文中に貼り付ける336×280の広告コード】
</div>

基本的に、広告コードだけでも良いのですが、上記のようなdivラッパーで囲むことにより、カスタマイザーの「広告の中央寄せ」機能などが使えます。

モバイル用テキストウィジェット

モバイル用テキストウィジェットには以下のように貼り付けます。

<div class="ad-space">
  <div class="ad-label">スポンサーリンク</div>
  【本文中に貼り付ける300×250の広告コード】
</div>

投稿本文下(固定ページ本文下)ウィジェット

こちらも、「パソコン用テキストウィジェット」と「モバイル用テキストウィジェット」を一つずつ入れます。

投稿本文下ウィジェットエリアの広告設定

パソコン用テキストウィジェット

パソコン用テキストウィジェットには、以下のように入力します。

本文下は、ダブルレクタングルになるようにタグを設定します。

<div class="ad-space">
  <div class="ad-label">スポンサーリンク</div>
  <div class="ad-left ad-pc">
    【本文下右に貼り付ける336×280の広告コード】
  </div>
  <div class="ad-right ad-pc">
    【本文下左に貼り付ける336×280の広告コード】
  </div>
  <div class="clear"></div>
</div>

上記のように、広告コードが並ぶようにセットします。上のようにセットすると、Simplicityにデフォルトで設定されているのスタイルが効いてダブルレクタングルになります。

モバイル用テキストウィジェット

モバイル用テキストウィジェットには、以下のように入力します。

<div class="ad-space">
  <div class="ad-label">スポンサーリンク</div>
  【本文下に貼り付ける300×250の広告コード】
</div>

関連記事下ウィジェット(固定ページには無い)

ここまで、パソコン側の広告が3つ、モバイル用の広告が2つなので、モバイルは、関連記事下にも表示します。(ちなみに固定ページでは、関連記事がないので、2つ表示になります)

「モバイル用テキストウィジェット」を1つ入れます。

関連記事下ウィジェットエリアの広告設定

モバイル用テキストウィジェット

関連記事下のモバイル用テキストウィジェットには、以下のように入力します。

<div class="ad-space">
  <div class="ad-label">スポンサーリンク</div>
  【関連記事下に貼り付ける300×250の広告コード】
</div>

動作確認

テストページに、配置して表示してあります。

固定ページ設置例

投稿ページウィジェット広告テスト

※行っているテストにより、変わっている場合もあるかもしれません。

まとめ

このように、Simplicityでは、ウィジェットで、自由に広告を配置することができます。

ウィジェットを使うことで、Googleアドセンスに限らず、その他サービスの広告も、自由に貼り付けることができます。

また、ウィジェットの性質上、手軽に移動できるので効果の高い位置を、いろいろテストすることもできます。アイディア次第で、製作者が思いもしないような使い方もできるかと思います。

ということで、「カスタムチャンネルで広告配置の効果を測定したい」とか「アドセンスの隙間に他の広告もはさみたい」なんて方は、個別のウィジェット広告設定を是非試してみてください。

GitHubリポジトリ

不具合等ありましたらGitHubに、ご連絡いただけると幸いです。

yhira/simplicity2

スポンサーリンク
アドセンス(大)
アドセンス(大)

フォローする

スポンサーリンク
アドセンス(大)