STINGER5カスタマイズ アドセンス貼りまくり!iPhone6等ワイド画面対応だよ。 - いろどりねっと

ITつれづれなるままに

STINGER5カスタマイズ アドセンス貼りまくり!iPhone6等ワイド画面対応だよ。

2016/08/31

スポンサーリンク

STINGER5のアドセンスは標準で

◇記事下に縦二つ(レクタングル大)
◇右サイドバー上に一つ(レクタングル中)

が表示されます。スマホだとレクタングル中がページの真ん中あたり(記事下)と一番下のほうに計二つ表示されます。

それと最初は気がつかなかったのですが、固定ページや一覧ページでは右サイドバー上しかアドセンスが表示されません。

’どうせならめいっぱい表示させたいぞっと’

ってことで、1ページ3つまでの数の制約も撤廃されたしアドセンスをできるだけ多く表示させるカスタマイズをまとめました。

本カスタマイズの設置ポリシー

いろいろな関連サイトを見ていると、アドセンスは記事中配置がいいのかな、とか悩みましたが、結局

”STINGERのオリジナル配置をそのまま生かしながら追加しよう!”

と決めました。カスタマイズを最小限にしたかったので、標準のウィジットもそのまま使っています。

配置位置

固定ページ

◇記事上と記事下をレスポンシブにしました。
◇記事上は横幅めいっぱい表示されます。
◇サイドバー上はそのままです。

ad_kotei

一覧ページ

◇記事上と記事下をレスポンシブにしました。
◇サイドバー上はそのままです。

ad_ichiran

記事ページ

◇アドセンスは標準のウィジットをそのまま使っています。
◇記事下レクタングル(大)を横並び(ダブルレクタングル)にしました。

ad_kiji

スマホ表示

◇スマホは固定ページ、一覧ページ、記事ページともこのようなイメージになります。

ad_smaho

スポンサーリンク

Googleポリシー

アドセンスの配置について、以下のポリシーを考慮しています。

2016年8月29日変更および追記
1ページ3つまで
◇スマホの場合は1画面に表示できるアドセンスは1つのみ
◇ファーストビューで画面を専有するようなサイズのアドセンスは配置できません(特にスマホ)
◇お問い合わせフォームなどの中身のないページへの掲載は禁止

1ページ3つまでの数の制約は2016年8月に廃止されたのですが、だからといってむやみに貼っていいわけではありません。

本カスタマイズはソースへアドセンスを直接記述+ウィジットを併用しているため、お問い合わせなどのページは固定ページで作成して固定ページにはアドセンスを貼らないなど、アドセンスの掲載ポリシーに抵触しないように十分注意してください。

Googleのアドセンス広告の配置に関するポリシーはこちら

ソースコード

前提:STINGER5はver20141227です。SITNGER5ダウンロードサイト

 固定ページ

修正するファイル:page.php

◇固定ページのアドセンス追加は以下のサイトを参考にさせていただいております。

stinge5トップページに広告を増やしてアドセンス収益をアップさせるカスタマイズ | 日本の最新ニュースや話題を届ける情報ステーション

元のコード

org_page

挿入するコード(アドセンス上用)

元のコードの1行目と3行目の間に以下のコードを挿入してください。
ただし、アドセンスコードはあなたのコードに書き換えてください。
ソースコピーは右下のViewかrawをクリックしてから行ってください。

【解説】
当初スマホ用にはラージ モバイル バナー(320 x 100)を配置していたのですが、iPhone6やiPhone6Plus等、大画面用にアドセンスをレスポンシブに変更しました。STINGER5はモバイル バナーを配置するとスマホ表示でアドセンスがずれてしまうため、ネガティブマージン(margin-left:-10px;)を設定していました。

レスポンシブに変更するとネガティブマージンがどのような影響があるのかわからなかったのですが、iPhone5Sではズレなく表示されるため、ネガティブマージンはそのままにしています。iPhone6等でのテストは行っていないので、表示がおかしい場合は適宜調整してください。

またレスポンシブ広告をそのままの設定にするとスマホではレクタングルが表示され、Googleポリシーのファーストビューに抵触するので、data-ad-formatの設定値をデフォルトのautoからhorizontalに変更しています(ソースでハイライト表示されている行です)。

こうすることで、スマホでもデバイスに応じて適切な横長のアドセンスを表示してくれます。

PC側の表示はレスポンシブをデフォルト設定で配置していますが、ここは皆様のサイトに応じて変更してください。

1月21日追記:ネガティブマージンの削除

margin-left:-10px;だとやはり左にずれていました。

<?php if(is_mobile()) { ?>の下に記述されているdivタグを以下のとおり変更してください。

【変更前】
<div style="padding-bottom:10px; margin-left:-10px; text-align: center;>

【変更後】
<div align="center">

よろしくお願いします。

元のコード

org_page2

挿入するコード(アドセンス下用)

元のコードの38行目と40行目の間に以下のコードを挿入してください。
ただし、アドセンスコードはあなたのコードに書き換えてください。
ソースコピーは右下のViewかrawをクリックしてから行ってください。

【解説】
ここでスマホ用にアドセンスを表示させると、STINGERで標準配置しているレクタングルのアドセンスと並んでしまい、Googleポリシーのスマホ表示に抵触してしまいます。なので、モバイルの場合は何もしない、というロジックにしました。
PC側の表示は同様にレスポンシブをデフォルト設定で配置していますが、ここも皆様のサイトに応じて変更してください。

一覧ページ

修正するファイル:itiran.php

◇一覧ページのアドセンス追加は以下のサイトを参考にさせていただいております。

stinge5トップページに広告を増やしてアドセンス収益をアップさせるカスタマイズ | 日本の最新ニュースや話題を届ける情報ステーション

元のコード

org_ichiran

挿入するコード(アドセンス上用)

元のコードの1行目(最初の行)の前に以下のコードを挿入してください。
このコードの次から元のコードが始まります。
ただし、アドセンスコードはあなたのコードに書き換えてください。
ソースコピーは右下のViewかrawをクリックしてから行ってください。

【解説】
コードも考え方も固定ページと全く同じです。

1月21日追記:ネガティブマージンの削除

margin-left:-10px;だとやはり左にずれていました。

<?php if(is_mobile()) { ?>の下に記述されているdivタグを以下のとおり変更してください。

【変更前】
<div style="padding-bottom:10px; margin-left:-10px; text-align: center;>

【変更後】
<div align="center">

よろしくお願いします。

元のコード

org_ichiran2

挿入するコード(アドセンス下用)

元のコードの30行目と31行目の間に以下のコードを挿入してください。
ただし、アドセンスコードはあなたのコードに書き換えてください。
ソースコピーは右下のViewかrawをクリックしてから行ってください。

【解説】
コードも考え方も固定ページと全く同じです。

7月6日追記:一行目<?php endif; ?>コードの削除

コードが重複していたので削除しました。大変失礼いたしました。

 記事ページ

ダブルレクタングル対応:記事の幅拡大

修正するファイル:style.css

◇ダブルレクタングル対応は以下のサイトを参考にさせていただいております。

STINGER5でアドセンスの配置を記事下ダブルレクタングルに変更してみました

元のコード(style.css)

org_style

修正箇所

※これは子テーマのstyle.cssです。

style_mimimum

max-widh:980px; の 980 を 1100 に変更しています。

子テーマを採用している場合は、子テーマ側のstyle.cssを修正してください。
また子テーマ側のstyle.cssを修正しても変更が反映されない場合は、

子テーマのstyle.cssに入力したCSSが反映されない理由と対策

を参考にしてみてください。

ダブルレクタングル対応:アドセンス横並び

修正するファイル:style.css

元のコード(style.css)

style_stinger

挿入するコード

元のコードの1017行目と1018行目の間に以下のコードを挿入してください。
コードの上にマウスを持っていくと、コードをコピーするためのコマンドバーが1行目にプルダウン表示されます。
ソースコピーは右下のViewかrawをクリックしてから行ってください。

ダブルレクタングル対応:記事ページ修正

修正するファイル:single.php

元のコード

single_stinger

修正するコード

元のコードの52行目から60行目までを、以下のコードと差し替えてください。
ソースコピーは右下のViewかrawをクリックしてから行ってください。

 スマホ アドセンスレスポンシブ対応:記事ページ修正

修正するファイル:single.php

◇スマホ アドセンスレスポンシブ対応は以下のサイトを参考にさせていただいております。

Stinger5のスマホ表示に320×100サイズのアドセンス広告を設置する手順 | 黒猫さんぽみち

元のコード

single_ad

挿入するコード

元のコードの43行目と44行目の間に以下のコードを挿入してください。
ただし、アドセンスコードはあなたのコードに書き換えてください。
ソースコピーは右下のViewかrawをクリックしてから行ってください。

【解説】
固定ページや記事ページと同じく、スマホ表示の場合だけアドセンスのレスポンシブコードを横長の設定で配置しています。

1月21日追記:ネガティブマージンの削除

margin-left:-10px;だとやはり左にずれていました。

<?php if(is_mobile()) { ?>の下に記述されているdivタグを以下のとおり変更してください。

【変更前】
<div style="padding-bottom:10px; margin-left:-10px; text-align: center;>

【変更後】
<div align="center">

よろしくお願いします。

参考にさせていただいたサイト

STINGER5でアドセンスの配置を記事下ダブルレクタングルに変更してみました

子テーマのstyle.cssに入力したCSSが反映されない理由と対策

Stinger5のスマホ表示に320×100サイズのアドセンス広告を設置する手順 | 黒猫さんぽみち

はてなブログのスマホ用Googleアドセンスお勧め設定!iPhone6やiPhone6Plusにも最適! - マネー報道 MoneyReport

沢山の記事を検索したので参考にさせていただいたサイトを全部網羅していないかもしれませんが、まずはサイトの管理者の方々に深く感謝申し上げます。

留意事項

◇必ず環境バックアップを取ってから試してください。
◇スマホはiPhone5Sで試しています。
◇動作しない場合に適切な回答ができない場合があります。
◇動作保証はいたしかねますので、予めご了承ください。
6月19日追記:スマホのアドセンス表示について
コンテンツの記事が少ないとスマホ表示でレスポンシブとレクタングルのアドセンスが同一画面に表示されてしまうことがあります。必ず公開前に表示テストをしてください。

まとめ

※利用による幸せは次の人へ繋いでください。(STINGER5ダウンロードサイトより)

少しでもお役にたてれば幸いです。


-ITつれづれなるままに
-, , , , , , , , , , , ,

このボタンをクリックすると記事タイトルとURLがコピーされます。
メールやメモ帳などに貼り付けてご利用ください。

TOP