感想みかん

感想、レビュー、実体験等を書くブログ

はてなブログの関連記事下にgoogle adsenseのインフィード広告を親和させる設定方法

最近使えるようになったGoogle Adsense インフィード広告とは

最近、Google Adsenseに、新しく「インフィード広告」という機能が追加され、使えるようになった。
選ばれた人だけ使える機能ではなく、Adsense契約している人なら誰でも利用可能。
特徴は、記事を一覧表示するときなどに、違和感なく広告を表示する機能。広告のデザインをカスタマイズでき、フィードの一覧表示と似た形にできる。端末の解像度で大きさが自動で変わるレスポンシブにできる。
インフィード広告は、記事内に広告と書いてあるので、別途、広告と付け加える必要がない。

ネイティブ インフィード広告 - AdSense ヘルプ

フィード - Wikipedia

はてなブログのホームの一覧表示に埋め込みたかったが、現状無理

はてなブログの設定で、ホームを一覧表示にしている場合、この機能を使えば広告を違和感なく入れられそうだが、はてなブログではまだそういう形で広告を挿入できる機能は未実装。そもそもはてなブログの一覧表示機能が付いたのも最近だし、インフィード広告も始まったばかりだし、そのうち対応するのかも?

関連記事の記事下に設置しデザインが溶け込む感じにするコツ

はてなブログが用意した関連記事機能を使っている場合、関連記事の直下にわりと違和感なく広告をくっつけることができる。 画像のみの広告は例外で、画像+テキスト広告のときだけ、そこそこ似たデザインにできる。僕が使わせてもらっているテンプレートはbroolynなので、他のテンプレだと違うのかもしれない。

f:id:mikanumay:20170809043839j:plain

やり方

Google Adsenseのサイト→「広告の設定」→左上にある、「新しい広告ユニット」→ 「インフィード広告」から作成。

変更する場所は、

イメージ > 画像縦横比を1:1に、画像のピクセルを120pxに。パディングの一番右側を0pxにする(一番右側にある数値が、広告枠左側の線と文字との間隔になる)。

見出し > フォントサイズをお好み(18pxぐらい?)。フォントカラーを A の部分から選ぶ。この色を、自分のブログのリンクの色と一緒にすると、親和性が上がる。

コツは、単に、画像の大きさと位置を合わせればそれっぽく見える、というだけでした。ウェブデザイナーさんとか詳しい人ならもっと厳密にフォントまできっちりやるんだろうけど、僕はこれでいい。

自分のブログのリンクに使われている文字色(色番号・カラーコード)をFirefoxで調べる方法

ついでに書きますが、もしも自分のブログに使われているリンクの色番号がわからない場合、Firefoxブラウザなら、メニューの ツール > Web開発 > スポイト と選ぶと、閲覧ページのカラーをピンポイントで抽出できるので、リンクの文字の上に合わせれば色がわかる。

f:id:mikanumay:20170808192944j:plain

でもよく見ると、3つの色が合わさって一つの文字になっていた。へー、こんな風になっているんだね。とりあえず真ん中の色を抽出して設定したら特に違和感なかった。だいたいでいいならこれでいいかな。

あとは、できたコードを、はてなブログのデザインから、記事下に張り付けるだけ。

もう一つ、少し詳しい人向けの別のやり方も書いておく。
Firefoxの ツール > ウェブ開発 > インスペクター を選ぶと、ソースコードやCSSを画面下部で参照できるようになる。調べたいフォントのリンクをドラッグして選択すると、右側にフォントの情報などが出るので、カラーを見ればOK。僕もあまり詳しくないけど、これで該当文字のカラーコードを調べることができた。

はてなブログの関連記事を記事下に表示させる場合2種類あるよね

なお、はてなブログの関連記事を記事下に表示する機能は、大きく分けて2種類ある。
ひとつは、はてなブログに最近追加された機能で、設定のところから記事下に移動させる方法。簡単。
もうひとつは、デザインにCSSを追記して、サイドバーに設置した関連記事を記事下に移動させて表示する方法。少し難しい。
後者のやり方はググると先輩方の知恵がたくさん出てくる。

はてなブログ 関連記事 記事下 - Google 検索

後者の方が、自由度が高い。関連記事の設置場所にも自由が効き、記事下の設置位置も把握しやすいので、その直下にインフィード広告を設置するのは難しくない。前者の場合は、あまり位置が選べなかったように思うから、インフィード広告をつけるなら後者の方がいいかも。後者なら関連記事の画像の大きさも調整できる。

親和性を高くする方が本当にいいのかという問題

そもそも、親和性を高くすると、広告も目立たなくなるわけだから、いいんだか悪いんだかという感じもする。むしろ広告は広告として目につきやすい方がいいのかもしれない。でもデザインを合わすことができるのが、インフィード広告の強み。ほんの少しだけ違う感じにした方がいいかも。

というわけで、いろいろ考える余地がありますね。