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

涙拭けよ

日常の笑える話から、ラーメンなどのグルメ情報、果ては妖怪ウォッチや自己啓発までなんでもござれなブログ。

スポンサーリンク

はてなブログの記事直下にAdSense広告を縦に2つ並べる方法

ブログカスタマイズ

ども!

守形レイジです。

 

今回は少しテクニカルな話をします。

 

※スマホは1ビューに2つ以上広告があるとダメらしいので、気をつけてください。

PC版は、ダブルレクタングルのコードをdivと/divの間に挟むことをオススメします。 

 

 

広告の貼り方を何とかしたかった。

前回の記事をみてアドバイスしてくださった方がいました。

PCからの表示ですが、adsenseは一番下のやつをはてなスターの上あたりに表示してみたらちょっとは良さそうな気がします。僕は記事とスターの間に2つ縦に並べるようにしてから安定しましたねー

いつも仲良くしているアリカワシュウヘイ(idmenheraneet)さんです。

僕も記事のずっと下に表示される広告に意味を感じていませんでしたし、サイドの広告も機能していないので、なんとかしたいなと思っていたのです。

「縦の視点」で広告を貼りたいという気持ちがありました。 

 

 

はてなスターの上に貼るには?

やはりあまりにも下にありすぎて、絶対にクリックされないのでこれは何とかしたかったです。

ソーシャルボタンの下に出てしまうのでみられる頻度が少なくなります。

しかし、普通に貼り付けるだけでははてなスターの上には表示できません。

そこで参考にしたのはこちらのブログ

【はてなブログ】記事本文の直下にアドセンスを設置する方法 - チップの日常

 

記事に直接毎回手動で貼るのは面倒なので、自動的に挿入される方法が欲しかったのです。

 

簡単に要約します

<div id="my-footer">

※ここにアドセンスのコード貼り付け

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

 

 上記のコードをカスタマイズの中の「記事下」の部分に貼り付けます。

※ここにAdSenseコードの貼り付け

というところをAdSenseの広告コードに置き換えます。

んでもって2つ分のコードをこの部分に連続で貼れば縦に連続して、かつ、ソーシャルボタンやはてなスターの上に貼れます。

 

 

もう一点大事なことがあります。

ちなみに、上記コードの

 <div id="my-footer">

 </div>

 これの中に書いたものは記事直下に表示されるので、アドセンス以外の広告の設置やお知らせ等を書き込むのにも便利なんじゃないかなと思います。

 この二行の間に広告コードを2つ貼ってください。

僕はレクタングル広告の大きめのを貼っています。

携帯用には一回り小さいやつを貼ってますね。

携帯は広告が大きいと、横のスクロールが発生してしまうので気をつけてください。

 

僕はこんな文言も上に表示してみました。

<P>もしこの記事が気に入って頂けましたなら、はてなブックマークやツイッター等
でシェアをお願い致します。非常にはげみになります。</p>

これは自分流にアレンジして使ってみてください。

これもソーシャルボタンのずっと下に表示されていたので、変更できて良かったです。

 

今回はいつもとは違う記事なので、深夜に更新してみました。

また疑問に思ったことはこんなかんじで記事にしていきます。

 

 

前回の記事はこちら。

読むと葛藤が見れますwww

 

sugatareiji.hatenablog.com

 

 

ではまた次回!

スポンサーリンク

Copyright© 涙拭けよ All Rights Reserved.