ご訪問ありがとうございます。どうぞごゆっくりお過ごしくださいませ。

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

カスタマイズ
By: kate hiscock
2015.07.03
この記事は約18分で読めます。

どうも。ノッツです(^o^)/

以前に、旧一期一笑ラボにて「Simplicityにおいてウィジェットを使って広告を配置する方法」について書きました。

Simplicityの便利機能ウィジェットを使って広告を収益性の高い位置に配置する方法
どーん(^o^)/当サイトのWordPressのテーマは以前にも記事にしたように、「Simplicity」を使っています。Simplicityは便利な機能が備わっていますが、その一つに様々な位置に広告などを配置できるウィジェット機能が大変便
yukiohno.com

Simplicityのアップデートの頻度がとても早く、Simplicity1.7.4から広告専用ウィジェットが追加されています。

そこで、広告専用ウィジェットを使って、広告を個別ページ、固定ページ、インデックス（記事一覧）ページに、収益性が高いと思われる場所に配置してみました。

広告専用ウィジェットを使った広告の配置方法を説明していこうと思います。

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

Photo by kate hiscock

スポンサーリンク
スポンサーリンク

はじめに

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

Simplicityの公式サイトを参照

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

Simplicity広告用ウィジェットの設定方法
Simplicity1.7.4から広告用ウィジェットを追加しました。 photo by Peter Kaminski 広告専用のウィジェット 今回追加した広告ウィジェットの特徴として、テーマカスタマイザーの以下の設定をウィジェットにも反映
wp-simplicity.com

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

スポンサーリンク

Simplicityで広告配置を配置する方法

Simplicityでは、広告を配置する方法が主に3つあります。

超簡単広告配置機能

広告コードを2〜4つほどコピペするだけであっという間に広告を配置できる機能があります。

コピペするだけで広告を収益性の高い位置に配置してくれるので、簡単にすぐに広告を配置できます。

配置方法

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

all_koukoku_check

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

広告コードをそのまま入力するだけで、<div>タグやクラス名などを気にする必要はありません。

koukoku_kantan

デメリット

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

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

パソコンorモバイル用テキストウェジェットを使った方法

これはパソコン用テキストウェジェットやモバイル用テキストウェジェットを使って広告を配置します。

配置方法

この配置方法については、以前に旧一期一笑ラボで書いた「Simplicityの便利機能ウィジェットを使って広告を収益性の高い位置に配置する方法」にて詳しく書いてありますのでご覧ください。

デメリット

ウェジェットごとに広告コードを記載できるので、AdSenseのカスタムチャンネルを使えばどこの広告がクリックされたのかを確認できます。

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

しかし、この広告の配置方法には、広告コードを記載する際に少々面倒くさいというデメリットがあります。

Simplicityのカスタマイザーの「広告の中央寄せ」機能などのデフォルトの機能が使うためには以下のようにタグを入力する必要があることです。

<div class="ad-space">
 <div class="ad-label">スポンサーリンク</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>

だたし、この方法はクラス名などを自由に指定できるので、カスタマイズ性や自由度が高いです。

そのため、自由にカスタマイズしたい場合はこちらを利用するといいと言えます。

広告専用ウィジェットを使った方法

今回説明する広告配置する方法の内容です。この広告配置方法については以下で詳しく説明していきます。

上記のデメリットを解決する方法で、もう最強です 笑

ウェジェットを使うので、AdSenseのカスタムチャネルでクリックされた広告が分かります。

また、後から自由に広告をウィジェットエリアにおいて移動することができるので、メンテナンス性が大変高いです。

さらに、上記の「パソコンorモバイル用テキストウェジェットを使った方法」のようにタグを打ち込む必要はありません。

さらに、さらに、カスタマイザーの「広告」の項目にある以下の設定をウィジェットにも反映させることができます。

  • 広告の表示
  • 広告のラベル
  • 広告の中央表示
  • 広告除外記事
  • 広告除外カテゴリ

広告配置例

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

モバイル表示の場合はサイドバーの位置にも広告を配置していますが、今回の記事を参考にすればできると思うのでその説明は割愛します。

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

追記（2015.07.29）：
モバイル表示でAdSenseの「300×250 レクタングル広告」を「自動サイズ レスポンシブ広告」に変更しました。

追記（2015.09.09）：
モバイル表示でAdSenseの「320×100 ラージモバイルバナー広告」を「自動サイズ レスポンシブ広告」に変更しました。

個別ページ

個別ページは以下のように広告を配置します。

パソコン表示の場合

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

PC_honbun

モバイル表示の場合

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

SP_honbun

AdSenseは1ページに3つまでの配置とポリシーで決まっているので注意してください。

なお、当サイトはモバイル専用広告「nend」を利用しています。

ちなみに、nendはAdsenseほどまではいきませんが、他のクリック型広告サービスよりも報酬が高いと言われています。

また、スマートフォン向け広告に特化されているので高パフォーマンスが期待できます。

固定ページ

固定ページは以下のように広告を配置します。

パソコン表示の場合

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

PC_kotei

モバイル表示の場合

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

SP_kotei

2つの広告のみの配置です。

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

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

インデックスページ

インデックスページは以下のように広告を配置します。

パソコン表示の場合

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

PC_index

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

モバイル表示の場合

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

SP_index

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

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

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

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

設定準備

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

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

以下の写真のチェックを外します。

ダブルレクタングルの設定が、レスポンシブの邪魔をする可能性があるからです。

responsive_layout

広告項目

以下のよう「広告」の項目の中にある「全ての広告を表示」にチェックをします。

筆者はこれではまりました。

ここでチェックを入れておかないと広告専用ウェジェットを使っても広告が配置されません。

プラグインの相性が原因かと最初は考え、もういろいろと大変でした 苦笑

all_koukoku

余分な広告

上記で説明した「超簡単広告配置機能」を使って広告を配置していた場合、上記の項目の「全ての広告を表示」にチェックをいれると、余分に広告が配置されてしまいます。

そのため、以下のウェジェットエリアに広告を配置している場合は配置しているウィジェットを削除します。

koukoku_kantan

その他確認項目

ここの項目はどちらでもいいですが、以下のようにチェックを外しておくことをおすすめします。

チェックを入れていると、余分にhtmlタグが挿入されて余分にスペースができてしまうためです。

ただし、「広告を中央表示」と「PC表示のダブルレクタングルを…」はこれに関係しませんので任意に選択してください。

koukoku_kakunin

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

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

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

ウィジェット画面を開くと、左側にたくさんのウィジェットがありますが、「[S]パソコン用広告ウィジェット」と、「[S]パソコン用広告ダブルレクタングウィジェット」、「[S]モバイル用広告ウィジェット」を使います。

  • [S]パソコン用広告ウィジェット・・・パソコンのみ表示される広告ウェジェット
  • [S]パソコン用広告ダブルレクタングウィジェット・・・パソコンのみ表示されるダブルレクタングル（左右に広告を表示）用の広告ウェジェット
  • [S]モバイル用広告ウィジェット・・・モバイルのみ表示される広告ウェジェット

koukoku_widget

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

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

honbun_middle

そして、各ウィジェットに対して広告コードを「広告タグ」の欄に入力していきます。

この際、広告コードをそのまま入力するのみで、<div>タグやクラス名などを入力する必要がありません。

広告を一つだけ配置したい場合は以下のウィジェットを使います。

pc_widgetsp_widget

記事下など広告を左右に横に並べたい場合は以下のウェジェットを使います。

pc_widget_double

左マージンをウェジェットから設定でき、「左マージンのピクセル数（-指定で左に移動）」を指定すると、広告を左右に移動できます。

「広告除外設定の適用」の「カスタマイザーの広告除外設定を適用する」にチェックを入れておくと、カスタマイザーから特定の記事のみ広告を非表示にすることができます。

広告除外の説明については、以下で詳しく説明しています。

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

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

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

説明と言いましても、基本は広告コードをそのままコピペするだけです。

手こずらないところは簡単に書いていきます。

個別ページ

個別ページに広告を配置する方法です。

この例のモバイル広告ウェジェットの場合に、AdSenseを4つ配置する場合はポリシー違反となりますのでご注意ください。

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

honbun_middle

投稿本文中ウェジェットエリアに「パソコン用広告ウェジェット」と「モバイル広告ウェジェット」を用意して広告コードをコピペします。

投稿本文下パソコン、モバイル）

honbun_bottom

投稿本文したウェジェットエリアに「パソコン用広告ダブルレクタングルウェジェット」と「モバイル広告ウェジェット」を用意して広告コードをコピペします。

パソコン用広告ダブルレクタングルウェジェットは、左に配置したい広告を「広告タグ（左）」に、右に配置したい広告を「広告タグ（右）」にコピペします。

投稿SNSボタン下（モバイル）

sns_bottom

投稿SNSボタン下ウェジェットエリアに「モバイル広告ウェジェット」を用意して広告コードをコピペします。

関連記事下（モバイルのみ）

kanren_bottom

関連記事下ウェジェットエリアに「モバイル広告ウェジェット」を用意して広告コードをコピペします。

固定ページ

固定ページに広告を配置する方法です。

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

kotei_top

固定ページ本文上ウェジェットエリアに「パソコン用広告ウェジェット」と「モバイル広告ウェジェット」を用意して広告コードをコピペします。

パソコン用広告ウェジェット

固定ページ本文上のパソコン用広告ウェジェットに、広告コードをコピペすると以下のように広告がはみ出ます。

pc_kotei_top1

そのため各ウェジェットにある「左マージンのピクセル数」に「-24」と入力します。

koukoku_margin

-24がちょうど中央にくると思います。

pc_kotei_top2

私はトップにスポンサーリンクという文字があるのは気になったので、以下のようにスタイルシートに入力して消しています。

#widget-over-page-article .ad-label {
  display: none;
}

もし、パソコンの時だけスポンサーリンクを消したい場合は、以下のように入力すると消えるかと思います。

#widget-over-page-article .pc_ad .ad-label {
  display: none;
}

私がスポンサーリンクを消した箇所しか説明しませんが、ウェジェットのid名を指定して、.ad-labelで消すことができます。

id名はこの場合、<div id=”widget-over-page-article”>の””の間のところです。

pc_kotei_top3

スポンサーリンクという文字はカスタマイザーの「広告」項目にある以下から変更できます。

label

なお、本文中に広告を配置する場合「スポンサーリンク」や「広告」などの文言がないとアドセンスでは、ポリシー違反になる可能性がありますのでご注意ください。

モバイル広告ウェジェット

固定ページ本文上のモバイル広告ウェジェットに、広告コードをコピペするとiPhone5の画面サイズの場合、以下のように広告がはみ出ます。

sp_kotei_top1

そのため、パソコン用広告ウェジェットと同じように「左マージンのピクセル数」に「-10」と入力します。

koukoku_margin

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

sp_kotei_top2

また、私はトップにスポンサーリンクという文字があるのは気になったので、以下のようにスタイルシートに入力して消しています。

#widget-over-page-article .ad-label {
  display: none;
}

もし、モバイルの時だけスポンサーリンクを消したい場合は、以下のように入力すると消えるかと思います。

#widget-over-page-article .mobile_ad .ad-label {
  display: none;
}

sp_kotei_top3

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

#main .widgetsがなくても機能するかと思ったのですが、この記述がないと正しく隙間が調整できなかったので記述しています。

#main .widgets {
  margin-top: 0; 
  margin-bottom: 0;
}

#widget-over-page-article .ad-space {
  margin-top: 0; 
  margin-bottom: 15px;
}

sp_kotei_top4

なお、左マージンのピクセル数から指定した場合、iPhone6Plusなどの大きいモバイル端末では数ピクセル（-10pxと指定したので10px）中央からずれていました。

sp_kotei_top_margin1

気にならなければ問題ありませんが、筆者は気になってしまったのでCSSで指定する方法に変えました。数ピクセルの違いなので分からないかもしれません。

上で「-10」と入力した箇所を「0」に戻し、スタイルシートに以下のように入力しました。

#widget-over-page-article .ad-mobile {
  margin-left: -10px;
  margin-right: -10px;
}

これでiPhone5とiPhone6Plusで中央に表示されます。他の端末も恐らく大丈夫だと思います。

sp_kotei_top_margin2

 

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

kotei_bottom

固定ページ本文下ウェジェットエリアに「パソコン用広告ダブルレクタングルウェジェット」と「モバイル広告ウェジェット」に広告コードをコピペします

インデックスページ

インデックスページに広告を配置する方法です。

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

index_top

インデックスリストトップウェジェットエリアに「モバイル広告ウェジェット」に広告コードをコピペします。

ここに広告コードをコピペするとiPhone5の画面サイズの場合、固定ページと同じように広告がはみ出ます。

sp_index_top1

そのため、「左マージンのピクセル数」に「-10」と入力します。

koukoku_margin

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

sp_index_top2

 

私はトップにスポンサーリンクという文字があるのは気になったので、以下のようにスタイルシートに入力して消しています。

#widget-index-top .ad-label {
  display: none;
}

sp_index_top3

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

#main .widgetsがなくても機能するかと思ったのですが、この記述がないと正しく隙間が調整できなかったので記述しています。

#main .widgets {
  margin-top: 0; 
  margin-bottom: 0;
}

#widget-index-top .ad-space {
  margin-top: 0; 
  margin-bottom: 15px;
}

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

sp_index_top4

なお、固定ページの本文上と同様に、左マージンのピクセル数から指定した場合、iPhone6Plusなどの大きいモバイル端末では数ピクセル（-10pxと指定したので10px）中央からずれていました。

sp_index_top_margin1

 

気にならなければ問題ありませんが、筆者は気になってしまったのでCSSで指定する方法に変えました。数ピクセルの違いなので分からないかもしれません。

上で「-10」と入力した箇所を「0」に戻し、スタイルシートに以下のように入力しました。

#widget-index-top .ad-mobile {
  margin-left: -10px;
  margin-right: -10px;
}

これでiPhone5とiPhone6Plusで中央に表示されます。他の端末も恐らく大丈夫だと思います。

sp_index_top_margin2

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

index_middle

インデックスリストミドルウェジェットエリアに「パソコン用広告ウェジェット」と「モバイル広告ウェジェット」に広告コードをコピペします。

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

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

index-bottom

インデックスリストボトムウェジェットエリアに「パソコン用広告ダブルレクタングルウェジェット」と「モバイル広告ウェジェット」に広告コードをコピペします

広告除外機能の使い方

カスタマイザーから特定の記事のみに対して広告を非表示にできる機能があるので説明します。

ポリシー違反になる可能性がある記事を書くときに活用できる機能だと思います。

また、ポリシー違反になりそうなジャンルは、カテゴリでまとめて除外するといった利用もできます。

Simplicityの公式サイトにも書かれていますので合わせてご覧ください。

Simplicityで広告を非表示にするページを設定する方法
Simplicity1.7.3にて広告を非表示にできるページを設定できる機能を追加しました。 これは主に、AdSense プログラム ポリシー違反になるような記事に広告を表示しないようにして、広告停止を防ぐための機能になります。 広告を非
wp-simplicity.com

広告除外機能をするための確認

広告除外機能を使うためには、広告を消したい広告専用ウェジェットに対して「広告除外設定の適用」の「カスタマイザーの広告除外設定を適用する」にチェックを入れます（初期設定ではチェックが入っている状態です）。

除外する必要のないアドセンス以外の広告を貼り付けるときなど、除外する必要のないウェジェットの場合はチェックを外します。

jyogai_setting

記事の指定

カスタマイザーの広告の項目にある「広告除外記事のID」と「広告除外カテゴリのID」に投稿・固定ページ、カテゴリのIDを入力します。

jyogai1

投稿一覧や固定ページ一覧、カテゴリから該当ページを開いてブラウザのURLバーに書いてあるIDを調べます。

以下の赤で囲んであるところがIDです。

投稿ページと固定ページの場合はこちらです。

jyogai_kotei

カテゴリーの場合はこちらです。

jyogai_category

今回は以下のように設定しました。

「「一期一笑ラボ」新たにオープン！！」と「お問い合わせ」を除外しています。

jyogai2

確認

正しく除外されているか確認してみます。

該当の投稿ページ

BeforeAfterです。正しく除外されています。

jyogai_honbun2jyogai_honbun1

該当の固定ページ

BeforeAfterです。正しく除外されています。

jyogai_kotei1jyogai_kotei2

さいごに

広告専用ウェジェットの機能がつく前でも、広告が配置できるウェジェットは大変便利ですが、広告専用ウェジェットで更に便利になりました。

一番のメリットは、以前テキストウィジェットで行っていたタグ入力をする必要が無くなったことだと思います。また、広告除外記事・カテゴリを使えることなったことも大変便利です

以上のように、ウィジェットでの広告設定がより簡単になりました。

今回の配置で、ポリシー違反がありましたらご指摘ください。また、コードの表記ミスなどがありましたら教えていただければ幸いです。

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

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

最後になりましたが、Simplicityの作成者のわいひら様には感謝感謝です。

コメント

  1. GaGaCat より:
    2016年8月13日 6:58 午前

    丁寧な解説、ありがとうございます。
    とても役に立ちました（-人-）

    それとは別に（笑
    ttp://ichigoichielab.com/2015/07/simplicity-widget-ad-setting/
    を Windows10 Edge で閲覧するとどうやらモバイル端末扱いになるようで
    右側のウィジェット欄がゴッソリ無くなり下に回り込みます。
    自分も Simplicity2 なんですが、自分のサイトは普通にPC用サイトとして表示されているので、何が違うのか、それはそれでちょっと興味が…

    返信
    • ノッツ より:
      2016年8月17日 4:51 午後

      ＞GaGaCatさん
      コメントありがとうございます。
      お役に立ててよかったです。

      Windows10 Edgeの件ですが、Simplicityのカスタマイザーの設定で、画面の幅が狭い端末の場合は、そのようになる設定をしているからだと思います。
      WordPressのダッシュボードから【外観】＞【カスタマイズ】＞【レイアウト（全体・リスト）】の「PCでサイドバーをレスポンシブ表示」をオンにすることで、そのような事が可能になります。

      返信