はてなブログでのGoogleAdsence広告の貼り方
Googleアドセンス審査通過後、広告の貼り方が分からず...
せっかく通過できたのに広告が貼れない！という方へ向けた記事です。
自動広告よりも手動広告の方が良い理由を解説します！
自動広告よりも手動広告を選択する理由
そもそも自動で広告を入れるのを選ぶのはGoogleなんですね。
そのため、審査通過後のブログやサイトはそこまで読まれていないから
これくらいの広告で良いか～（ポチッ）といった感じで（※イメージです）
広告が一つしか入らなかったり、「アンカー広告」が勝手に入ったりします。
「アンカー広告」は、記事を読み進めてもずっとついてくる邪魔な広告いません？あいつです。
読者は、読みにくい記事をすぐに離れる傾向にあるため、あまり推奨されていません。
そのため、審査通過後は手動にて対応していくのがベストです。
では、ここからは、広告の入れ方について解説します。
自動広告の入れ方
①まずは、Googleアドセンスの広告ページから
サイトごと⇒コードを取得を選択します。
コードをコピーします。
②はてなブログへ移動します。
設定の詳細設定を選択します。
検索エンジン最適化欄の「headに要素を追加」こちらに先ほどコピーしたコードを貼り付けます。
③Googleアドセンスの右下部分編集をクリックします。
サイトが二つ以上ある方は選択したいドメイン名を選択してください。
④自動広告にチェックを入れます。
その後「サイトに適用」を選択してください。
実はこれだけで終了なんです。
ただ注意してほしいのが、左部分に出ているプレビューはあくまで自動広告が入ったらこんな感じのイメージで、実際にその通り反映されるわけではありません。
自動広告が入っていない！と勘違いする人の多くが、入っているが気付いていないことが多いです。
例えば上記で記載したアンカー広告しかGoogleが入れていないケースです。
設定でアンカー広告が出ないように設定はできるのですが、その場合広告が出ないケースもあるため、アドセンス審査通過後は手動広告を設定してみましょう。
手動広告の貼り方
①Googleアドセンスの広告欄から
「広告ユニットごと」を選択します。
今回はディスプレイ広告を選択します。
②広告の名前と広告サイズを設定します。
今回はスポンサーリンクとしておきます。
広告サイズはデフォルトで「レスポンシブ」になっていますが、もし違ったら変更して「レスポンシブ」にしておきましょう。
設定が終われば「作成」をクリックします。
③作成すると下記のような画面になるため、コードをコピーします。
記事上下の配置方法
記事上の設置方法
まずは記事上からです。
はてなブログのデザイン⇒カスタマイズ⇒記事上を選択します。
記事上を選択し、下記コードをコピペしてください。
「ここにコードを貼り付け」部分には上記工程③でコピーしたコードを貼ります。
<!-- 1つめの見出し前にアドセンスを配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p style="text-align:center; font-size: 80%" >スポンサーリンク<br>
ここにコードを貼り付け
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>
</div>
<!-- 1つめの見出し前にアドセンスを配置ここまで -->
これで記事上の設置は終了です。
少し時間を空けてからサイトを覗いてみてください。
記事下の設置方法
次に記事下です。
上記同様にデザイン⇒カスタマイズ⇒記事下
下記コードを入力します。
<!--記事下アドセンス-->
<div id="my-footer">
<p style="text-align:center; font-size: 80%" >スポンサーリンク<br>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- スポンサーリンク -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5841769796650022"
data-ad-slot="4751930975"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
ここにコードを貼り付け
<!--記事下アドセンスここまで-->
以上です。
サイドバーの設置方法
次にサイドバーへの広告の設置方法です。
デザイン⇒カスタマイズ⇒サイドバー⇒モジュールの追加を選択します。
HTMLを選択します。
そこにタイトル「スポンサーリンク」など。
表記はご自由にどうぞ。私は「スポンサードリンク」と入力しております。
先ほどのコードを貼り付けで完成です。
お疲れ様でした～～！！