はてなブログPROでグーグルアドセンスを記事中に設置する方法
どうも、@cucumbeking9です。
はてなブログをいろいろいじっていますがいまだに慣れません。
特にわからないのがGoogle Adscenceの広告設置方法。
アドセンスを記事中に挿入したいのですが、いまいちよくわかりません。
何回かに分けてアドセンスの設置方法について記事にしていきます。
アドセンスを記事中に設置する方法
設置する場所は以下の通り。
「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事」→「記事上」。
設置するコードは以下の通り。
<!-- START v1.0 params=[insentense-adsense,1,2,before,stay,,,true,広告禁止] from http://uxlayman.hatenablog.com/entry/2017/01/26/insentenseform -->
<script>
var adsenseCode = (function () {/*<p>広告</p>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scrip>
<!-- theTest -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</scrip><p> </p>
*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');addEventListener("DOMContentLoaded", function() {
if ($('meta[property="article:tag"][content="広告禁止"]').size() > 0) {
return;
}var $target = $('.entry-content h2,h3,h4,h5');
$target.eq(Math.floor($target.size() * 1 / 2)).before($('.insentense-adsense'));
$('.insentense-adsense').html(adsenseCode);}, false);
</script>
<div class="insentense-adsense"></div>
<!-- END v1.0 from http://uxlayman.hatenablog.com/entry/2017/01/26/insentenseform -->
上記のコードを貼り付けました。
これで記事の真ん中にアドセンスが表示されるようになりました。
実はこのコードは以前自分が作成した記事を参考にしました。
「あの時のオレ、ありがとう」
記事中にアドセンスを貼り付ける方法を調べましたが、どれもこれもなかなかうまくいきませんでした。
PCでは表示されるのでスマホでは崩れてしまう現象が発生。
悩んでいたところ、以前アドセンスの記事を書いたかどうか確認したら、ありました！！
うまく表示されない時
うまく広告が表示されない場合は、もう一度見出しを見直してみてください。
コードの間違い
コードの赤字の部分は通常scriptと表示されています。
ここを変更しないとうまく表示されません。
キャッシュの影響
キャッシュの影響で広告が表示されない可能性もあります。
その場合はブラウザの更新を行ってください。
自分はこれで解決しました。
まとめ
初歩中の初歩になります。
WordPressと勝手が違うので戸惑っております。
はてなブログのカスタマイズではなく、きちんとしたブログを書いていきたいです。
また同じ状況になった時に困るので、備忘録を残しておくために記事にしました。
