Sibatabi

旅の経験を情報として配信するブログ

【STINGER6】ウィジェットを使わずにアドセンスを各所に配置するカスタマイズ

 2016/01/17 
stinger6

アドセンスの配置を最適化

以前使っていた「Simplicity」ではウィジェット頼りだったアドセンスの配置ですが、「STINGER6」に変更した機会に自分なりに配置してみました。

最適かどうかは今後の統計をみて決めていこうと思っていますが、備忘録的に記事にしておきたいと思います。

 

アドセンスの配置

PC画面

「stinger6」アドセンス

まずは、PC画面のアドセンスの配置です。
慣れないがながら図にしてみました。

アドセンスはすべて記事内へ。
アイキャッチ(カスタマイズして本文前に入るようにしました)と本文の間に1つと記事本文下に横並びで2つ設定しました。

PC画面については、サイドバートップのアドセンスはやめて、テキトーな広告を入れてみました。

モバイル画面

「stinger6」アドセンス

こちらの図はより酷いです。笑

モバイル画面では、アイキャッチ下に1つ、記事本文下に1つ、サイドバートップに1つ設定しました。

 

アドセンスを配置する

① アドセンス広告を用意する

合計6つのアドセンス広告を用意します。

  • レクタングル大(336*280)を3つ(PC画面の本文上、本文左下、本文右下)
  • レクタングル(300*250)を3つ(モバイル画面本文上、本文下、サイドバートップ)

② メインカラム(記事)の横幅を広げる

PC画面の記事下にレクタングル大を2つ配置出来るように、子テーマのstyle.cssに下記コードを追加してメインカラムの横幅を広げます。

③ ついでにヘッダーの横幅も広げる

メインカラムの横幅に合わせて、ついでにヘッダーの横幅も広げます。

子テーマfunction.phpに上記コードを追加。

heightはヘッダーの高さで、テキトーに250にしてあります。

④ 本文上にアドセンスを追加する

single.phpの上記部分にアドセンスを追加します。

※single.phpは子テーマにコピペして入れたものを編集しています。

先ほどの部分に、このコードを追加します。

このコードで、モバイルとPCでそれぞれ表示を切り替えます。

PC用のアドセンスについては、<div style=”text-align:center; margin:5px 0px;”></div>で囲んで、記事の中央寄せと記事上下に間隔を入れてます。

⑤ 本文下にアドセンスを追加する

本文下にアドセンスを追加します。

single.phpの上記部分を下記コードに置き換えます。

PC画面の本文下のコードについては、<div id=”ad-box”><div id=”ad-left”><div id=”ad-right”>を利用して、CSSで横並びに指定をします。

子テーマのstyle.cssに上記コードを追加。

⑤ サイドバーにアドセンスを追加する

sidebar.phpの上記部分を下記コードに置き換えます。

※sidebar.phpも子テーマにコピペして入れたものを編集しています。

PC画面用には横幅300pxのテキトーな広告のコードを入力。

また、広告下の間隔が気になったので、<div style=”margin-bottom:30px;”></div>で囲って、間隔を調整しています。

以上で、アドセンス配置最適化のカスタマイズは完了です!

ちなみに、ウィジェットからアドセンスコードを出力する場合

ウィジェットからアドセンスコードを出力したい場合は、下記コードを入力すればオッケー!

PC画面のみ出力したい場合は下記の通り。