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

Web

どーん(^o^)/

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

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

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

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

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

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

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

スポンサーリンク

はじめに

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

Simplicityの公式サイト

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

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

Simplicityの便利な広告配置

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

使い方

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

all_koukoku_check

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

koukoku_kantan

デメリット

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

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

ウィジェットを使う理由

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

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

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

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

スポンサーリンク

広告配置例

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

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

個別ページ

パソコン表示の場合

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

PC_honbun

モバイル表示の場合

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

SP_honbun

固定ページ

パソコン表示の場合

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

PC_kotei

モバイル表示の場合

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

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

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

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

SP_kotei

インデックスページ

パソコン表示の場合

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

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

PC_index

モバイル表示の場合

  • インデックスリスト上×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つ以上の記事がないページには広告を表示させないようにカスタマイズしています。

SP_index

設定準備

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

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

広告項目

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

all_koukoku

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

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

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

responsive_layout

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

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

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

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

widget_area_pc_sp

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

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

honbun_naka

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

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

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

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

widget_text

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

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

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

個別ページ

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

honbun_naka

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

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

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

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

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

honbun_shita

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

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

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

このようにすることで、Simplicityのカスタマイザーにおいて、広告を縦に並べたり、横に並べる設定ができるようになります。

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

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

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

kanren_shita

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

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

固定ページ

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

kotei_top

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

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

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

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

PC_kotei_top1

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

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

PC_kotei_top2

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

PC_kotei_top3

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

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

PC_kotei_top3

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

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

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

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

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

SP_kotei_top1

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

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

SP_kotei_top2

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

SP_kotei_top3

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

kotei_shita

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

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

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

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

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

インデックスリストトップ(モバイルのみ)

index_top

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

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

SP_index_top1

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

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

SP_index_top2

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

SP_index_top3

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

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

SP_index_top4

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

index_middle

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

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

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

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

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

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

index_bottom

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

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

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

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

さいごに

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

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

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

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

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

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

スポンサーリンク

フォローする

コメント

  1. うさぎ より:

    このページの記事を大変参考にさせて頂いています。
    一つ質問ですが、設定の最後のほうにある、

    インデックスリストボトム(パソコン、モバイル)
    モバイル用テキストウィジェットには以下のように入力します。

    スポンサーリンク
    【インデックスリスト下に配置する336×280の広告コード】

    ですが、
    300×250(モバイル用)ではなく、
    336×280(パソコン用)の大きなのが入っているのは、何か意図したものでしょうか?
    大きいほうが収益が良いとか。
    初心者ですのでよろしくお願いします。

    • yukiohno より:

      >うさぎさん
      コメントありがとうござます。
      大変申し訳ございませんが、336×280は間違いで、300×250が正しいです。
      ミスでした。
      後ほど修正しておきます。

      この記事に書いているテキストウェジェットを利用して広告を配置するより、広告専用のウェジェットを使ったほうが導入が楽なのでオススメです。
      私が運営している別のブログになりますが、以下の記事に書いてありますので、よろしければご覧ください。
      http://ichigoichielab.com/2015/07/simplicity-widget-ad-setting/

      当ブログでは、パソコンは336×280を使用しておりますが、モバイルは300×250からレスポンシブ広告に広告を変更して使用しています。
      レスポンシブ広告のほうが、画面に合わせて大きい広告が表示されるので、収益性が高くなると思います。
      ですので、レスポンシブ広告のご使用をオススメします。