Simplicityの便利機能ウィジェットを使って広告を収益性の高い位置に配置する方法

どーん(^o^)/

当サイトのWordPressのテーマは以前にも記事にしたように、「Simplicity」を使っています。

Simplicityは便利な機能が備わっていますが、その一つに様々な位置に広告などを配置できるウィジェット機能が大変便利です。

Simplicity1.6.5以降、本文部分などに多くのウィジェットを追加されています。当サイトは記事公開時ではSimplicity1.7.1で運用しています。

ウィジェットには広告を配置する使い方が主だと思います。

そこで、広告を個別ページ、固定ページ、インデックス（記事一覧）ページにおいて、収益性の高い位置と思われる場所に配置する方法をご紹介します。

※広告は全て自己責任にて設置してください。

追記：Simplicity1.7.4から広告専用ウィジェットが追加されました。その方法を「一期一笑ラボ」にて新しく書きましたのでこちらで広告を配置したほうがいいかと思います。ただし、当記事の広告配置のほうがクラス名などを自由に指定できるので、カスタマイズ性や自由度が高いです。

Simplicityの広告専用ウィジェットを使って広告を収益性の高い位置に配置する方法

どうも。ノッツです(^o^)/以前に、旧一期一笑ラボにて「Simplicityにおいてウィジェットを使って広告を配置する方法」について書きました。Simplicityのアップデートの頻度がとても早く、Simplicity1.7.4から広告専

ichigoichielab.com

はじめに

本題に入る前に伝えておきたいことが2点ありますので書いていきます。

Simplicityの公式サイト

Simplicityの公式サイトにもウィジェットを使った広告配置の方法が書かれているので、まずは公式サイトの方を見るほうがいいかと思います。

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

Simplicity1.7.4にて、より手軽に広告を設定できるように広告専用ウィジェットを追加しました。 以下はその設定方法です。 Simplicity1.6.5以降、本文部分などに多くのウィジェットを追加しました。 これは、Goo

wp-simplicity.com

しかし、そちらに載っていない配置方法もご説明しますので、その場合は当記事を参考にして頂ければと思います。

Simplicityの便利な広告配置

Simplicityには広告を収益性の高い位置に配置してくれる便利に機能が予め備わっていますので、こちらのほうが簡単に広告を配置できます。

使い方

「外観」→「カスタマイズ」→「広告」の中にある「全ての広告を表示」にチェックを入れます。

そして、「外観」→「ウィジェット」の中にある以下の写真のウィジェットに広告コードを入れるだけです。

デメリット

この方法で広告を導入すると簡単というメリットもありますが、デメリットがあります。

それは、AdSenseを上記のウィジェットに入れると、4つだけのコードを使ってそれぞれのページに広告を配置しているので、どこの広告がクリックされたのかが分からないということです。

ウィジェットを使う理由

このことからウィジェットを使った広告配置にすることにしたのです。

また、AdSenseのカスタムチャネル機能を使うことによって、個々の広告に対してどの広告がクリックされたのかが分かります。

カスタムチャネル機能については、割愛しますので、「AdSense カスタムチャンネル」などとググって他のサイトで調べてください。

さらに、ウィジェットを使うことによって、後から自由に広告をウィジェットエリアにおいて移動することができるので、ウィジェットを使った配置のほうが後々を考えると大変便利になってきます。

広告配置例

今回、ウィジェットを使って広告を配置する場所は以下の通りです。

この配置箇所は、記事公開時において当サイトは以下と同じ配置箇所となっておりますので参考にしてください。ただし、今後変更する可能性がありますのでご了承ください。

個別ページ

パソコン表示の場合

• 記事本文中（H2見出し手前）×1【336×280の広告】
• 記事本文下×2【336×280の広告】

モバイル表示の場合

• 記事本文中（H2見出し手前）×1【300×250の広告】
• 記事本文下×1【300×250の広告】
• 関連記事下×1【300×250の広告】

固定ページ

パソコン表示の場合

• 記事本文上×1【728×90の広告】
• 記事本文下×2【336×280の広告】

モバイル表示の場合

• 記事本文上×1【320×100の広告】
• 記事本文下×1【300×250の広告】

2つの広告しか配置しません。

記事本文中（H2見出し手前）に配置してもいいかもしれませんは、連続して広告が配置されユーザービリティが下がることを考え今回は2つにします。

記事本文上に300×250のAdSenseを設置するとポリシー違反になる可能性がありますのでご注意ください。

インデックスページ

パソコン表示の場合

• インデックスリスト中×1【336×280の広告】
• インデックスリスト下×2【336×280の広告】

インデックスリストミドルウィジェットを使い、3つ目と4つ目の間に広告を配置します。

モバイル表示の場合

• インデックスリスト上×1【320×100の広告】
• インデックスリスト中×1【300×250の広告】
• インデックスリスト下×1【300×250の広告】

パソコン表示の場合と同様に、インデックスリストミドルウィジェットを使い、3つ目と4つ目の間に広告を配置します。

インデックスリスト上に300×250のAdSenseを設置するとポリシー違反になる可能性がありますのでご注意ください。

インデックスリスト中とインデックスリスト下に広告を同時に配置する場合、記事が3つのみのページ（投稿記事が3つのみ、カテゴリーページやタグページなどで投稿記事が3つのみ、2ページ目以降の投稿記事が3つのみ、など）は、縦に連続して広告が2つ表示されます。AdSenseは、スマートフォンの1画面に2つ配置することはポリシーに違反する可能性があります。そのため、ここにAdSenseを配置する場合は注意が必要です。AdSenseを設置する場合は自己責任にて配置してください。

なお、当サイトは5つ以上の記事がないページには広告を表示させないようにカスタマイズしています。

設定準備

ウィジェットを使って広告を配置する場合は、確認しておくことがありますので書いておきます。

Simplicityの公式サイトにも記載されていますので、詳細はそちらでご確認ください。

広告項目

上記で説明したSimplicityの便利な広告配置を使い、広告をチェックしている場合は、余分に広告が配置されてしまうため、以下の画像のようにチェックを外しておきます。

レイアウト（全体・リスト）項目

以下の写真のチエックも外します。

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

ウィジェットで広告を配置する方法の基本的な流れ

ウィジェットで広告を配置する方法の基本的な流れを説明します。Simplicityの公式サイトの説明にそっています。

下記で説明する配置方法もこの流れで説明していきます。

ウィジェット画面を開くと、左側にたくさんのウィジェットがありますが、今回は「Simplicityバソコン用テキストウィジェット」と「Simplicityモバイル用テキストウィジェット」を使います。

上記ウィジェットを広告を配置したいウィジェットエリアに置きます。

例えば、投稿本文中にパソコン用とモバイル用の広告を表示させたい場合は以下のように設置します、

そして、各ウィジェットに対して入力していきます。

タイトル部分は空白にし（入力すると余分に表記されてしまいます）、その下の大きい空白部分に以下のソースを貼り付け、広告コードを貼り付けます。

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</div>
  【配置する広告コード】
</div>

広告コードだけでも良いのですが、<div>タグとその中にclass名を指定することで、Simplicityのカスタマイザーの「広告の中央寄せ」機能などのデフォルトの機能が使うことができますので、<div>タグを使うことをおすすめします。

この流れが、ウィジェットを使った広告配置の基本となります。

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

それでは、ウィジェットに広告を配置する方法を個別ページ、固定ページ、インデックスページに分けて説明していきます。

広告を配置したいウィジェットに下記コードを入力してください。

個別ページ

投稿本文中ウィジェット（パソコン、モバイル）

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

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

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</div>
 【個別ページ中に配置する336×280の広告コード】
</div>

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

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

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</div>
 【個別ページ中に配置する300×250の広告コード】
</div>

投稿本文下ウィジェット（パソコン、モバイル）

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

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

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</div>
 【個別ページ下左に配置する336×280の広告コード】
 【個別ページ下右に配置する336×280の広告コード】
</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>

関連記事下ウィジェット（モバイルのみ）

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

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

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

固定ページ

固定ページ本文上（パソコン、モバイル）

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

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

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</div>
 【固定ページ上に配置する728×90の広告コード】
</div>

ただ、この場合は、広告が右にずれてしまいます。

スタイルシートで調整するすればできますが、今回はSimplicityに用意されているclassを使用して位置を調整します。

その場合は以下のように入力します。

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</div>
  <div class="ad-top-pc">
  【固定ページ上に配置する728×90の広告コード】
  </div>
</div>

このようにすると中央に表示されます。

もし、スポンサーリンクという文字が気になる場合は、以下のようにclass名を追加すると消せます。

<div class="ad-space ad-space-top">
 <div class="ad-label">スポンサーリンク</div>
  <div class="ad-top-pc">
  【固定ページ上に配置する728×90の広告コード】
  </div>
</div>

もし、中央に配置されな場合は以下を確認してみてください。

カスタマイザーの「広告」の欄の以下のチェックを外します。

これで中央に配置されるかと思います。

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

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

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</div>
 【固定ページ上に配置する320×100の広告コード】
</div>

ただ、私が持っているモバイル端末で表示を確認したところ、iPhone6Plusでは正しく中央に表示されましたが、iPhone5の場合は以下のように広告が右にずれてしまいました。

ここもスタイルシートで調整すれば正しく中央に配置できますが、今回はパソコン用と同じようにSimplicityに用意されているclassを使用して位置を調整します。

その場合は以下のように入力します。

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</div>
  <div class="ad-top-mobile">
  【固定ページ上に配置する320×100の広告コード】
  </div>
</div>

このようにすると中央に表示されます。

もし、スポンサーリンクという文字が気になる場合は、以下のようにclass名を追加すると消せます。

<div class="ad-space ad-space-top">
 <div class="ad-label">スポンサーリンク</div>
  <div class="ad-top-mobile">
  【固定ページ上に配置する320×100の広告コード】
  </div>
</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>

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

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

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

インデックスページページ

インデックスリストトップ（モバイルのみ）

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

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

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</div>
  【インデックスリスト上に配置する320×100の広告コード】
</div>

固定ページと同様に、iPhone5では右にずれてしまうので、以下のようにします。

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</div>
  <div class="ad-top-mobile">
  【インデックスリスト上に配置する320×100の広告コード】
  </div>
</div>

そうすると中央に配置されます。

スポンサーリンクの記述が気になる場合は以下のようにして消します。

<div class="ad-space ad-space-top">
 <div class="ad-label">スポンサーリンク</div>
  <div class="ad-top-mobile">
  【インデックスリスト上に配置する320×100の広告コード】
  </div>
</div>

私の場合、広告の上の隙間が気になったので、以下のようにスタイルシートで調整しています。

#main #widget-index-top {
   margin-top: 0;
}

下の隙間もmargin-bottomで調整できますが、AdSenseの場合は下にあるリンクと近すぎるとポリシー違反になる可能性がありますのでご注意ください。

インデックスリストミドル（パソコン、モバイル）

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

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

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</div>
 【インデックスリスト中に配置する336×280の広告コード】
</div>

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

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

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</div>
  【インデックスリスト中に配置する320×100の広告コード】
</div>

ここにAdSenseを配置する場合は、上記注意事項を必ずお読みください。

インデックスリストボトム（パソコン、モバイル）

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

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

<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>

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

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

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</div>
 【インデックスリスト下に配置する300×250の広告コード】
</div>

さいごに

Simplicityでウィジェットを使った広告配置について説明してきました。

どこの位置に配置すると効率がいいのか、ウィジェットを使うことによって検証がしやすくなるかと思います。

今回の配置で、ポリシー違反がありましたらご指摘ください。

また、コードの表記ミスなどがありましたら教えていただければ幸いです。

今回の説明してきた配置箇所以外に配置する場合は、今回のコードを応用すれば対応できるかと思います。

もし、分からないことがございましたらコメントでお知らせください。分かる範囲で対応いたします。

Google AdSense 成功の法則 57

posted with ヨメレバ

染谷 昌利 ソーテック社 2014-07-19

Amazon

Kindle

楽天ブックス

7net

ブログ飯 個性を収入に変える生き方

posted with ヨメレバ

染谷 昌利 インプレスジャパン 2013-06-21

Amazon

Kindle

楽天ブックス

7net