スポンサーリンク

STINGER・AFFINGERカスタマイズ

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

投稿日:2016年6月24日 更新日:



STINGER8・AFFINGER4(AMPページへの対応を含む)でのカスタマイズ方法を追加しました。

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

事前準備

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

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

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

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

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

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

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

▶h2見出しタグ直前に自動でアドセンスや広告自動表示させる方法/WordPressデビュー津々浦々

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

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

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

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

ラベル表記のCSSコードを追加

全てのテーマファイルの編集は、テーマのアップデートの影響を受けない「子テーマ」で行うことをおすすめします。
やむおえず親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて

まず初めに、WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に、「スポンサーリンク」のラベル表示の文字サイズと余白を調整するコードを追加しておきます。(数値はお好みで変更可能です)

  • 「スポンサーリンク」のラベル表記の下の余白をゼロに指定
  • ラベル表記の文字サイズを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()) : ?>に修正しています。

kanamii-1239-2

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

AFFINGER4の場合

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

こちらのカスタマイズのAMPページへの対応方法は、下記ページで説明しています。

1,535view
【AFFINGER4】通常ページのアイキャッチ画像の下に追加したアドセンスをAMPページで非表示にする方法

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 ※こちらの記事は、下記ページ内の「アイキャッチ画像の下にアドセンスを追加する方法」を参考にしてくださった方にのみ該当するカスタ ...

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

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

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

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

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

STINGER8・AFFINGER4でのカスタマイズ方法を追加しました。 2017年1月のAFFINGER4アップデート以降、アドセンスの横並びは管理画面で設定可能となりました。詳しくは下記ページをご ...

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

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

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

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

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

現在はどちらも新たに追加されたアドセンスの「記事内広告」に変更しています。

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

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

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

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

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

最後に、style.cssに下記コードを追加して完了です。(ラベル用のCSSを先に追加している場合、/*アドセンスラベル ここから*/以下は不要です)

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

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

AFFINGER4のAMPページの見出し(h2)の前にアドセンスを追加する方法は、下記ページをご参照ください。

2,228view
【AFFINGER4】AMPページの最初の見出し(h2)の前にアドセンスを追加する方法

コードの追加場所を「子テーマ」のfunctions-amp.phpに変更しました。(テーマのアップデートの際の再編集は必要なくなりました) こちらのカスタマイズは、AFFINGER5「WING」でも応 ...

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

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

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

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

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

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

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

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

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

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

Twitter で

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

スポンサーリンク

-STINGER・AFFINGERカスタマイズ

Copyright© Kanamii , 2024 All Rights Reserved Powered by AFFINGER5.