スキップしてメイン コンテンツに移動

Bloggerの記事中にアドセンス広告を自動表示する[忙しい人向け]

Google Bloggerで、記事中の段落の合間に、アドセンス広告を自動挿入する方法を紹介します。

よく見かける、↓のイメージのようなヤツです。
enter image description here

Bloggerの標準機能で、それっぽい物が無かったので、記事中にアドセンス広告を自動挿入するスクリプトを自作しました。このスクリプトは、最初に1回設定すれば、後は自動で記事中に広告を表示する為、忙しい人に超最適です。

さらに、広告の表示位置や、表示数をオプションで指定可能で、広告の表示を好みに合わせてコントロールできます。

以降、使い方について紹介します。

前書 (読み飛ばし可)

このスクリプトを作るに至った経緯です。

ある日の事でした… アドセンスに受かったので、さっそく広告を表示させる事にしました。せっかくなので、記事の段落の合間に、広告を自動挿入させるヤツをやりたいと思います。

しばらく、Bloggerの管理画面と睨めっこしましたが、段落の合間に「記事中広告」を自動挿入する機能はなさそうです (^^;)

今度は、アドセンスの「自動広告」というのを試してみました。

おぉー! 記事の中に溶け込むように、広告が挿入されました!!
ただ、たまに変な位置に挿入されるのと、自分で挿入位置をコントロール出来ない為、私は使うのを断念しました。

ないなら作れっ!という事で、「記事内広告」を自動挿入するスクリプトを作った次第です。

記事内広告ユニットを作成する

まず、記事内に表示する広告ユニットを作成します。アドセンス管理画面にログインし、以下の手順で記事内広告を作成します。

  1. 左メニューより[広告ユニット] をクリックします。
  2. [+ 新しい広告ユニット] をクリックします。
  3. [記事内広告] をクリックします。

記事内広告ユニットの作成

  1. ユニット名などの入力を済ませて、[保存してコードを取得] をクリックします。
  2. 表示されたコードを後から使う為、メモしておきます。

テーマをバックアップ

ここから、Blogger側での作業です。

作業前に、念の為に現在のテーマをバックアップしましょう。バックアップの方法は以下の通りです。

  1. Bloggerの管理画面から、[テーマ] -> [バックアップ/復元] をクリック
  2. [テーマをダウンロード] をクリックすると、現在のテーマがダウンロードできます。

※ もし間違えてHTMLを壊してしまっても、ダウンロードしたテーマを復元すれば、元の状態に戻す事ができます。

ブログテーマに、広告自動挿入スクリプトを貼り付け

あなたのブログテーマのHTMLに、広告自動挿入スクリプトを貼り付けます。

  1. Bloggerの管理画面から、[テーマ] を選択します。
  2. テーマの画面の、[HTMLの編集] をクリックし、HTMLを表示します
  3. </body>の直前に、以下のコードを追加します
<b:if cond='data:blog.pageType == "item"'>
<!--adsence記事中内広告自動挿入スクリプト-->
<script>
  ;(function() {
    
    //"xxxx"の所は、自分の情報に書き換えてください。
	//各オプションの説明は「https://www.sukerou.com/2019/03/blogger.html」を参照
    var options = {
      adClient: "ca-pub-xxxx",
      adSlot: "xxxx",
      adFormat: "fluid",
      adLayout: "in-article",
      targetNumbers: [2, 4],
      selector: ".widget.Blog h2",
      beforeText: "スポンサーリンク",
      marginTop: "10px",
      marginBottom: "10px"
    };
    
    function appendAd(c,b){var e=document.createElement(&quot;div&quot;);e.classList.add(&quot;adgoogle-wrapper&quot;);e.style.marginTop=options.marginTop;e.style.marginBottom=options.marginBottom;var a=document.createElement(&quot;small&quot;);a.textContent=options.beforeText;var d=document.createElement(&quot;ins&quot;);d.className=&quot;adsbygoogle&quot;;d.style.display=&quot;block&quot;;d.style.textAlign=&quot;center&quot;;d.dataset.adClient=options.adClient;d.dataset.adSlot=options.adSlot;d.dataset.adFormat=options.adFormat;d.dataset.adLayout=options.adLayout;var f=document.createElement(&quot;script&quot;);f.text=&quot;(adsbygoogle = window.adsbygoogle || []).push({});&quot;;e.appendChild(a);e.appendChild(d);e.appendChild(f);if(e!=null){before(c,e)}}function before(a,c){var b=a.parentNode;if(b!=null){b.insertBefore(c,a)}}var elements=document.querySelectorAll(options.selector);var cnt=1;for(var i=0;i&lt;elements.length;i++){if(options.targetNumbers.indexOf(i+1)&gt;=0){appendAd(elements[i],cnt)}};
  })(window);
</script>
<!--adsence記事中内広告自動挿入スクリプト-->
</b:if>

コードの挿入位置は、以下のイメージを参考にして下さい。
自動広告挿入スクリプトのコード貼り付け位置

  1. クライアントID、スロット番号を、自分の情報に書き換え

貼り付けたコードの中に、adClient: "ca-pub-xxxx"adSlot: "xxxx"となってい部分があると思います。このxxxxの部分を、自分の情報に書き換えます。

アドセンスの管理画面で、「記事内広告」を作成した時に表示された広告コードから、赤枠で囲った部分の内容を、xxxxの所に入れて下さい。

 アドセンス管理画面で、記事内広告ユニットを作成した時に表示されるコード
↑ アドセンス管理画面で、記事内広告ユニットを作成した時に表示されるコード

  1. 編集が終わったら、画面上の [テーマを保存] をクリックして、内容を保存します。

これで設定は完了です。お疲れさまでした。

試す

上のスクリプトを組み込んだら、自分のブログにアクセスしましょう。きっと記事の段落の合間に、広告が表示されていると思います。

広告ユニット作成した直後は、広告が表示されない事がある為、表示されない場合はしばらく待ってからもう一度試してください。

CSSで装飾する

広告を表示するだけなので、あまり見た目を装飾する事はないと思いますが、このスクリプトによって生成されるHTMLは以下の通りです。

<div class="adgoogle-wrapper" style="margin-top:10px; margin-bottom:10px;">
  <small>スポンサーリンク</small>
  <ins class="adsbygoogle" 
       data-ad-client="ca-pub-xxxxxxxxx" 
       data-ad-slot="xxxxxxxxx" 
       data-ad-format="fluid" 
       data-ad-layout="in-article" 
       style="display: block; text-align: center;"></ins>
   <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

CSS等で装飾しやすいように、広告ユニットを囲うdivタグに、adgoogle-wrapperというクラス属性をつけています。

オプションの設定

貼り付けたスクリプトに、以下のようなオプションを記述する欄があります。このオプションを変更すると、表示する広告数や、余白などを変更出来るようなっています。

var options = {
  adClient: "ca-pub-xxxx",
  adSlot: "xxxx",
  adFormat: "fluid",
  adLayout: "in-article",
  targetNumbers: [2, 4],
  selector: ".widget.Blog h2",
  beforeText: "スポンサーリンク",
  marginTop: "10px",
  marginBottom: "10px"
};

各オプションの詳細な説明です。

  • adClient / adSlot / adFormat / adLayout

アドセンスの広告ユニット作成時に表示されたコードの内容を、それぞれ指定して下さい。

  • targetNumbers

記事内広告を挿入する段落番号を指定します。
指定番号の段落の直前に、広告を挿入します。
例: [2, 4]を指定した場合、2段落目と、4段落目の直前に、広告を挿入します。

  • selector

記事の中の段落を抽出するためのCSSを指定します。
通常、この設定については変更する必要はありません。

  • beforeText

広告上のラベルに表示するテキストを指定します。
アドセンスの規約上、ラベルには「広告」と「スポンサーリンク」のみが許可されています。
その為、空欄""にするか、上の2つの内のどちらかを指定して下さい。

  • marginTop

広告上部の余白を指定します。
アドセンスの規約上、コンテンツと広告の区別のつかない紛らわしい配置は規約違反となる可能性がある為、適切な余白を設けましょう。

  • marginBottom

広告下部の余白を指定します。
marginTopと合わせて、こちらも適切な余白を設けましょう。

注意事項

使用するにあたっては、自己責任でお願いします。このスクリプトによってポリシー違反等になったとしても、一切責任を負いません。

さいごに

うまく表示されねーぞ!って場合は、ブログのURLと共にお知らせ下さい。
時間があれば対処します。。。(たぶん)

スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

  1. 初めまして。ブログ初心者のましろと申します。
    本日Googleアドセンスの広告をBloggerにて掲載させていただきました。
    記事中にのせるやり方が分からず、このブロブに書いてある通りに設定させて頂きました。

    スケ郎さんのブログはとても分かりやすく有難いです。
    しかし設定してみると1番初めのブログ(【2019】ジャカルタの縁日祭に行ってみた!)には表示されるのですが、それより前の物には広告が入りません。
    時間の問題なのでしょうか?それともなにか設定を変える必要があるのでしょうか?
    もし問題がお分かりになるのであれば、お手数ですが教えて頂けると幸いです。

    https://mashironokurashi.blogspot.com/
    こちらがブログのURLになります。
    お時間がある時に見て頂けると助かります。
    宜しくお願い致します。

    返信削除
    返信
    1. はじめまして。
      スクリプトを使って頂きありがとうございます。
      ましろさんのブログを見させて貰いました。

      ブログをChromeの開発者ツールで見ると、以下のようなエラーが発生していました。
      「adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.」

      おそらく、このエラーが原因で広告が表示されていないと思います。
      対策としては、Bloggerのテンプレートを編集する必要があります。

      テンプレートのソースを「enable_page_level_ads」で検索すると、
      同じような内容のスクリプトタグが、2箇所検索にヒットすると思います。
      ヒットしたどちらか一方のタグを消す事で、うまく行くかもしれません。

      削除
  2. 初めまして。素敵なスクリプトを作ってくださりありがとうございます!
    目次機能と共に設定させていただきました。Bloggerの救世主!
    本当にありがたいかぎりです。

    1点質問と、恐縮ながらリクエストがございます。
    まず質問ですが、現在トーマスイッチさんのVaster2というテーマを使っていますが、自動挿入機能を設定すると、トップの記事一覧でPC側では広告画像が、スマホでは「スポンサーリンク」の文字が表示されてしまいます。この表示を消すことは可能でしょうか、、?

    もう1点リクエストですが、現在カテゴリー(ラベル)をHTMLで表記しています。各カテゴリーの横に記事数をつけたくて何度かトライしたのですが難しすぎて断念しました、、もし可能であれば記事数が併記できるカテゴリーを作っていただけますでしょうか。(有料でもかまいません!)

    お願いばかりで申し訳ありませんが、どうぞよろしくお願いいたします。

    返信削除
    返信
    1. はじめまして。
      スクリプトを使って頂きありがとうございます。
      確かに、トップページに変な感じで広告が表示されてますね...

      スクリプトを見直して、
      トップの記事一覧にアドセンス広告が表示されないように、
      掲載しているスクリプトを修正しました。

      具体的な修正箇所としては、スクリプトの先頭と最後に、
      <b:if>のタグを追加して、トップページでは
      スクリプトが動かないように修正しました。
      もう一度貼り直して試してみて貰えますでしょうか。

      また、ラベルの横に記事数を表示する件ですが、
      私がトーマスイッチさんのVaster2を使った事がないため、
      すいませんが、お役に立てなさそうです。

      削除
    2. てらさま

      早速ご返信とご対応くださりありがとうございます。
      <b:if>部分を追加したところ、無事トップの記事一覧には表示されなくなりました。本当にありがとうございます、、!!

      ラベルの記事数表示に関しては自分で頑張ってみます。無理なお願いをしてしまいすみませんでした。今後のご活躍も陰ながら楽しみにしております。重ねてありがとうございました。

      削除

コメントを投稿

このブログの人気の投稿

axiosの使い方まとめ (GET/POST/例外処理)

axiosの使い方まとめ (GET/POST/例外処理)最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。GETリクエストをaxiosで送るまずはGETリクエストをaxiosで送る方法です。const res =await axios.get('/users') console.log(res.data)分割代入の記法を使うと、以下のようにも書けますconst{data}=await axios.get('/users') console.log(data)クエリパラメータ (URLパラメータ)を指定クエリパラメータを指定する方法は2つあります。1つ目は、axios.getに指定するURLに直接記述する方法です。axios.get('/user?id=123')2つめは、axios.getの第2引数に、オプション指定する方法です。axios.get('/user',{ params:{ id:123}})POSTリクエストをaxiosで送る次はPOSTリクエストをaxiosで送る方法です。JSON形式でPOSTするJSON形式でPOSTする場合は、axios.postの第2引数に、送信するデータをJavaScriptオブジェクトで指定します。const res =await axios.post('/user',{ id:123, name:'Yamada Tarou'})application/x-www-form-urlencoded形式でPOSTするapplication/x-www-form-urlencoded形式でPOSTする場合は、URLSearchParamsを使います。var params =newURLSearchParams() params.append('id',123) params.append('name','Yamada Tarou')const res =await axios.post('/user', params)axios でファイルをアップロードする画像などのファイルを、axiosでアッ…

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決する

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決するタイトルの通りですが、Windows 8 以降では Windows Form アプリケーションで、コントロールの ImeMode に Katakana や KatakanaHalf を設定しても、カタカナになってくれません。なぜ ImeMode が効かないのか?Windows 8 以降、IME Mode の切り替えは、ユーザー単位で切り替わるようになった為、アプリから IME Mode 制御が出来ないようになりました。
(IME をON にした場合、常に ひらがな モードになます)※ Windows 7までは、IME Modeの切り替えはアプリ単位で行われていた為、問題なくアプリから IME制御が行えました。対処方法Windows 8 以降、IMEの制御は、InputScope クラスの利用が推奨されています。
しかし、InputScope クラスは、WPF、Windows ストアアプリでしか使えない為、Windows Formアプリでは使用できません。
(Windows Form はもう使うな!という事でしょうか (涙) )結論としては、コントールパネルの設定で、IMEの制御をユーザ単位から アプリ単位に変更する事ができます。
これで、Windows Formアプリでも 従来通りIMEの制御を行う事が出来ます。おわりにこの方法だと、アプリをインストールする端末すべてに設定が必要となり、とっても面倒です。。。
しかし、今の所これしか方法がない状態です。
これからは Windows Formではなく、WPFや Windows ストアアプリで作れという事ですかね (^^;)

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…