ブログを始めて記事を充実させていくと、最初に目標として浮かんでくるのがグーグル・アドセンスの審査通過だと思います。
この通過のための申請は独自ドメインを使っていなければややこしい部分がないのでセオリー通りにやっていれば良いのですが、審査通過のメールが来たらすぐにでも…ひとつでもとりあえず広告を貼っておきたいと思うのが心情でしょう。
もちろん、その方法を検索しながら進めていっても良いのですが、意外と大事な部分が間違っている情報があったり、はてなブログならではの難点があったりします。
また、あまり試行錯誤を繰り返していると、やたらと広告だらけの瞬間が出来てしまったり、レイアウトが崩れてしまったりもします。
まずはこの記事を見て最低限やることをやっていただき、そのあとで落ち着いて自分のブログを眺めながら色々と検討してもらえればと思います。
※リンク先のコードを利用する際にはコピー元の説明をよく読み、自己責任でお願いします
数ある記事を参考にするにあたり
まず最初にお伝えするのは、AdSenseのサイトはこれまでに何度も更新されていて、比較的新しい記事を参照してもキャプチャー画像が実際と違っていることが多くなっています。
また、広告の設定までの行き方も変わっているので、他のブログを参考にするときは気をつけてください。
それと、ブログによってはコピー＆ペーストするためのコードにあってはならないゴミ文字が1文字だけ紛れ込んでいたり、コード内の数値を〇〇に置き換えているにもかかわらずそれを書き換える説明を忘れていたり、コード内のクォーテーション（引用符）が全角に変換されてしまっている記事がありました。
それらのコードをコピーして利用するとブログのレイアウトが崩れますので、そのたびに別の記事を探すなりして少し苦労しました。
こちらでリンクを貼らせていただいたサイト様は、わかりやすいうえに、実際に参考にさせていただいて大変助けられたところだけですので、無駄な時間を費やさないためにも参考にしてみてください。
自動広告と手動広告
審査通過のメールをいただいたら、[ご利用開始]のボタンを押すなどしてGoogle AdSenseのサイトを表示します。
続いて、左上のメニューボタンをクリックして、「広告」を選択します。「サマリー」が選択されていることを確認したら、右のグレーアウトしている部分をクリックしてメニューを消してください。
出てきた画面の「サイトごと」のタブに「広告掲載の自動化」とありますが、この機能を使うかはとりあえずあとで考えることにした方が良いです。
理由は、はてなブログでは設定が反映されるまでに時間がかかりすぎるからで、調べた限りではおよそ1週間かかるそうです。はてなブログのヘルプには自動で表示されないときは手動で載せるように書いてありますので、どれだけ待っても表示されない可能性もあります。
何故かスマートフォン用では10分ほどで反映されますが、PROではない無料のはてなブログではスマートフォンでの広告が元々多いので広告だらけになってしまいます。
広告数の調整が出来るとはいえ、無段階のスライドバーでどの程度の数が表示されるのか見当がつかず、反映も時間がかかるので「とりあえず」の状況では試行錯誤している場合ではありません。後日、ゆっくりと検証してください。
そういうわけで、今回は「広告ユニットごと」タブから手動で貼ることにします。手動といっても一度設定してしまえば新しい記事にも自動で貼り付けられます。
手動で貼る広告の種類
「広告ユニットごと」のタブを開くと「新しい広告ユニットの作成」が出来ます。
「ディスプレイ広告」は万能タイプで、とりあえずはこれにしておけば間違いありません。
「インフィード広告」は記事一覧に溶け込むように表示される存在感の薄い広告ですが、無料はてなブログだとあまり表示される機会はないかもしれません。
「記事内広告」は記事内のリンクに似せた広告なのでぱっと見の広告感は薄いですが、短文が書かれているので記事内に設置すると出てくるたびに目についてしまいます。
ただ、はてなブログのリンクと違って表示域の幅最大で表示されるのでリンクと間違えることはありません。
広告効率的には良いと思われるので、記事ごとに埋め込みたい人は後々検討してください。
コードを生成する
まずはとりあえず設置するのが目的なので、「ディスプレイ広告」をクリックして使っていきたいと思います。
この画面を見る限りではまず「スクエア」「横長タイプ」「縦長タイプ」を選ぶように見えますが、最初に注目するのは右の「広告サイズ」です。
ここでは「レスポンシブ」と「固定」が選べます。
レスポンシブは表示域の広さに合わせて大きさが自動調整され、上記の3タイプから形を選べます。ゆえに「サンプル広告」の大きさは参考になりません。
固定を選ぶとサイズをピクセル数で指定できますが、試行錯誤が必要なので今回は無難にレスポンシブのスクエアで設置します。
左上の「広告ユニットの名前を入力」に適当な名前（「ディスプレイ スクエア」など）を入力し、「作成」をクリックします。
するとHTML用のコードが表示されますので、画面をこのままにしておくか、メモ帳などにコピーしておきます。
コードを加工して貼り付ける
次に下のChipさんの記事にある黄色い欄のコードを指示通りにブログの「デザイン」→「カスタマイズ（スパナマーク）」→「記事」→「記事下」（または「記事上」）の中にコピー＆ペーストします。
ペーストする欄に元々コードが記載されていた場合はそれを消さないように気をつけてください。
続いて、今ペーストしたコードの「※ここにアドセンスのコード貼り付け」の部分を消すか上書きするように自分のHTML用コード全てをコピー＆ペーストします。
出来上がったコード全体を見てみると、今ペーストした自分のコードの上下が空の行になっているはずです。空の行は消してもいいのですが、必要があればこのどちらかに「スポンサーリンク」と入力してください。
はてなブログのヘルプにはスポンサーリンクであること明示するように指示してあります。ただ、AdSenseのポリシーでは誤解を招くようなラベルを禁止していて、つけるのであれば「広告」か「スポンサーリンク」のどちらかのみを使用するようにお願いしているだけです。自分で必要だと判断したら記入してください。
スマートフォンの画面でスクロール中にうっかりタップしてしまわないように十分気をつけてください。
ちなみに右上に×がついている広告が自分で設置したものです。ただし、生成が間に合っていないタイミングなのか不明ですが、一時的に×がついていない（設定とは違う）広告が表示される場合があります。
ここまでの手順に間違いがないと確信したら「変更を保存する」をクリックし、自分のブログを確認してください。始めは広告が表示されるまでに数分程度かかるかもしれません。
無事に表示されたら、サイドバーにも設置してみましょう。
同じ「記事」内の「サイドバー」→「＋モジュールを追加」→「</> HTML」をクリック。
上の画面の右側、広い枠の中にAdSenseのページで表示されている自分のHTML用コードをコピー＆ペーストします。
必要があれば「タイトル」に「スポンサーリンク」と入力し、「適用」をクリック。
「変更を保存する」をクリックして、再度ブログを確認してください。
最後にAdSenseのコード生成ツールの「完了」をクリックして終了です。完了して保存されたコードは再表示したり、再編集したり出来ます。
一息ついてからすること
とりあえずの表示が終わり、落ち着いてきたら「インフィード広告」を追加してみてください。
AdSenseのサイトにて同じような要領でコードを生成し、その一部を下のサイト様のコードにはめ込んで、「デザイン」の「フッタ」に貼り付けます。
※スクリーンショットが現在とは異なります
ただし、先述の通り無料はてなブログの場合は「記事一覧」にしか反映されませんので、モバイル表示だとまず閲覧されることはありません。自分のブログが無料版でモバイルからのアクセスばかりであれば設置しなくてもいいかもしれません。
また、記事の一覧に紛れ込ます方法なので、「スポンサーリンク」などの表示が出来ません。
モバイルといえば、スマートフォンによる表示だと元々ある広告が多いので、自分で設置したものと合わせるとやたらと広告ばかりになってしまい、狭い画面で見ている利用者に悪い印象を与えかねません。
スマートフォンからの閲覧に重きを置くのであれば、広告の数を少なめにするか、はてなブログPROの利用を検討してみるのも良いかもしれません。
最後に、今回利用しなかった「自動広告」ですが、こちらは記事中の思いがけないところに広告を表示する可能性があり、万が一、画像とその説明文の間に広告が入ってしまうと、広告を説明しているように見えてしまうので注意してください。
[ソウ]:自分の広告が一つでもあるかないかでは気分的に違いますよね
とりあえずでも貼ってからじっくりと記事を読み漁る方が落ち着いて勉強できるはずです
[グレ]:ぐれこもLINEにスタンプ貼ってるよ！
いや、スタンプ貼る話じゃなくて、ウェブサイトの広告の話ね
そもそもアドセンス知らないでしょ。また話がそれるから出てこないでよ
知ってるよぉ。かわいいスタンプ書く人でしょ？
・・・？
・・・^^
それは亜土先生だろ！
