はてなブログにはインフィード広告が入れられない、という記事を見かけました。
よく、記事一覧などにさりげなく入っているあれですね。
わたしはあれ嫌いじゃないので、入れてみたくなりました。
はてなブログにGoogle AdSenseのインフィード広告の設置が出来ました。
インフィード広告の印象
最初に見たときは、「え？この人わたしが興味ある○○の記事を書いている」って思わずタップしてしまいましたね。
今はもう、広告ってわかっているし、検索していろいろなサイトを見ると、ありとあらゆるところに広告が入っているのは仕方ないですもんね。
多くの人は、広告が入るのは情報料だと思って割り切っているのではないでしょうか。
広告が見られただけで収入になるわけじゃないですけど。
その中でもインフィード広告は記事一覧などの間にさりげなく入っていて見栄えが悪くならない気がします。
参考にした記事
はてなブログにインフィード広告を入れられる方法を探しました。
こちらの記事を見つけ、参考にして入れてみました。
clean-copy-of-onenote.hatenablog.com
こちらにはわたしが入れたいと思っていた、関連記事一覧にインフィード広告を設置する、という記述があったからです。
そして、なんとなく良さげだったから。笑
よくわかっていないのですが、JavaScript の文字列としてコードを入力して設置する方法とのことです。
それには広告のコードを文字列化しなくてはいけないらしいです。
こちらのサイトはGoogle AdSenseのインフィード広告のコードをBOXに貼り付ければ、下のBOXに文字列化した広告コードが出来るということで手順通りにやれば、簡単に設置出来るようになっています。
手順通りにやってみた
書いてあることを読みながらやってみました。
ところが、いつものことですが、すんなりとはいきませんでした。
BOXにコードを貼り付けましたが、下のBOXには何も現れず。
もう、使えなくなってしまっているのかと焦りました。
コピーが上手くいっていないのか、と何度かやり直したけど、出てこない。
もうあきらめかけて、後ろから Backspace キーで消し始めたら、いきなり下のBOXに文字が現れたんです。
これは、余計なものが入っている？？
と、今度はもう一度貼り付けてから最後の「>」だけを消してみたら、やっぱり現れます。
でもさすがに最後の「>」を消したらいいっていうのはありえないんじゃないの？
今度は先頭で Backspace を押してみたら、やっぱり現れました。
じゃ、これは？と、最後のところで、Enter を押したら、現れました。
そういうことのようです。(どういうこと？)
後でよく見たら、コメントへの返事で同じようなことが書いてありました。
「もっと読む」をタップしていなかったので見ていなかったんです。
ありがたく、「文字列化した広告コード」を頂きまして、ちょっとわからなかったのが、jQuery を利用するために入れておくコードも、フッターに貼り付けでいいのか、なんですが、そのほかの場所にとは書いていないので、恐る恐るフッターに貼り付けました。
先ほど頂いた広告コードの入れ方も、すぐにはピンとこなかったのですが、何度か読んでやっと、【文字列化した広告コード】っていうところに、「文字列化した広告コード」をドーーーーーっと（実際にはコピペでポチっと）入れるのね、と理解しました。
はあ…、わたしったら、理解するだけで時間がかかります。
やっと、わかったのでやってみました。
いつも、まずは何も起こらないことが多いので、今回もそうなんだろうなと自分の気持ちに保険をかけてから、ブログを見てみました。
なんと、1回目で表示されていました！！
思い通りに出来なかったところ
表示はされていたのですが、ちょっと画像や縦の寸法が大きいんです。
パソコンで見てみると、周りの記事と同じようにちょうどよく表示されています。
広告のコードを作ったときに、モバイルではなくて、デスクトップで作成しましたけど、レスポンシブデザインにしているので、問題は無いはずなんですけど。
サイドバーにある、注目記事などの画像のサイズとも同じになっているし。
きっと検索から来てくれる人が増えたら、スマホから見る人が多いだろうと考えて、スマホ側に合わせることにしました。
モバイルで広告のコードを作り直して貼りなおしました。
パソコンで見ると小さくなってしまいましたが、まあ控えめでいいか。
数を増やしたいときには、貼り付ける数を増やせばいいそうです。
場所も変えられます。（0）だと1つ目の記事の下に広告が出ます。（1）だと2つ目の記事の下です。
わたしは2つ目の記事の下に2個続けて表示させました。
ほんとうは1番上と2番目に広告を表示させたかったのですが……………………。
あれ？今思い付いてやってみたら出来ました！
さっきのサイトで
section.archive-entryは記事一覧で表示される 一つ一つの記事を表す要素で、 その最初の要素をeq(0)で指定して、 その直後にafterで文字列化した広告コードを挿入しています。
はてなブログにインフィード広告を貼る方法 - クイックノート
とあって、「after」が「～の後」だから「～の前」に変えればいけるのかなと、ちょいと調べて「（0）.before」に変えました。
1つ目の記事の上、つまり1番上に表示出来ました。上に２つも出来ました。
丁寧に説明が書いてあると、ヒントになりますね。
ですが、自分が思っていたイメージと少し違って、あまり気に入らなかったのでわたしは元に戻しますね。
出来なかったところじゃなくなっちゃいましたけど、ここにそのまま書いておきます。
わたしのインフィード広告表示
わたしのインフィード広告はこんな感じになりました。
モザイクのかかっているところが広告です。
最後に
この設置の仕方に問題はないのかと心配だったので少し調べたのですが、はてなブログにもGoogle AdSense にも怒られないのかは、わからなかったです。
参考にした記事は5か月前のものです。
「問題ありませんように…」と祈りながら過ごしたいと思います。
なので、この方法を使って設置する人は自己責任で設置して下さい。よろしくお願い致します。
もし、ダメなときは、いきなりサイトの停止や、アドセンスの使用不可ではなくて、「いけないことをしているからそこは直してね」とやさしく教えてもらいたいところです。
あれ？いま記事下にGoogle AdSenseのインフィード広告のコードをそのまま貼り付けたら、わたしの場合は関連記事の下にちょっとだけ離れてしまいましたけど、表示されました。
関連記事のところに表示したかったので、これでもよかったかもしれませんね。
この場所にインフィードタイプの広告を置いていいのかもわからないですけれど…。
はてなブログの関連記事一覧にGoogle AdSenseのインフィード広告を設置出来ました。
今回も90%の出来ですかね。
参考にさせて頂いたクイックノートさんありがとうございました！
