皆さん、お久しぶりです。
ブログ創設からここまで200日以上ブログ記事の更新を毎日続けてきましたが、ここ最近忙しかったので思い切って毎日投稿をやめ、一旦ブログを休むことにしました。
休んでいる間、何もしていなかったというわけではなく、主にブログデザインを変更するなど試行錯誤していました。
今回は、その途中経過について報告します。
グーグルアドセンス
ブログを開設した当初の最初の目標は、グーグルアドセンスを導入することでした。
グーグルアドセンスはご存じの方も多いでしょうが、この記事にもあるようなインターネット広告で、気になった方がクリックすると、私の懐にチャリンと入ります。
初心者ブロガーの関門とも言われているのが、このアドセンスの審査です。
1回目は20記事ほど上げて申請し、審査落ち。
もう10記事上げたタイミングで、再度申請すると今度は合格しました。
合格時は飛び上がる思いで、今後の記事執筆のモチベーションとなっていましたが、最近はあるタイミングにこれが煩わしいと思うことがあります。
それが禁止項目です。
禁止項目
アドセンスはどの記事にでもつけていいというわけではなく、コンテンツによっては禁止しているものがあります。
それがこちら。
禁止コンテンツ一覧
- 性的なコンテンツユーザーに強いショックや不快感を与えるコンテンツ
- 爆発物に関するコンテンツ銃や銃の部品と関連商品に関するコンテンツ
- その他の武器および兵器に関するコンテンツ
- タバコに関するコンテンツ
- 危険ドラッグに関するコンテンツ
- アルコールの販売や乱用に関するコンテンツ
- オンライン ギャンブルに関するコンテンツ
- 処方薬に関するコンテンツ
- 未承認の医薬品やサプリメントに関するコンテンツ
- Google Play ストアから削除されたアプリ
こういった内容がある記事に、アドセンス広告を載せていた場合、警告又は一発でBANを食らう可能性があります。
私も概ね納得しているのですが、お酒のアマゾンリンクを貼ったらアウト、というものはちょっと厳しいかなと思います。
だから、発想を転換させて、お酒の記事にはアドセンス広告をつけないようにしようと思いました。
特定記事で広告を非表示にする
アドセンスを自動広告にしている場合、特定記事で広告を非表示にすることは割と簡単で、アドセンスのページに非表示にしたいURLを乗せるだけ。
しかし、私はアドセンスの自動広告ではなく、スプリクトを入れて1つ目の見出しの上や記事下など、広告場所を固定しているためそれができませんでした。
なかなか私と同じような環境の人がおらず、探すのに苦労しましたが、根気よく探してこのページを見つけました。
こちらでは、アドセンスの位置を固定しながら特定記事で広告を非表示にできるという、まさに私が求めていたものでした。
位置固定&特定記事非表示コード
コードを一つ抜粋させていただきます。
<br /><script>
/*
* AdSense Filter v1.0.0
* Date: 2014-12-10
* Copyright (c) 2014 http://hapilaki.hateblo.jp/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
noAdsTag="広告不要"; //広告を設置しないタグを指定
var pageTags=document.getElementsByTagName("meta");
function adsFilter(){
for(var i=0;i<pageTags.length;i++){
if( ("article:tag"==pageTags[i].getAttribute("property")) && (noAdsTag == pageTags[i].getAttribute("content") ) ){
document.write('<!--');
break;
}
}
}
adsFilter();
</script>
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p>スポンサードリンク</p><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-********************"
data-ad-slot="**********"
data-ad-format="link"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || ).push({});
</script><!-- 広告名 -->
<p> </p>
</div>
※青字に自分のアドセンスコード
これを入れると、1つ目の見出し前に広告を固定して、広告不要のタグを入れると表示されなくなります。
問題発生
上記のコードを入れてみたところ、確かに広告不要のタグを入れたら広告が消えました。
作戦成功と思いましたが、新たな問題点が発覚しました。
2つの画像を見比べてください。
前者が普通の記事、後者が広告不要のタグを入れた記事。
PC画面の同じ位置で撮った画像ですが、なにかおかしいところがありませんか?
右側の検索欄やサイドバーがなくなっています。
さらに、フッダにあったコピーライトがなぜかタイトル上の日付と重なっています。
サイドバーは、記事の真下に来ていてページが細長く伸びている状態になりました。
いろいろと、試行錯誤しましたが解決策は見つけらませんでした。
ネットを探ってみると、プログラミング専門の質問サイトteratailというものがあって、そこで質問してみました。
すると、こんな回答が。
これは、
<script>adsFilter();</script>から
<!-- 広告名 -->までが消える、というスクリプトです。
なので、
<script>adsFilter();</script><script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3,h4,h5');
$target.eq(Math.floor($target.size() / 2)).before($('.insentence-adsense2'));
}, false);
// ]]></script>
<div class="insentence-adsense2">
<p style="text-align:center; font-size: 80%" >スポンサーリンク<br>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2182608187039470"
data-ad-slot="3928620735"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 広告名 -->
</p>
</div>↑このコードは広告不要の時に↓こうなります。
</p>
</div>
余分な閉じタグが発生することになり、レイアウトが壊れます。
解決方法ですが、<!-- 広告名 -->を</div>の下に入れてください。Lhankor_Mhy
天晴!見事解決しました。
元サイト様は異常はなかったかも知れませんが、私のデザインテーマ「minimalism」ですと、元サイト通りの順番だと異常が起こるということだと思います。
これで、今度から広告不要のタグを入れたらアドセンス広告が出なくなります。
Lhankor_Mhyさんありがとうございました。