ブログ作成ボタンを押しちゃった

オッサンの実力を教えてやるぜ!

無料版はてなブログにアドセンスを設置する際のテーマと場所

どうも、ガンダムのオッサンです。

 

一月から始めた無料版はてなブログにアドセンスを導入しました。(当ブログではありません)

無料版のはてなブログははてなのサブドメインによる運営になりまして私ガンダムーンとは別のIDで行っています。その方法はコチラ

ガンダムーンとは紐づけされていないブログになるので自分から言わない限り全く別の他人が運営しているように見えるメリットがありますね、まあ私にとっては色々な実験の場であったりチャレンジの場として再びブログ作成ボタンを押しちゃった....という事になるのです。

そんな無料版はてなブログ、pro契約を行わない限りはてな運営の広告を消すことは出来ません。

でも少しPVが伸び始めてくると欲が出てくるというもの、無料版のはてなブログにも何とかアドセンス貼れないかなぁ...それで広告ばかりのような雰囲気にならないブログにする事が出来ないかなぁ....なんて思いながら色々と考えました。

 

という事で無料版はてなブログにアドセンスを貼りたい人の参考にどうぞ。

※これは既にアドセンスのライセンスを持っている方向けの記事です。無料版はてなブログはサブドメインになるのでこれからアドセンスの申請を行おうと考えている方は独自ドメインを取得してアドセンスのライセンスを取得から始めましょう。

レスポンシブテーマで運用する

無料版のはてなブログではスマホ表示のカスタマイズがほぼ不可能です。しかしアドセンスを導入する上でスマホ表示のカスタマイズが出来ないのは致命的... という事でレスポンシブデザインのテーマで何とかするしかありません。

 

んで、私が選んだテーマがこちら

Minimalism - テーマ ストア

レスポンシブデザイン優先で選びました。

現在は初めからhttps配信が可能となっていますが、混在コンテンツの修正について分からない方はコチラをどうぞ。

簡単に行ってしまえばサイドバーに検索を設置すると虫メガネの画像アドレスがhttpsじゃなかったよーってな話です。

完全にレスポンシブ設定にする

設定は簡単、「デザイン」「スマートフォンマーク」「詳細設定」でレスポンシブデザインにチェックを入れて保存するだけ。

f:id:gundamoon:20180419180314j:plain

これでクロームのデベロッパーツールでスマホ表示を確認、分からない人はスマホ実機とPCを使って確認しておきましょう。

記事内広告を使う

無料版のはてなブログをレスポンシブデザインにする理由はスマホ表示のカスタマイズが出来ないから、そしてどうせレスポンシブデザインでカスタマイズも難しいのだから表示される端末で自動的に大きさの変わる記事内広告を自動表示させれば楽だと考えたから...になります。

f:id:gundamoon:20180419181121j:plain

別にコレで無い広告ユニットでも大丈夫です。

ただ無料版はてなブログにははてな運営のレクタングル広告がそれなりに表示されるのでそれを差別化...という意味で記事内広告を選びました。

中見出し(h4)の上に一つだけ貼る

はてなブログの中見出しとはデフォルト状態だとh4になります。この記事で言えば「完全にレスポンシブ設定にする」の見出しですね、この見出しの上に記事内広告が一つだけ自動で表示されるようにしました。

 

貼り付けるコードがコチラ

<!--h4見出し上-->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h4');
$target.eq(Math.floor($target.size() / 2)).before($('.insentence-adsense2'));
}, false);
// ]]></script>
<div class="insentence-adsense2">
<p style="text-align:center;" >スポンサードリンク<br>

ココに自分のアドセンスコードをコピペ
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>
</div>
<!-- h4見出し上-->

 ココに自分のアドセンスコードをコピペの部分に自分のコードを貼って下さい。

貼り付ける場所はこちら

「デザイン」「スパナ模様のカスタマイズ」「記事下」になります。

f:id:gundamoon:20180419183623j:plain

ここに貼り付けるだけで中見出しの上に一つだけ自分のアドセンス広告が表示、スポンサードリンクの文字下に表示されます。

注意すべき点は記事を書く際に大見出しと中見出しを使う事、アドセンスのポリシー違反にならないように記事を書くのは当然ですね。

 

他の見出しに表示させない理由

無料版のはてなブログははてな運営の広告が沢山表示されてしまいます。そんな沢山ある広告に自分の広告を沢山表示させるとヤバそうな雰囲気がするので私は無料版はてなブログには中見出しの上に一つ設置...としました。

それでも文字数が3000文字ぐらいで見出しも多くつかうような記事であればもう何枚か追加しても良いかも...なんて思うけどヤリすぎるとグーグルさんから何か言われそうな気がしなくもないので安全策を取っています。

 

この辺の微妙なバランスが嫌だなぁ...と思う方ははてなブログpro契約を行って自分で好きなように広告を貼るのがよろしいかと....

 

ただねぇ、例えば私のように既にはてなブログpro契約を行っているブログが一つあり、更に無料版はてなブログでもう一つ運営、でも始めるにあたってPVとか収益とか分からないものに対してpro代を払うのもちょっとなぁ... でもアドセンス貼りたいなぁ....

なんて思う自信がないけど強欲な方の為にこのような記事を書きました。

ええ、そうです。

私も強欲なオッサンです。

 

最後まで読んで頂き、ありがとうございました。

※この記事に書いてある無料版はてなブログへのアドセンス設置法は2018/4/20の現状安全策だとは思うのですが、それでも確実とは言えません。やるのであれば自己責任でお願いします。