はてなブログ 記事のタイトル下に広告を追加する

記事の下にアドセンスを追加するのはデザインのカスタマイズからできる。 ただし、これは記事個別のページだけである。 記事の最初、タイトルの下に広告を追加するのはデザインのカスタマイズから出来ない。 なぜだろう。はてな側からするとタイトル下に広告をはってほしくないのだろうか。 どうしても貼りたい人は、記事毎にコードを貼り付けているらしい。

これじゃ面倒だ。

• すべての記事の最初にアドセンスを追加したい。
• 記事個別のページだけじゃなくてトップページにも追加したい。
• 記事毎にコードを追加するのは面倒くさい。

ので、JavaScriptを少しいじった。

PCから見た時に、タイトル下にAdsenseを表示する方法

デザイン→カスタマイズ→ヘッダの タイトル下の 「HTMLを記述できます」 というところに、以下のコードを貼り付ける。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 
<script type="text/javascript">

var scriptText = "";

scriptText += "<script async src=\"//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></scr" + "ipt>" + "\n";
scriptText += "<!-- 広告ユニット名 -->" + "\n";
scriptText += "<ins class=\"adsbygoogle\"" + "\n";
scriptText += "     style=\"display:inline-block;width:300px;height:250px\"" + "\n";
scriptText += "     data-ad-client=\"ca-pub-0000000000000000\"" + "\n";
scriptText += "     data-ad-slot=\”0000000000\"></ins>" + "\n";
scriptText += "<script>" + "\n";
scriptText += "(adsbygoogle = window.adsbygoogle || []).push({});" + "\n";
scriptText += "</scr" + "ipt>" + "\n";
scriptText += "" + "\n";

$(function(){
    $(".entry-content").prepend(scriptText);
});
</script> 

ここで、下の４行を各々変更しなければならない。 Google Adsenseで広告ユニットからコードを取得し見比べれば分かる。

scriptText += "<!-- 広告ユニット名 -->" + "\n";
scriptText += "     style=\"display:inline-block;width:300px;height:250px\"" + "\n";
scriptText += "     data-ad-client=\"ca-pub-0000000000000000\"" + "\n";
scriptText += "     data-ad-slot=\”0000000000\"></ins>" + "\n"; 

これで、PCからは記事の一番最初にAdsenseが表示されるようになる。 記事個別のページだけじゃなくて、トップページでも表示される。 Adsenseは１ページにつき３つまでしか表示されないので、空白が出来てしまう。 上記のAdsenseのコードをアドネットワークを追加した忍者AdMaxなどに変更すれば良いと思う。 私自身は広告だらけになってしまったので、これは使っていない。

スマホから見た時に、タイトル下にAdsenseを表示する方法

デザイン→カスタマイズ→記事の 記事下の 「HTMLを記述できます」 というところに、以下のコードを貼り付ける。 また、スマートフォン版にも表示するにチェックしてあることを確認する。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 
<script type="text/javascript">

var scriptText = "";

scriptText += "<script async src=\"//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></scr" + "ipt>" + "\n";
scriptText += "<!-- 広告ユニット名 -->" + "\n";
scriptText += "<ins class=\"adsbygoogle\"" + "\n";
scriptText += "     style=\"display:inline-block;width:300px;height:250px\"" + "\n";
scriptText += "     data-ad-client=\"ca-pub-0000000000000000\"" + "\n";
scriptText += "     data-ad-slot=\”0000000000\"></ins>" + "\n";
scriptText += "<script>" + "\n";
scriptText += "(adsbygoogle = window.adsbygoogle || []).push({});" + "\n";
scriptText += "</scr" + "ipt>" + "\n";
scriptText += "" + "\n";

$(function(){
    
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
       $(".entry-content").prepend(scriptText);
    }
});
</script>

ここでも、下の４行を各々変更しなければならない。 Google Adsenseで広告ユニットからコードを取得し見比べれば分かる。

scriptText += "<!-- 広告ユニット名 -->" + "\n";
scriptText += "     style=\"display:inline-block;width:300px;height:250px\"" + "\n";
scriptText += "     data-ad-client=\"ca-pub-0000000000000000\"" + "\n";
scriptText += "     data-ad-slot=\”0000000000\"></ins>" + "\n";

これでスマホから記事個別ページを見た時に記事上部に広告が表示される。

以上