まいにちきろくノート

まいにちきろくノート

気になったことをきろくしていきます。

スターボタンの上に「ブログ村バナー」と「アドセンス広告」を自動で表示させる方法

こんにちは。

今日は、スターボタンの上に「ブログ村バナー」と「アドセンス広告」を自動で表示させる方法について。

無料版はてなブログでもできました!!!

嬉しすぎたので、ご報告します。

 

もくじ

 

デザインの「記事下」に直接コードを貼りつけても、関連記事より下に表示されてしまう

優しい方から教えていただいたんです。

アドセンス広告は記事の終わりに貼るのがオススメ!クリック率がイチバンいいからね!と。

はてなブログだと、ちょうどスターボタンの上の部分です。 

 

でも、いざ「デザイン」の「記事下」部分にアドセンス広告のコードを貼っても、広告はスターボタンよりさらに下、関連記事より下の部分に表示されてしまうんです。

 

はてなブログはデフォルトでそういう仕様になっているそうです。

困りました。

 

 

アドセンス広告をスターボタンよりも上に表示させる方法

こちらのブログさんがわかりやすくまとめてくださっていました!素敵!

www.love-wife-life.com

 

こちらのコードを使わせていただくことで、広告の位置が無事スターボタンの上に来ました。

f:id:tmt_krk:20200419025630j:image

 

 

スターボタンの上に「メッセージ」と「ブログ村のバナー」と「アドセンス広告」を自動で表示させる方法

上で引用した記事を参考にさせていただき、ブログ村のバナーも自動で表示されるようにしました。

こんなかんじです↓

f:id:tmt_krk:20200419030114j:image

青で囲っているところは全て自動で表示しています。

「メッセージ」というのは、「★ランキングに参加しています〜」の部分のことです。

書いたコードは下記の通りです。

 

↓↓↓ここから↓↓↓

 <!--記事下バナーとアドセンス-->
<div id="my-footer">
-----------------------------<br>
<b><font color="#ff9393">★ランキングに参加しています!</font></b><br>
<b><font color="#ff9393">応援していただけると嬉しいです!!</font></b><br>
※ここにブログ村バナーのコードを張り付け

<p style="text-align:center; font-size: 80%" >スポンサーリンク<br>
※ここにアドセンス広告のコードを張り付け
</p>
</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>
<!--記事下バナーとアドセンスここまで-->

↑↑↑ここまで↑↑↑

 

 

<br>は「ここで改行」の意味です。

メッセージを太字にしたくない場合は、<b></b>を消してください。

メッセージに色をつけたくない場合は、<font color="#ff9393"></font>を消してください。

メッセージの色をほかの色に変えたい場合は、ff9393の部分を自分の好きな色のコードに変えてください。

私はこのサイトから選びました↓

www.colordic.org

 

これを「デザイン」の「記事下」に書き込めば、自動でスターボタンの上に表示されるようになります。

 

 

おわりに

ぜひともコピペして使っていただきたいと思います。

とっても!楽ができますよ!!!

 

コードがうまく反映されたときはとってもとってもテンションが上がりました。

そして貼ったその日にすぐクリックがあったことでさらにテンションが上がりました。笑

 

どなたかのお役に立てれば嬉しいです。