無料WordPressテーマ「STINGER PLUS+」は、ウィジェットに各コードを追加するだけで、「パソコン＆タブレット表示」と「スマホ表示」で別々のアドセンス広告が自動挿入されるようになっています。
テーマファイルの編集不要なのは助かりますね。
下記は、STINGERの作者であるENJI様のブログ記事、STINGERでアドセンスをより効果的に貼る方法|ENJILOGより引用させていただきます。
とにかくアドセンス広告は目立つ事が重要だと考えています。そして、クリック率が一番高いのは「記事下」であり、またブログの場合はそうであるべきだとも考えています。
そうした事から僕は記事下に「レクタングル（大）（336×280）」を縦に2つ並べています。レクタングル（中）（300×250）を記事下に2つ横並びにする事が主流ですが僕が実際にテストしたところはレクタングル（大）の縦並びの方がクリック率が高かったです。これは、各ブログやその時の状況にも左右されると思うので参考程度にして下さい。
記事下のアドセンスの縦並びの配置は『STINGERオリジナル』といった感じでしょうか。
クリック率も良いとのことですので、デフォルトのままで全く問題はないのですが・・。
「スマホのファーストビューにアドセンスを追加してみようかな？」
「ならば、インパクトのあるアイキャッチ画像の下にパソコンとタブレットでも表示させてみたらどうだろう？」とふと思い立ちました。
思い立ったら実行あるのみっ。ということで、ここでは、STINGER標準の条件分岐コードを使って「パソコン＆タブレット表示」と「スマホ表示」で、サイズ別のアドセンス広告をアイキャッチ画像の下に設置する方法をご紹介します。
さらに、見出し（h2）の直前にレクタングルをサイズ別に表示する方法も追記しました。
クリック率向上などのデータは全くありません。
お好みに応じて参考にしていただけると幸いです。
スポンサーリンク
Contents
事前準備
新たに追加するアドセンスコードを取得
Google Adsenceにアクセス→広告の設定→「新しい広告ユニット」をクリック。
ビッグバナー（728×90）、ラージモバイルバナー（320×100）の各コードを取得し、メモ帳にコピーしてください。
※アイキャッチ画像の下にアドセンスを配置する場合に必要な作業です。
条件分岐コードはSTINGER標準を使用
～6月29日追記～
この記事を更新後、Twitterでお世話になっている izu様 @universe1104 より、「STINGER PLUS+にはスマホ分岐条件コードが既にfunctions.php内に記載されているので追加不要なのでは？」とご教示をいただきました。
ご連絡いただいた時点では、標準の条件分岐は「パソコン」と「タブレット・スマホ」だと勘違いしておりまして・・その旨をお伝えしたところ、別の方法での検証結果と合わせてご自身のブログの記事内にて説明をして下さいました。
見出しタグ直前に広告を表示させる方法やSTINGER6以降のfunctions.php内の条件分岐コードの内容などがわかりやすくまとめられています。
▶h2見出しタグ直前に自動でアドセンスや広告自動表示させる方法/WordPressデビュー津々浦々
よって、最初の更新時にお伝えした、functions.phpへの条件分岐コード追加の必要はありません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//スマホ表示分岐 function is_mobile(){ $useragents = array( 'iPhone', // iPhone 'iPod', // iPod touch 'Android.*Mobile', // 1.5+ Android *** Only mobile 'Windows.*Phone', // *** Windows Phone 'dream', // Pre 1.5 Android 'CUPCAKE', // 1.5+ Android 'blackberry9500', // Storm 'blackberry9530', // Storm 'blackberry9520', // Storm v2 'blackberry9550', // Storm v2 'blackberry9800', // Torch 'webOS', // Palm Pre Experimental 'incognito', // Other iPhone browser 'webmate' // Other iPhone browser ); $pattern = '/'.implode('|', $useragents).'/i'; return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']); } |
記事を参考にして下さった方には大変ご迷惑をおかけいたしますが、functions.phpに追加した上記コードの削除及び、下記のsingle.phpに追加したコードの修正をお願いいたします。
知識不足により誤った情報を公開してしまった事実を心よりお詫び申しあげます。
そして izu様、この度は本当にありがとうございました。
ラベル表記のCSSコードを追加
やむおえず親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて
まず初めに、WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に、「スポンサーリンク」のラベル表示の文字サイズと余白を調整するコードを追加しておきます。（数値はお好みで変更可能です）
|
1 2 3 4 5 |
/*アドセンスラベル ここから*/ .label p { margin-bottom:0; font-size:12px; } |
- 「スポンサーリンク」のラベル表記の下の余白をゼロに指定
- ラベル表記の文字サイズを12pxに指定
アイキャッチ画像の下にアドセンスを追加する方法
「STINGER管理」及び「AFFINGER管理」にて、"アイキャッチ画像を記事上部に表示する"にチェックを入れた場合に適用されるカスタマイズです。
こちらのカスタマイズは、STINGER8には該当しません。
STINGER PLUSの場合
WordPressダッシュボード→外観→テーマ→テーマの編集→single.phpを開きます。
パソコンの「Ctrl」キー+「F」で表示される検索欄に<div class="st-eyecatch"><?php the_post_thumbnail('full'); ?>と入力してマークされる部分の下、</div>の上にコードを追加してください。
※<?php if (is_mobile()) : ?>の部分を<?php if (st_is_mobile()) : ?>に修正しています。
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php if (st_is_mobile()) : ?> <div align="center"> <div class="label"><p>スポンサーリンク</p></div> 【ラージモバイルバナー（320×100）のアドセンスコード】 </div> <?php else: ?> <div align="center"> <div class="label"><p>スポンサーリンク</p></div> 【ビッグバナー（728×90）のアドセンスコード】 </div> <?php endif; ?> |
※【ラージモバイルバナー（320×100）のアドセンスコード】【ビッグバナー（728×90）のアドセンスコード】を削除して、準備しておいたアドセンスコードを張り付けます。
AFFINGER4の場合
WordPressダッシュボード→外観→テーマ→テーマの編集→「st-eyecatch.php」を開きます。
下から3行目の</div>のすぐ上に、先に記載したコードを追加してください。
こちらのカスタマイズのAMPページへの対応方法は、下記ページで説明しています。
-
-
【AFFINGER4】通常ページのアイキャッチ画像の下に追加したアドセンスをAMPページで非表示にする方法
こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 ※こちらの記事は、下記ページ内の「アイキャッチ画像の下にアドセンスを追加する方法」を参考にしてくださった方にのみ該当するカスタ ...
これで、パソコンとタブレットでは横長の大きなサイズの広告、スマホでは小さなサイズの広告が表示されるようになります。
各端末での表示確認をパソコン（Google Chrome）で行う方法は下記ページ内で説明しています。
また、現在当ブログで適用している「記事下のアドセンス（レクタングル大）を横並びに配置する方法」は、下記ページをご参照ください。
-
-
【STINGER PLUS】記事エリアの横幅を広げてアドセンス（レクタングル大）を横並びに配置する方法
STINGER8・AFFINGER4でのカスタマイズ方法を追加しました。 2017年1月のAFFINGER4アップデート以降、アドセンスの横並びは管理画面で設定可能となりました。詳しくは下記ページをご ...
見出し（h2）の前にアドセンスを設置する方法
先にご紹介した、izu様の記事を参考にさせていただき、見出し（h2）の直前に、端末別サイズのアドセンス（レクタングル大・レクタングル中）を設置する追加カスタマイズを行いました。
参考サイト様に習って作成した、一番最初の見出し直前にのみアドセンスを設置、さらに広告の下に余白をプラスするカスタマイズコードを掲載させていただきます。
まず、事前準備として、下記のように「スマホ用（レクタングル中またはレスポンシブサイズ）」と「パソコン・タブレット用（レクタングル大）」のアドセンスコードをそれぞれメモ帳に準備しておきます。
中央寄せのコードはお好みで削除可能です。
現在はどちらも新たに追加されたアドセンスの「記事内広告」に変更しています。
【スマホ用アドセンスコード】
|
1 2 3 4 5 |
<div align="center"> <div class="label"><p>スポンサーリンク</p></div> <div class="ad-k"> 【レクタングル中（300×250）またはレスポンシブサイズ】 </div></div> |
【パソコン・タブレット用アドセンスコード】
|
1 2 3 4 5 |
<div align="center"> <div class="label"><p>スポンサーリンク</p></div> <div class="ad-k"> 【レクタングル大（336×280）】 </div></div> |
※【レクタングル中（300×250）またはレスポンシブサイズ】【レクタングル大（336×280）】の部分は、アドセンスで取得したコードにそれぞれ書き換えてください。
WordPressダッシュボード→外観→テーマ→テーマの編集→「functions.php」の最下部に下記コードを追加。
（デリケートなファイルですので、コードの取り扱いには十分ご注意ください。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
//見出し（h2）の上アドセンス function add_ad_before_h2_for_2times($the_content) { $ad1 = <<< EOF 【スマホ用アドセンスコード】 EOF; $ad3 = <<< EOF 【パソコン・タブレット用アドセンスコード】 EOF; if ( is_single() ) { $h2 = '/^<h2.*?>.+?<\/h2>$/im'; if ( preg_match_all( $h2, $the_content, $h2s )) { if ( $h2s[0] ) { if (st_is_mobile()){ if ( $h2s[0][0] ) { $the_content = str_replace($h2s[0][0], $ad1.$h2s[0][0], $the_content); } } else { if ( $h2s[0][0] ) { $the_content = str_replace($h2s[0][0], $ad3.$h2s[0][0], $the_content); } } } } } return $the_content; } add_filter('the_content','add_ad_before_h2_for_2times'); |
※【スマホ用アドセンスコード】【パソコン・タブレット用アドセンスコード】の部分は、それぞれあらかじめ準備しておいたコードに書き換えてください。
最後に、style.cssに下記コードを追加して完了です。（ラベル用のCSSを先に追加している場合、/*アドセンスラベル ここから*/以下は不要です）
|
1 2 3 4 5 6 7 8 9 10 |
/*アドセンス見出し（h2）の上 ここから*/ .ad-k { margin-bottom:30px; } /*アドセンスラベル ここから*/ .label p { margin-bottom:0; font-size:12px; } |
※アドセンス広告の下に30pxの余白を指定。
広告とコンテンツとの間の余白は最低でも20pxは必要とされています。狭すぎるとポリシー違反となる可能性がありますので適度な余白を入れることをおすすめします。
AFFINGER4のAMPページの見出し（h2）の前にアドセンスを追加する方法は、下記ページをご参照ください。
-
-
【AFFINGER4】AMPページの最初の見出し（h2）の前にアドセンスを追加する方法
コードの追加場所を「子テーマ」のfunctions-amp.phpに変更しました。（テーマのアップデートの際の再編集は必要なくなりました） こちらのカスタマイズは、AFFINGER5「WING」でも応 ...
アドセンスの「スポンサーリンク」の表示は必要？
アドセンス広告の上に表示する「スポンサーリンク」のテキスト。
これ、絶対必要なのかな？って迷いますよね。
公式サイトによると、「コンテンツなのか広告なのかの区別が簡単につくようにしなさい」といった内容が掲載されています。
見出しの上はもちろんですが、アイキャッチ画像の下も、ひっかかるかも？と思い全て表示するようにしました。
また、許可されているラベル表記は、「広告」または「スポンサーリンク」のみとのことですので注意が必要ですね。
誤解を招く見出しの下での広告配置
サイトのユーザーに誤解を与えないようにし、ユーザーがコンテンツと Google 広告を簡単に区別できるようにすることが大事です。AdSense のポリシーでは、「関連情報」や「関連リンク」といった誤解を招く見出しの下に広告を配置することは禁止されています。広告ラベルには、「広告」または「スポンサーリンク」のみを使用するようお願いいたします。それ以外のラベルは使用できません。
以上、STINGER標準の条件分岐コードを使って、端末別サイズのアドセンスをアイキャッチ画像の下に設置する方法、さらに見出し（h2）の前に設置する追加カスタマイズ方法をご紹介しました。
最後までお付き合い下さりありがとうございます。