はてなブログにGoogleインフィード広告を設置してみた

最終更新日 2017年11月11日

Googleのインフィード広告はサイトと親和性がよく、溶け込んだような配置ができる機能ですが、「はてなブログ」の記事一覧に表示させようと調べてみました。

割りと簡単に設置できるようなので早速試しました。

現在サイトは閉鎖いたしましたので「はてなブログ」でのカスタマイズとなります。

「役に立つ！はてなブログのカスタマイズ20選」をまとめてみました。

WordPress侍

2020.11.21

役に立つ！はてなブログのカスタマイズ20選

https://wordpress-samurai.com/hatenablog_customize_20

併設していた「はてなブログPro」を解約し、サイトを閉鎖いたしました。しかし、はてなブログのカスタマイズ記事を多数掲載していたので、そのまま無くすというのも勿体ないと思い、WordPressサイトではありますが、カスタマイズ記事だけをこちらのサイトに移設いたしました。記事文章につきましてはなるべく原文を使用しているため、おかしな内容になっているかもしれませんが、「はてなブログ」を利用されている方にはご理解いただけると思っています。また、はてなブログと動作が違うものもいくつかあります。それは、イメージを持...

はてなブログをやるなら、制限が少ないはてなブログProがオススメ！

Googleインフィード広告を取得する

インフィード広告を取得する方法は色んなサイトで紹介しています。

簡単に説明しますと新しい広告ユニットを追加し「インフィード広告」を選択します。

フィードデザインも選択するのですが「はてなブログ」の記事一覧は見出しが上部に大きく表示されていますので「上部のタイトル」を選択しました。

コンテナの幅はそれぞれのテーマによって違ってくるとは思いますが、私は700pxとしました。

画像の大きさは「1:1」を選択し、サイズは「120 px」にしました。

この「120 px」は18~20%くらいでも良いのかとは思いますが、敢えて固定サイズにしました。

その他フォントサイズやパディングなどもサイトに合わせ、好みで設定して下さい。

「保存してコードを取得」すると、スクリプトコードが表示されますので「コードスニペットをコピー」してメモ帳か何かに貼り付けておいて下さい。

&lt;script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;&lt;/script&gt;
&lt;ins class="adsbygoogle"
 style="display:block"
 data-ad-format="fluid"
 data-ad-layout-key="-xx+xx-xx-xx+xx"
 data-ad-client="ca-pub-0yyyyyyyyyyyyyyy"
 data-ad-slot="zzzzzzzzzz"&gt;&lt;/ins&gt;
&lt;script&gt;
 (adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;

<ins class="adsbygoogle"

style="display:block"

data-ad-format="fluid"

data-ad-layout-key="-xx+xx-xx-xx+xx"

data-ad-client="ca-pub-0yyyyyyyyyyyyyyy"

data-ad-slot="zzzzzzzzzz"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

こんな感じです。

Google インフィード広告をはてなブログに設置

ここから「はてなブログ」に設置するわけですが、簡単に解説されていたサイトがありました。

GitHubでコードを作成されたようで、管理者の「ケー」様に感謝しつつ、拝借させていただきました。

ありがとうございました♪

ウェブと食べ物と趣味のこと

はてなブログでインフィード広告を入れてみた方法

https://weblog-life.net/entry/hatena_infeed

先月、Googleの提供しているコンテンツ連動型広告配信サービスであるAdsense（アドセンス）新しい広告が増えました。「記事内広告」という記事に溶け込む広告は試してみていたのですが、インフィード

メモ帳に貼り付けておいた「コードスニペット」を参照します。

data-ad-layout-key="-xx+xx-xx-xx+xx"
data-ad-client="ca-pub-yyyyyyyyyyyyyyyy"
data-ad-slot="zzzzzzzzzz"

下記のスクリプトコードの"x,y,z"部分を変更します。

&lt;script src="//webloglife.github.io/ads_infeed.js" charset="utf-8"&gt;&lt;/script&gt;
&lt;script&gt;
Ads.Infeed.init('&lt;center&gt;&lt;ins class="adsbygoogle infeed_slot" style="display:block" data-ad-format="fluid" data-ad-layout="image-middle" data-ad-client="ca-pub-0yyyyyyyyyyyyyyy" data-ad-layout-key="-xx+xx-xx-xx+xx" data-ad-slot="zzzzzzzzzz"&gt;&lt;/ins&gt;&lt;/center&gt;');
&lt;/script&gt;
&lt;style&gt;.infeed_slot{width:100%;height:○○○px;margin-top: -○○px;padding-bottom: ○○px;}&lt;/style&gt;

Ads.Infeed.init('<center><ins class="adsbygoogle infeed_slot" style="display:block" data-ad-format="fluid" data-ad-layout="image-middle" data-ad-client="ca-pub-0yyyyyyyyyyyyyyy" data-ad-layout-key="-xx+xx-xx-xx+xx" data-ad-slot="zzzzzzzzzz"></ins></center>');

</script>

「デザイン」→「カスタマイズ」→「フッタ」を選んで
フッタにスクリプトコードを貼り付けます。

スタイルに関しては状況に応じて変更して下さい。

スマホ用は「はてなブログ PRO」しか使えませんが、下記スクリプトコードです。

「デザイン」→「スマートフォン」→「フッタ(PRO」に貼り付けます。

スタイルも同様に変更して下さい。

&lt;script src="//webloglife.github.io/ads_infeed.js" charset="utf-8"&gt;&lt;/script&gt;
&lt;script&gt;
Ads.Infeed.init('&lt;center&gt;&lt;ins class="adsbygoogle infeed_slot" style="display:block" data-ad-format="fluid" data-ad-layout="image-middle" data-ad-client="ca-pub-0yyyyyyyyyyyyyyy" data-ad-layout-key="-xx+xx-xx-xx+xx" data-ad-slot="zzzzzzzzzz"&gt;&lt;/ins&gt;&lt;/center&gt;');
&lt;/script&gt;
&lt;style&gt;.infeed_slot{width:100%;height:○○○px;margin-top: -○○px;padding-bottom: ○○px;}&lt;/style&gt;