フリースペース

日常のニュースを思うままに発信します。

*

STINGER5でアドセンスの位置を大幅に修正。クリック数が格段にアップする方法

      2015/07/16

私のブログは、スマートフォンからのアクセスが、デスクトップからのアクセスの倍以上あります。しかし、アドセンスのクリックを見てみると、デスクトップからの方が多いのです。そこで、スマートフォンでアクセスしてアドセンスの位置を見てみると、記事よりかなり下に表示されていることに気づきました。これでは、モバイルからのクリックは期待できません。

デスクトップの表示位置も、サイドバーに1つと記事下に2つなので、サイドバーのアドセンスを記事中に表示できるよう修正してみました。

すると、クリック数が格段にアップしたのです。特にモバイルからのクリックの増加が大きく、今まで放置してきたことを後悔するほどです。今回は、STINGER5のアドセンスの位置を変更する方法を紹介したいと思います。

スポンサードリンク

デスクトップの記事下のアドセンスを横並びにする

STINGER5では、記事下のレクタングルのアドセンスが上下に並ぶようになっています。これでは、下側の広告のクリック率が下がってしまいます。そこで、2つ横並びにして、クリック率をあげるようにしてみました。参考にしたサイトはこちらです。

記事部分の横幅を広げる

STINGER5では、記事下に336×280のアドセンス広告を表示するようになっています。STINGER5の記事部分は、980pixelからサイドバーの幅300pixelを引いた680pixelがデフォルトです。これでは、336pixelを横に並べることができません。そこで、記事の横幅を広げてやる必要があります。方法は、style.cssを変更するだけです。

「max-widht: 980px;」の部分を「max-widht: 1100px;」に変更します。

これで、記事の横幅が1100pixelからサイドバーの幅300pixelを引いた800pixelになり、336pixelの広告2つを横並びに表示するスペースを確保したことになります。

バナーを横に並べる

バナーを横に並べるコードをstyle.cssに追記します。

これで、バナーを横に並べる準備が出来ました。

STINGER5のCSSはデバイスの横幅によって4種類に表示が分けられています。

  • 1行目@charset”UTF-8”;
  • 997行目@media only screen and (max-width: 780px){
  • 1008行目@media only screen and (min-width: 380px){
  • 1059行目@media only screen and (min-width: 780px){

これらは、今までにstyle.cssに何かを追記していれば変化してしまいます。例示した位置は、デフォルトのSTINGER5の状態です。自分のstyle.cssに合わせて、読み換えてください。

上記のコードは、997行目以前に追記してください。

single.phpの変更

いよいよ、広告を横並びにするためにsingle.phpを変更します。変更する部分は以下の通りです。

この部分を、変更します。

これで、記事下の広告が横並びに変更されます。記事下に、ワイドに広告を表示することで、クリック率のアップを狙っています。実際、デフォルトの状態に比べると、クリック率は向上しています。

サイドバーの広告を他の広告に置き換える

アドセンスは、1つのページに3つまでとルールで決まっています。記事下に2つ配置しているため、記事中に表示させるためには、サイドバーのアドセンスを他の広告に変更してやる必要があります。

実際、サイドバーのアドセンスは、それほどクリックされていないので、他の広告に変更しても影響はないと思います。

サイドバーのアドセンスを他の広告に置き換えるには、sidebar.phpを変更します。

この部分に、自分の表示したい広告のコードを挿入してください。何も表示しない場合は、空白で構いません。

記事中にアドセンスを挿入する

これは、okutaniさんの記事を参考にしました。

okutaniさんは、仕事でWEB関連の開発をやっていらっしゃる方なので、とてもわかりやすく解説してくれています。

in-adsens.phpの作成

in-adsense.phpを作成して、親テーマのfunctions.phpと同じ位置にアップしてやります。in-adsense.phpの内容は、以下の通りです。

style.cssに追記

広告の表示を整えるために、style.cssに追記してやります。先ほどと同じように、997行目以前に以下のコードを挿入してください。

functions.phpに追記

ショートコード作成のための関数を、functions.phpに追記してやります。追記する箇所は、最後尾で構いません。

広告を挿入する方法

投稿記事の中で、以下のように記述すれば、その部分にアドセンスが挿入されます。

in-adsense.phpにPC用、モバイル用のアドセンスを設定していれば、PC、モバイル両方にアドセンスが表示されます。どちらかしか設定していない場合には、設定した方にだけアドセンスが表示されます。

スマートフォンのタイトル下にアドセンスを表示する

現状だと、スマートフォンにもう1つアドセンスを表示することができるはずです。どうせ表示するのであれば、クリックしてもらいやすい位置に表示させたいと思います。そこで、320×100のアドセンスを、タイトルの下に表示するようにします。参考にしたのが、このサイトです。

このサイトも、画像入りでわかりやすく説明してくれています。

320×100の広告コードを取得します

AdSenseの画面から、新たに320×100の広告コードを取得します。そのコードを、ad-smt-top.phpに貼りつけます。ad-smt-top.phpの内容は、以下の通りです。

ad-smt-top.phpは、in-adsense.phpと同じ位置にアップしてください。

single.phpに追記

広告を表示する位置に、コードを追記します。追記するのはsingle.phpの以下の部分です。

この真上に、以下のコードを挿入してください。

これで、スマートフォンの画面のタイトル下に320×100のアドセンス広告が表示されます。

最終確認

繰り返しますが、アドセンスは1つのページに3つまでです。それ以上になっているとGoogle社から警告が来て、最悪、アカウントが停止になります。そのため、今まで変更したPC画面、スマートフォン画面をチェックして、アドセンスが3つ以上表示されていないか確認してください。

アドセンスは、設定してから表示されるまで、少し時間がかかります。大体、30分くらい待てば表示されると思いますので、キチンと確認するようにしましょう。

これで、PC版もスマートフォン版も、アドセンスの位置はバッチリです。クリック数も向上することでしょう。STINGER5を導入している方は、是非、実践してみてください。

記事中にアドセンスを表示させる部分は、実際に記事中の挿入させたい場所にショートコードを挿入させる必要があります。そのため、途中から導入する人は、今まで書いた記事に、ショートコードを挿入させなければいけないという手間が発生します。なるべく、早いうちに導入した方が修正の手間が少なくて済みます。

記事が多くて修正が大変という方は、アクセスの多い人気記事だけ修正するという方法もあると思います。それだけでも、クリック数は格段に違ってくるはずです。是非、お試しください。

 - Wordpress

        

広告

広告

  フォロー、いいねをお願いします

follow us in feedly

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事

By: Rob Davies
深刻な脆弱性が相次いで発見!WordPressはダメなプロダクツなのか?

ここ数日のうちに、「Wordpressに深刻な脆弱性を発見」というニュースを何度 …

By: Serge Kij
デザインも機能も秀逸。WordPressの有料テーマとGPLライセンスの関係

先日、同期ブログで親しくなった、しむ(コトバコ)さんと、以前からTwitterで …

By: petter palander
WordPressのスマートフォン画面で「target=’_blank’」を取り除く関数を作ってみた

いや、ホント軽い気持ちで書いた記事だったんですけど、コメントまでいただいてしまっ …