Googleアドセンスの広告作成・設置方法【はてなブログ】

 

 

こんにちは、みやこです。

 

Googleアドセンスに合格し、自動広告を設置してしばらく待ってみたんですが反映され

ず、調べてみるとはてなブログと自動広告は相性が悪いだとかブログによって貼れたり

貼れなかったりするそうです。

 

そこで今回は自動広告が反映されない方にアドセンス広告の作成、設置方法を説明しま

す。

 

 

f:id:miyakoblog:20190103185824j:plain

 

Google AdSense

 

f:id:miyakoblog:20190314051315p:plain


Googleアドセンスを開き、広告の中の「広告ユニット」を選びます。

次に「新しい広告ユニット」を選ぶと次の画像のような画面が出てくると思います。

 

f:id:miyakoblog:20190314051626p:plain

 

「テキスト広告とディスプレイ広告」を選択すると名前の入力だったり、広告サイズを

選ぶ画面に切り替わります。

 

名前は「広告の場所の名前」など分かりやすいものにしましょう。

サイズは赤で囲ったところから選ぶことが出来ますが、基本的にはレスポンシブでいい

と思います。

 


そして下にある「保存してコードを取得」を押すとコードの画面が出てくるので、その

コードをコピーします。

 

はてなブログ

 

f:id:miyakoblog:20190314052231p:plain

 

ダッシュボード→デザイン→カスタマイズの順に選び、先ほどコピーしたコードを記事

のHTMLを編集する白い枠に貼り付けます。

 

最後に「変更を保存する」ボタンを押し完了です。

 

反映には少し時間が掛かるので、他の作業をしつつ待ちましょう。

 

記事中の貼り方

 

こちらのブログの記事を参考にさせていただいています。

はてなブログの記事中•文中に自動的にGoogleアドセンスを挿入する設定方法 - tamasaburo

 

f:id:miyakoblog:20190314072022p:plain

 

これで全ての記事中の1番目の見出し「h3」タグの直前に自動で広告が入ります。

この記事でいうとGoogle AdSenseの見出し上に広告が入ります。

 

自分が使っている見出しに合わせて「h3」部分を変えてください。

 

<!--ここに自分のアドセンスのコード-->の部分にコードを貼り付けます。

 

先ほどと同様にダッシュボード→デザイン→カスタマイズの順に選び、先ほどコピーし

たコードを記事のHTMLを編集する枠に貼り付けます。

 

HTMLの場所は記事上でも記事下でも、どちらでも大丈夫です。

 

 

広告の位置を変える・複数挿入する

 

広告の位置を変える場合

 

$target.eq(0)

0を1に変えると2番目、0を2に変えると3番目の見出し直前に広告が入ります。

 

目次上に設置する場合

$target = $('.entry-content > ul');

 

 複数挿入する場合

 

クラス名を付けることによって複数広告を挿入することが出来ます。

 

$target.eq(0).before($('.insentence-adsense'));

名前は何でもいいですが、今回はadsenseにします。

<div class="insentence-adsense">

この部分もadsenseに変えておきましょう。

 

クラス名で挟むとこのようになります。

 

$target.eq(1).before($('.adsense'));
}, false);
// ]]></script>
<div class="adsense">

 

$target.eq(0)

これの0を変えておかないと広告が連続で表示されてしまうので、忘れずに変更してく

ださい。

 

まとめ 

 

f:id:miyakoblog:20190314075346p:plain

 

これで1番目と2番目の見出しの直前に広告を設置出来ます。

上の画像を参考にやってみてください。

 

 

Googleアドセンスに合格したときの記事はこちら