こんにちは。

昨日友人からはてなブログのアドセンス挿入方法(記事を書くたびに自動的にアドセンスが表示されるようにしたい)と相談されたので、どうすればいいか?

考えていました。

はてなブログは実際触ったことがなかったので、四苦八苦w

で、宿題として調べておくね!ということで調べました(^^♪

あおねいろさんのブログを参考に開設したいと思います。

記事見出し直下にアドセンス広告を挿入する方法

ハテブロ 解説
適当に作ったら、画質悪かったw

色々すいません( ;∀;)

h1タグが2つ設定あって、h2タグがなくて・・・とはてなブログこれでいいんか?とつっこみたくなるのですが、そこは今回のお題ではないのでスルーします。

さて、この見難い(醜い)画像の赤枠上側のすぐ下にアドセンスの広告を表示させたいわけです。

下記のコードをコピペでOK!

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p style="text-align:center;font-size: 80%" >スポンサーリンク<br>
<!--アドセンスコード-->
</p>
</div>

アドセンスコードは自分のコードです( ^^) _旦~~

<!--アドセンスコード--> 

の部分に自分のアドセンスコードにしてください。

設定は、はてなブログの管理画面から『デザイン』>『カスタマイズ』>『フッタ』に移動します。

そしてフッタのhtmlの記述ができますってとこに書き込んで保存するだけでOKです( *´艸`)

では、中見出しの直下に自動的にアドセンス広告を表示させるのは、下記コードをコピペして、はてなブログの管理画面から『デザイン』>『カスタマイズ』>『フッタ』に移動して書き込むだけです。

※アドセンスコードは自分のコードを入れてくださいねw

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h4');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p style="text-align:center;font-size: 80%" >スポンサーリンク<br>
<!--アドセンスコード-->
</p>
</div>

記事直下にアドセンス広告を挿入する方法

下記のコードをコピペでOK!

<div id="my-footer">
<p style="text-align:center;font-size: 80%" >スポンサーリンク<br>
<!--アドセンスコード-->
</div>
<script>
var myFooter=document.getElementById("my-footer");
var temp=myFooter.cloneNode(true);
myFooter.parentNode.removeChild(myFooter);
document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

先ほどとほとんど同じですが、記述先は

管理画面の『デザイン』>『カスタマイズ』>『記事』>『記事下』

にコピペしてください。

そしたら、SNSのシェアボタンの前に表示されるようになります。

スマホに表示も同様にする

『デザイン』>『スマートフォン』>『記事』と『フッタ』にあるPCと同じHTMLを表示するの箇所にチェックを入れ変更を保存します。

これで、スマホで見ても、同様の表示設定となります。

広告を二つ並べたい(画像を指定したい)

僕のブログの記事トップと記事直下に広告が二つならんでいます。

PCのキャプチャです。

スマホだと、2段に表示されます。

このようにする場合は、CSSを追記し、先ほどコピペしたものに少しだけコードを足してあげます。

CSSのコード

.ad-l {
   width: 340px;
   text-align: center;
   float: left;
   margin-right: 20px;
}

.ad-r {
   width: 340px;
   text-align: center;
   float: left;
}

上記を『デザイン』>『カスタマイズ』>『デザインCSS』にコピペして保存してください。

記事見出し直下のコード

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<div class="ad-l">
<p style="text-align:center;font-size: 80%" >スポンサーリンク<br>
<!--アドセンスコード-->
</p>
</div>

<div class="ad-r">
<p style="text-align:center;font-size: 80%" >スポンサーリンク<br>
<!--アドセンスコード-->
</p>
</div>
</div>

上記を『デザイン』>『カスタマイズ』>『フッタ』にコピペでOK!

記事中身だしに2つのアドセンス広告コード

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h4');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<div class="ad-l">
<p style="text-align:center;font-size: 80%" >スポンサーリンク<br>
<!--アドセンスコード-->
</p>
</div>

<div class="ad-r">
<p style="text-align:center;font-size: 80%" >スポンサーリンク<br>
<!--アドセンスコード-->
</p>
</div>
</div>

上記を『デザイン』>『カスタマイズ』>『フッタ』にコピペでOK!

記事直下に2つのアドセンス広告コード

<div id="my-footer">
<div class="ad-l">
<p style="text-align:center;font-size: 80%" >スポンサーリンク<br>
<!--アドセンスコード-->
</p>
</div>

<div class="ad-r">
<p style="text-align:center;font-size: 80%" >スポンサーリンク<br>
<!--アドセンスコード-->
</p>
</div>
</div>
<script>
var myFooter=document.getElementById("my-footer");
var temp=myFooter.cloneNode(true);
myFooter.parentNode.removeChild(myFooter);
document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

上記を『デザイン』>『カスタマイズ』>『記事』>『記事下』にコピペでOK!

注意事項

アドセンスの広告数

アドセンスの広告数は、現在制限がありません。

なので、いくつ貼ってもOKです。 ですが、あまりにもいやらしい貼り方などをすると、アカウント停止につながるのでご注意。

アドセンスのスポンサーリンク・広告表示

アドセンスを貼って、「広告」や「スポンサーリンク」など表示させなければいけない!

と思っている人が多いですが、そんなことはありません。無くてもOKです。

ただ、広告とわかるように記載するのであれば、「広告」か「スポンサーリンク」のどちらかの文字だけ使ってもいいよとGoogleが言っています。

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

広告のラベルには、「広告」または「スポンサーリンク」のみを使用してくださいとありますが、広告ラベルを必ず記載してくださいとは書いていません。

この、2のどちらかのみを使用してください。と書いてあるのでそれが勘違いを呼んで、表示させなければいけないと広まってしまったようですw

色々なブログで、間違った認識が蔓延しています。

また、スポンサードリンクなのか、スポンサーリンクなのか?ということですが、上記の引用通り、使用するのであれば、スポンサーリンクということです。

分からなかったら記載しないようにしてください。

上記コードも一応スポンサーリンクとしていますが、無くてもいいです。

むしろない方がスッキリしますので、邪魔な場合取っ払っちゃってください。

アドセンスの表示について

登録後すぐには表示されない
アドセンスは、登録したサイトにすぐに表示されなかったりします。

Googleが巡回して、表示させてあげよう!ってなってから表示されるようになります。(新規サイト作成・登録後24時間~48時間に表示)

広告枠が多すぎで表示されない
アドセンスの広告が多すぎると、広告枠の関係で表示されない場所がたまーにあります。

ここに広告入れてたのに、表示されない!って場合はこの場合です。

ブラウザの設定で表示されない
これは、ブラウザのスクリプトの表示設定(可能にしてあげる)で対応することができます。

スクリプト・プログラミングが邪魔して表示されない
外部設定・内部設定で、プログラミングが邪魔をしてアドセンスのスクリプトを読み込ませないようになっている場合があります。

これはこまります・・・設定を色々変更して調整してください。

プログラミングが出来る人は解除できるでしょうが、僕はできません。

この場合、ワードプレスだと、プラグインの衝突が影響していることがほとんどなので、プラグインの解除・有効化を繰り返して表示される場合とされない場合のプラグインを調査します。

影響のあるプラグインは使わなかったり、他のプラグインに変更したりします。

まとめ

はてなブログのタグ設定がむちゃくちゃやないか!とつっこみたくなりました。

h1が2つあって、h2がなくて・・・実際h1タグが複数あっても、いいっちゃいいのですが、文法的におかしくなるので避けたほうがいいですね。

基本的に各ページにh1は一つが鉄則ですよね・・・

はてなブログのカスタマイズは正直しにくいと感じました。

はてなブログで、カスタマイズができる人は、ワードプレスも対応できます。
むしろワードプレスの方が簡単と思いましたよw

phpなどは書けませんが・・・

色々ありますが、基本的にコピペで対応できるようにしたので、是非挑戦してみてください。

僕ははてなブログは使いません・・・

こんな記事も読まれています