今日は技術話題をやろうかな。記事文中にgoogleアドセンスが挿入されているはずだ。これは自動的にpタグを数えて半分ぐらいの所に突っ込むようにしている。こいつをちょっと解説しておこう。
はてなブログでgoogleアドセンスを文中に挿入するカスタマイズは結構出回っている。だけど、大概の場合、見出しタグを数えてアドセンスを移動させるカスタマイズばかりだ。
english-apple-diy.hatenablog.com
まぁ見出しをちゃんと使っているブログならばこれで対応できるのだろうが、僕のブログみたいに見出しをまったく使わないブログではこの方法では文中へのアドセンスの自動挿入ができない。
いや、実を言うと上で紹介した２番めのU太郎 (id:uxlayman)さんのフォームで色々と弄れば出来るっぽいんだけど、面倒くさいから自分でコード書き換えちゃった。jqueryとjavascriptを読める奴だったらそんなに難しい事をしているわけでもないから分かるはず。
だから正直言って技術的な話ではほぼほぼ、U太郎さんのコードをパクってきてちょろっと弄っただけなんだけど、自分用メモの意味で書き残しておこう。元のコードではentry-contentクラスのdivタグを数える様ににしてたからamazonのリンクカードとかblockquoteの中にアドセンスが飛んじゃってデザインが崩れていたんだ。だからちょっと微調整した。
参照にしたのはここ。
ソースはこちら。
<script> var adsenseCode = (function () {/* <center><p>SPONSORED LINK</p></center> // ここにGoogleアドセンスのコードを入れる <p> </p> */}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>'); addEventListener("DOMContentLoaded", function() { var $target = $('.entry-content blockquote,.entry-content p').not('.entry-content blockquote>p'); $target.eq(Math.floor($target.size() / 2)).before($('.insentense-adsense')); $('.insentense-adsense').html(adsenseCode); }, false); </script> <div class="insentense-adsense"></div>
ちなみにコメントアウトされた所にいれるGoogleアドセンスのコードは/scriptを/scripに書き換えないといけない。こりゃヒアドキュメントを置換して実行するスクリプトに置き換えている為に必要な作業。そのままコードを入れると実行されない。
コードを記述する場所は
デザイン設定 > カスタマイズ > 記事 > 記事上下のカスタマイズ > 記事上のフォーム
ちなみにある程度はてなブログのカスタマイズを分かっている人を前提で話しているけど、メモ帳なりにバックアップを取りながら編集しないと痛い目にあうぞ？ 他のカスタマイズなども入れているとデフォルトのブラウザのエディターだけでは編集しにくいはずだ。
まぁ、前述したけど大した変更はしていない。僕のブログに合わせてタグの読み込み方を変更しただけだ。
var $target = $('.entry-content blockquote,.entry-content p').not('.entry-content blockquote>p');
ここの部分のみ変更。entry-contentクラスのblockquoteタグからpタグの順番で読むようにしただけ。U太郎さんのサンプルではpタグとdivタグを読み込むようにしてたから、引用の中にまでアドセンスが挿入されるようになってたのよね。だからちょっとだけ書き換えた。この箇所を変更したら色んな所に応用できると思う。
というか、自分用メモなのでこれをコピペして動かないって言われても責任持たない。ある程度、javascriptとjqueryを読める人だったらそんなに難しいコードでもないだろ。はてなブログの文中へのアドセンス自動挿入は沢山記事があるけど、見出しのない場合の情報が殆どなかったから書いておいた。ヒントにして色々と書き換えてみてtry&errorで対応してください。
ソースを参考にしたU太郎さんには多謝を m(_ _)m
