おもしろきこともなき世をおもしろく

ふるさと納税、株主優待、日々の生活あったちょっとお得な事など

はてなぶろぐへのAdsense広告の貼り方(初心者用)

はてなブログ上で、Google Adsense広告を始めて利用する時のメモです。

ほんとに初心者にしか役に立たない記事ですみませんが、こういった事は自分良く忘れるので、備忘も含めての記事です。すいません。

Google Adsenseの申請して通った記事の続きになります。

blog.omosiroki.com

広告の作成

アドセンスにログインをして広告を作成します。

f:id:kiyo2017:20170816165616p:plain

新しい広告ユニット・作成する広告の種類を選択します

f:id:kiyo2017:20170816165642p:plain

テキスト広告とディスプレイ広告を選択します。

(これが一番一般的なので)

f:id:kiyo2017:20170816165656p:plain

名前

この名前単位で収益がわかり後で収益率アップのための判断材料になります。

広告を貼った位置が分かるような名前を付けます。

  • omosiroki-pc-kizi-sita
  • omosiroki-mobile-kizi-sita
  • omosiroki-kizi-ue
  • omosiroki-mobile-kizi-ue
  • omosiroki-sidebar
  • omosiroki-mobile-sidebar

はてなブログでは、PCとMobileでは設定が違いますので、分けておいた方がいいと思います。

広告サイズ

レスポンシブデザインを選択します。

ページのレイアウトに合わせてサイズが自動的に調整されます。

「テキスト広告のスタイルカスタムチャネル」、「表示可能な広告がない場合は」最初は特に設定せずにそのままで良いと思います。

「保存してコードを取得」ボタンを押します。

f:id:kiyo2017:20170816165711p:plain

ブログに張り付ける広告コードが表示されるポップアップ画面が出てきます。

表示される広告コード例

 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- omosiroki-pc-kizi-sita -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-9603508552170241"
data-ad-slot="5031178838"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 この広告コードをコピーしておきます。

はてなブログ設定

PC用広告の設定

取りあえず一番ベーシックな、記事の最後に広告を貼り付けます。

「デザイン」→「カスタマイズ」→「記事」に移動します。

f:id:kiyo2017:20170816170149p:plain

「記事下」の入力ボックスに先ほどアドセンスでコピーした広告コードをペーストします。また広告とわかるように、スポンサーリンク等記載する事が推奨されていますので以下のような記載を追加すると良いようです。

 

スポンサーリンク例:

 <p style="text-align: center;"><span style="font-size: 85%;">スポンサーリンク</span><br />

コピーした広告コード

</p>

保存して終了です。

モバイル用広告の設定 

もう一度、アドレセンスの画面に戻り次はモバイル用の公告を作成します。
名前だけ変えて、その他は同じ設定で良いと思います。

はてなブログに戻り「デザイン」→「スマートフォン」→「記事」に移動します。

f:id:kiyo2017:20170816170214p:plain

同じように記事下に移動して、モバイル用に作った広告をペーストします。

f:id:kiyo2017:20170816170334p:plain

保存して終了です。

確認

保存したら実際にページを見て確認します。でもすぐには広告は表示されないので、1時間程度待つ必要があります。

以上になります。特に何も問題なく記事の下側に広告がでるようになりました。めでたし、めでたし

Googleアドセンス関連の記事

blog.omosiroki.com

blog.omosiroki.com

blog.omosiroki.com

blog.omosiroki.com

 

blog.omosiroki.com