やりたいこと、できていますか?

読者です 読者をやめる 読者になる 読者になる

やりたいこと、できてる?

努力、忍耐、継続、自己否定の苦しい世界から、ゆるっと楽しく生きる毎日へ。頑張り屋さんを卒業して、あなたの心に従って生きる方法を一緒に探すブログです。

アドセンスを非表示に!横並びにも対応させる方法


スポンサーリンク
f:id:oyasumin-seijin:20161123234359j:plain

こんにちは!
自分の「やりたい!」を究めるブロガー、おやすみ星人です!


数日前、私はアドセンスを記事ごとに非表示にする設定をしていました。
参考記事を見ていたのですが、とある理由で設定に1時間半も使ってしまいました...。


アドセンスを非表示にする方法は、はぴらきさんとらくからちゃさんが作ってくださっています!

なぜ時間がかかったかというと、私の場合はアドセンスを2つ横並びにしたり、文中に自動表示にする方法を取っていたからです。
今までのやり方だとスムーズにできず、本当に苦戦しました。

そこで私なりに見つけた方法で、横並び・自動表示したアドセンスを非表示にする方法をご紹介したいと思います!

ちなみに私はHTMLとCSSの知識が全くありません。
謙遜ではありません。本当にないんです。

もしうまくいかなったとしても、私はアドバイスや改善ができないのでご了承ください。すみません...
もっとこうした方が良いよというアドバイスがあれば、教えていただけると嬉しいです。

アドセンスを非表示にする

アドセンスを非表示にする大まかな流れは
①アドセンスの広告ユニット用コードをコピーし、広告ユニット名を少し移動する
②アドセンスの上に非表示コードを貼る
という流れでやります。

①広告ユニット用コードを移動する

まずアドセンスの広告ユニット用コードをコピーし、記事上・下に貼りつけます。
貼りつける場所は、デザイン>カスタマイズ(工具のマーク)>記事>記事上・記事下になります。

ここの記事では広告ユニット名を<!-- 広告ユニット名 -->とします。
コードはいったんメモ帳に貼ると楽です。

<style>
.ad-unit-name { width: 320px; height: 50px; }
@media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ad-unit-name { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告ユニット名 -->
<ins class="adsbygoogle ad-unit-name" style="display:inline-block" data-ad-client="ca-pub-1234567890123456" data-ad-slot="0987654321"></ins>
<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

コピーした広告ユニット名(オレンジの部分)を下に移動させます。
詳しくははぴらきさんのブログをご覧ください。

<style>
.ad-unit-name { width: 320px; height: 50px; }
@media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ad-unit-name { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle ad-unit-name" style="display:inline-block" data-ad-client="ca-pub-1234567890123456" data-ad-slot="0987654321"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
<!-- 広告ユニット名 -->

 

②①の上に非表示コードを貼る

先程移動させた広告ユニットコード①の上に、こちらの非表示コードを貼ります。
これによりタグ付けをするだけで簡単に広告を非表示にできます。
詳細はらくからちゃさんのブログをご覧ください。

<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>

ちなみにタグ付けのやり方は、記事の編集中に「広告不要」というカテゴリを作ってそこに分類するだけでできます。
カテゴリを別の名前にしたい場合、オレンジ色の"広告不要"をお好きな文字にしてください。

③2つ目以降のアドセンス

アドセンスを貼る場合、いくつか貼っている方がほとんどだと思います。
なので2つ目以降は、この非表示コードをアドセンスの貼りつけるだけで大丈夫です。

<script>adsFilter();</script>

 

④スマホの非表示コード

スマホ版はアドセンスの非表示コードがPCと異なります。
貼りつける場所は、デザイン>スマートフォン>記事上・記事下どちらでも大丈夫です。
なお、2つ目以降の非表示コードは③のPC版と同じです。

<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 pageTag=document.getElementById("body");
function adsFilter(){
if(pageTag.getAttribute("class").indexOf("category-"+noAdsTag)!=-1){
document.write('<!--');
}
}
adsFilter();
</script>

 

横並びのアドセンスを非表示にする

アドセンスを横並びにすると、広告収入がアップすると言われています。
ダブルレクタングルとも呼ばれていますね。
レクタングルは長方形という意味です。

今回はそらさんの記事を参考に、アドセンスを横並びにしてみました。

記事内にはこのようにアドセンスを横並びにするコードが書かれています。

<table>
<tr>
<td>1個目のアドセンスコード(左側)</td>
<td>2個目のアドセンスコード(右側)</td>
</tr>
</table>

こちらを見ていただくとわかるように、<table>や<tr>などの文字が並んでいます。
私はこの意味を知らなかったため、広告ユニット名を移動したり非表示コードを貼り付ける場所が全くわかりませんでした。

そこで何となく色々試行錯誤した結果、この方法で広告が消えたので紹介します。

①横並びのコードを貼る

広告ユニット用コードをコピーして、横並び用のコードに貼りつけます。広告ユニット名はオレンジの部分です。
貼りつける場所は先程と同じ記事上・記事下です。

<table>
<tr>
<td><style>
.ad-unit-name { width: 320px; height: 50px; }
@media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ad-unit-name { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- アドセンス左側 -->
<ins class="adsbygoogle ad-unit-name"
style="display:inline-block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></td>

<td><style>
.ad-unit-name { width: 320px; height: 50px; }
@media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ad-unit-name { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- アドセンス右側 -->
<ins class="adsbygoogle ad-unit-name"
style="display:inline-block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></td>
</tr>
</table>

 

②広告ユニット名を移動する

続いて広告ユニット名を移動します。ユニット名はオレンジで示してあります。

<table>
<tr>
<td><style>
.ad-unit-name { width: 320px; height: 50px; }
@media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ad-unit-name { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle ad-unit-name"
style="display:inline-block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></td>
<!-- アドセンス左側 -->

<td><style>
.ad-unit-name { width: 320px; height: 50px; }
@media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ad-unit-name { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle ad-unit-name"
style="display:inline-block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></td>
<!-- アドセンス右側 -->
</tr>
</table>

 

③アドセンス非表示のコードを挿入

非表示コードはオレンジで示した部分に貼り付けしてください。
一つ目のアドセンスには長い非表示コードを、二つ目以降は短いコードを貼りつけてください。コードは目次の1-②、③にあります。

(アドセンス非表示コードをここに貼り付け)
<table>
<tr>
<td><style>
.ad-unit-name { width: 320px; height: 50px; }
@media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ad-unit-name { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle ad-unit-name"
style="display:inline-block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></td>
<!-- アドセンス左側 -->
(アドセンス非表示コードをここに貼り付け)
<td><style>
.ad-unit-name { width: 320px; height: 50px; }
@media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ad-unit-name { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle ad-unit-name"
style="display:inline-block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></td>
<!-- アドセンス右側 -->
</tr>
</table>

以上で完成です!

④スポンサーリンクを表示する場合

アドセンスの上にスポンサーリンクを表示する場合、アドセンス非表示コードと<table>の間に挿入してください。
スポンサーリンクはオレンジの部分です。

(アドセンス非表示コードをここに貼り付け)
<center><span style="font-size: 8px"><center>スポンサーリンク</center></span><center>
<table>
<tr>
<td><style>

 それから私は文中のアドセンスを自動表示にしているのですが、こちらも非表示にできるように設定しました。
自動表示の記事を消す方法についてはまた後日アップします!


関連記事▽

おやすみ星人ってどんな人?▽