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

無趣味な人

生まれてこの方、無趣味。ハマったものこれといって特になし。

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

PC周りや開発環境に関する小技 Web収入

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

これじゃ面倒だ。

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

ので、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> 

ここで、下の4行を各々変更しなければならない。 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は1ページにつき3つまでしか表示されないので、空白が出来てしまう。 上記の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>

ここでも、下の4行を各々変更しなければならない。 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";

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

以上