Kanamii

伝えたい想いを自分らしく・・・

kanamii-1239-1

スポンサーリンク

STINGERカスタマイズ

【STINGER PLUS】アドセンスをアイキャッチ画像の下・見出し(h2)の前・記事下に設置する方法

2016/12/05

STINGER8・AFFINGER4でのカスタマイズ方法を追加しました。

無料WordPressテーマ「STINGER PLUS+」は、ウィジェットに各コードを追加するだけで、「パソコン&タブレット表示」と「スマホ表示」で別々のアドセンス広告が自動挿入されるようになっています。

テーマファイルの編集不要なのは助かりますね。

下記は、STINGERの作者であるENJI様のブログ記事、STINGERでアドセンスをより効果的に貼る方法|ENJILOGより引用させていただきます。

とにかくアドセンス広告は目立つ事が重要だと考えています。そして、クリック率が一番高いのは「記事下」であり、またブログの場合はそうであるべきだとも考えています。

そうした事から僕は記事下に「レクタングル(大)(336×280)」を縦に2つ並べています。レクタングル(中)(300×250)を記事下に2つ横並びにする事が主流ですが僕が実際にテストしたところはレクタングル(大)の縦並びの方がクリック率が高かったです。これは、各ブログやその時の状況にも左右されると思うので参考程度にして下さい。

記事下のアドセンスの縦並びの配置は『STINGERオリジナル』といった感じでしょうか。
クリック率も良いとのことですので、デフォルトのままで全く問題はないのですが・・。

「スマホにあとひとつプラスできるアドセンスをファーストビューに表示させてみようかな?」
「ならば、インパクトのあるアイキャッチ画像の下にパソコンとタブレットでも表示させてみたらどうだろう?」とふと思い立ちました。

思い立ったら実行あるのみっ。ということで、ここでは、STINGER標準の条件分岐コードを使って「パソコン&タブレット表示」と「スマホ表示」で、サイズ別のアドセンス広告をアイキャッチ画像の下と記事下に設置する方法をご紹介します。

さらに、見出し(h2)の直前にレクタングルをサイズ別に表示する方法も追記しました。

クリック率向上などのデータは全くありません。
お好みに応じて参考にしていただけると幸いです。

スポンサーリンク

事前準備

デフォルトのアドセンス表示を停止&コードをコピー

WordPress管理画面→外観→ウィジェット→「広告・Googleアドセンス用336px」「広告・Googleアドセンスのスマホ用300px」に各コードを追加している場合は、コードをメモ帳にコピーしてから、テキストを画面左下の使用停止中のウィジェット内にドラッグ&ドロップします。
こうしておくと、いつでも簡単にデフォルトに戻すことができます。
スマホ用のアドセンスコードは、お好みでレスポンシブサイズを選択されてもOKです。

※記事下中央にアドセンスを【1つ】配置する場合に必要な作業です。

新たに追加するアドセンスコードを取得

Google Adsenceにアクセス→広告の設定→「新しい広告ユニット」をクリック。
ビッグバナー(728×90)、ラージモバイルバナー(300×100)の各コードを取得し、メモ帳にコピーしてください。

※アイキャッチ画像の下にアドセンスを配置する場合に必要な作業です。

条件分岐コードはSTINGER標準を使用

【6月29日追記】

この記事を更新後、Twitterでお世話になっている izu様 @universe1104 より、「STINGER PLUS+にはスマホ分岐条件コードが既にfunctions.php内に記載されているので追加不要なのでは?」とご教示をいただきました。

ご連絡いただいた時点では、標準の条件分岐は「パソコン」と「タブレット・スマホ」だと勘違いしておりまして・・その旨をお伝えしたところ、別の方法での検証結果と合わせてご自身のブログの記事内にて説明をして下さいました。

見出しタグ直前に広告を表示させる方法やSTINGER6以降のfunctions.php内の条件分岐コードの内容などがわかりやすくまとめられています。

h2見出しタグ直前に自動でアドセンスや広告自動表示させる方法

よって、最初の更新時にお伝えした、functions.phpへの条件分岐コード追加の必要はありません。

記事を参考にして下さった方には大変ご迷惑をおかけいたしますが、functions.phpに追加した上記コードの削除及び、下記のsingle.phpに追加したコードの修正をお願いいたします。

知識不足により誤った情報を公開してしまった事実を心よりお詫び申しあげます。

そして izu様、この度は本当にありがとうございました。

アイキャッチ画像の下にアドセンスを追加する方法

「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()) : ?>に修正しています。

kanamii-1239-2

【ラージモバイルバナー(300×100)のアドセンスコード】【ビッグバナー(728×90)のアドセンスコード】を削除して、準備しておいたアドセンスコードを張り付けます。

AFFINGER4の場合

WordPressダッシュボード→外観→テーマ→テーマの編集→「st-eyecatch.php」を開きます。
下から3行目の</div>のすぐ上に、先に記載したコードを追加してください。

記事下中央にアドセンスを追加する方法

STINGER PLUSの場合

WordPressダッシュボード→外観→テーマ→テーマの編集→「single.php」を開きます。

パソコンの「Ctrl」キー+「F」で表示される検索欄に<!-- 広告枠 -->と入力してマークされる部分のすぐ上に下記コードを追加してください。

kanamii1239-3

【レクタングル(300×250)またはレスポンシブサイズのアドセンスコード】【レクタングル大(336×280)のアドセンスコード】を削除して、準備しておいたアドセンスコードを張り付けます。

STINGER8の場合

WordPressダッシュボード→外観→テーマ→テーマの編集→「single.php」を開きます。

パソコンの「Ctrl」キー+「F」で表示される検索欄に「広告」と入力してマークされる下記コードのすぐ上に、先に記載したコードを追加します。

下記コードの下に追加すると、ソーシャルボタンの下に表示させることも可能です。

AFFINGER4の場合

WordPressダッシュボード→外観→テーマ→テーマの編集→「single-type1.php」を開きます。
コードの追加箇所は、STINGER8と同じです。

AFFINGER4で初めて「single.php」の編集をされる方はこちらの項目をご確認の上、必ずコード内の「TEMPLATEPATH」を「STYLESHEETPATH」に修正してください。

これで、パソコンとタブレットでは大きなサイズの広告、スマホでは小さなサイズの広告が表示されるようになります。

各端末での表示確認をパソコン(Google Chrome)で行う方法は下記ページ内で説明しています。

▶パソコンでレスポンシブサイトのスマホ表示を確認する方法

また、現在当ブログで適用している「記事下のアドセンス(レクタングル大)を横並びに配置する方法」は、下記ページをご参照ください。

【STINGER PLUS】記事エリアの横幅を広げてアドセンス(レクタングル大)を横並びに配置する方法

見出し(h2)の前にアドセンスを設置する方法

こちらのカスタマイズは、STINGER8・AFFINGER4でも応用できます。

先にご紹介した、izu様の記事を参考にさせていただき、見出し(h2)の直前に、端末別サイズのアドセンス(レクタングル大・レクタングル中)を設置する追加カスタマイズを行いました。

参考サイト様に習って作成した、一番最初の見出し直前にのみアドセンスを設置、さらに広告の下に余白をプラスするカスタマイズコードを掲載させていただきます。

まず、事前準備として、下記のように「スマホ用(レクタングル中またはレスポンシブサイズ)」と「パソコン・タブレット用(レクタングル大)」のアドセンスコードをそれぞれメモ帳に準備しておきます。
ラベル表記のフォントサイズ、中央寄せのコードはお好みで変更してくださいね。

【スマホ用アドセンスコード】

【パソコン・タブレット用アドセンスコード】

【レクタングル中(300×250)またはレスポンシブサイズ】【レクタングル大(336×280)】の部分は、アドセンスで取得したコードにそれぞれ書き換えてください。

WordPressダッシュボード→外観→テーマ→テーマの編集→「functions.php」に下記コードを追加。
(デリケートなファイルですので、コードの取り扱いには十分ご注意ください。)

【スマホ用アドセンスコード】【パソコン・タブレット用アドセンスコード】の部分は、それぞれあらかじめ準備しておいたコードに書き換えてください。

最後に、style.cssに下記コードを追加して完了です。

※アドセンス広告の下に30pxの余白を指定。
広告とコンテンツとの間の余白は最低でも20pxは必要とされています。狭すぎるとポリシー違反となる可能性がありますので適度な余白を入れることをおすすめします。

子テーマのstyle.cssに追加したコードが反映されない場合は、キャッシュをクリア及び、追加場所を先に入力しているコードの前に変更して再度お試しください。

アドセンスの「スポンサーリンク」の表示は必要?

アドセンス広告の上に表示する「スポンサーリンク」のテキスト。
これ、絶対必要なのかな?って迷いますよね。

公式サイトによると、「コンテンツなのか広告なのかの区別が簡単につくようにしなさい」といった内容が掲載されています。
見出しの上はもちろんですが、アイキャッチ画像の下も、ひっかかるかも?と思い全て表示するようにしました。

また、許可されているラベル表記は、「広告」または「スポンサーリンク」のみとのことですので注意が必要ですね。

▶広告配置に関するポリシー|AdSenceヘルプより

誤解を招く見出しの下での広告配置

サイトのユーザーに誤解を与えないようにし、ユーザーがコンテンツと Google 広告を簡単に区別できるようにすることが大事です。AdSense のポリシーでは、「関連情報」や「関連リンク」といった誤解を招く見出しの下に広告を配置することは禁止されています。広告ラベルには、「広告」または「スポンサーリンク」のみを使用するようお願いいたします。それ以外のラベルは使用できません。

以上、STINGER標準の条件分岐コードを使って、端末別サイズのアドセンスをアイキャッチ画像の下と記事下に設置する方法、さらに見出し(h2)の前に設置する追加カスタマイズ方法をご紹介しました。

最後までお付き合い下さりありがとうございます。

▶STINGER PLUS・STINGER8・AFFINGER4 カスタマイズ全記事一覧へ

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGERカスタマイズ