【コピペ一発】はてなブログで記事中アドセンス自動挿入とカテゴリ広告非表示を同時に実現する方法

Google Adsenseの審査に合格したら、まず行うことは広告の設置ですね。この記事ではアドセンス広告を設置する方法、必要なスクリプトを自動的に作成できるツールを提供しています。

このスクリプトでは、はてなブログを利用中で記事中やフッターにGoogle Adsense（アドセンス）を設置・自動挿入しつつ、ポイントサイト記事など特定カテゴリでは広告を非表示にすることが可能です。

目的の機能

本記事が目指すのは次の2つの機能です。

1. Google Adsense 広告を記事中に自動挿入する
2. 特定の記事でGoogle Adsense 広告を非表示にする

この2つを同時に実現するのがいかに大変かを既にご存知のブロガーさんも多いかと思います。なぜなら、1と2はそれぞれ別の人たちが作ってくださったスクリプト（JavaScript）のため、同時に利用することを前提として作られていないからです。

そのため、ただ2つを組み合わせれば両方の機能を実現できるわけではありません。工夫を凝らして実現するか、別の方法を模索することになります。

1月18日10時に公開した時点では別の方法（display:none;）を利用する方法を用意しましたが、Google Adsenseの利用規約に違反する可能性があるため、スクリプトにより広告自体をコメントアウトする方法に変更いたしました。

ただし display:none; は活用の幅がありますので、後日また記事にできればと思います。

「スクリプトってなんぞ？」「コピペだけしたい」という方は、以下すっ飛ばして自分のブログで活用してみようから読み進めていただいてもOKです。

目的の達成方法

今回は１と２のスクリプトを融合させて、簡単に１、２の目的を達成していきます。

このセクションでは、どういう仕組みで実現するのか？を説明していきます。

興味のない方、よくわかないという方は読み飛ばしていただいても結構です。

１．Google Adsense 広告を記事中に自動挿入する

１の目的を実現するスクリプトとして、下記記事をお書きになられたU太郎 (id:uxlayman)様のスクリプトを利用させていただきます。 この場を借りて、スクリプトの開発に感謝いたします。

uxlayman.hatenablog.com

このスクリプトは、例えば「記事中にある2つ目の大見出しの直後に広告をいれる」という指示をあらかじめはてなブログに設定しておき、記事を書くたびにGoogle Adsenseの広告コードを埋め込むことなく、自動的に広告を挿入できる優れものです。

一度設定してしまえば、あとは記事を書くだけなので楽ちんですね。

２．特定のカテゴリでGoogle Adsense 広告を非表示にする

続いて２の目的を実現するために、下記記事をお書きになられたらくからちゃ (id:lacucaracha)様、並びにその大元のスクリプトをお書きになられたはぴらき(id:hapilaki)様のスクリプトを利用させていただきます。

hapilaki.hateblo.jp

www.yutorism.jp

これらのスクリプトは、特手のカテゴリ、例えば「広告非表示」というカテゴリに属する記事が表示されるときに自動的にGoogle Adsense広告を非表示にするという仕組みを持っています。

カテゴリさえ指定し忘れなければ自動的に非表示にしてくれるので、ど忘れによるアドセンスからの警告を受ける可能性が低くなります。

自分のブログで活用してみよう

それでは実際にみなさんのブログに何をすればいいか、簡単にまとめました。

１．はてなブログに設定する

この記事では皆さんに簡単に設定をしてもらうため、Google Adsenseの広告コードさえコピーできれば、後はワンクリックであなた専用のコードを自動的に作ってくれる仕組みを用意しました。

Google Adsense Maker for はてなブログ

この自動生成サービスは、Chrome、Microsoft Edge、Firefoxでご利用いただけます。

ただしブラウザの仕様上、カラー指定に任意の16進数を利用できるのはMac版Chromeのみとなります。

作成できる広告タイプ：

① 1つの広告（PC版/モバイル版ともに推奨）

② 2つの広告を横並びに表示（PC版推奨）

挿入できる位置：

① 各見出しの前後 

② フッター直前（記事下）

１ー１．Google Adsenseからコードを取得する

まず初めにGoogle Adsenseから、記事中に挿入したい広告ユニットのコードを取得します。このとき、既にヘッダーやフッターに利用している広告を使いまわさないように気をつけてください。広告種別やサイズに制限は特にありません。

広告ユニット一覧画面に表示される「コード取得」のボタンをクリックすると、

コードが表示されるので、すべて選択してコピーします。

１−２．Google Adsense Maker に貼り付ける

Google Adsense Maker for はてなブログ にアクセスして、さきほどコピーしたコードを上の枠に貼り付けます。

１−３．自分のブログ向けにカスタマイズする

コードを貼り付けたら、カスタマイズ項目を設定していきましょう。簡単に自分のブログにあったデザイン、広告位置に調整できるようになっています。

カスタマイズできる項目

1. 広告上に表示されるスポンサーリンク文字の”カラー”
   
2. 　　　　　　　　　〃　　　　　　　　　の”文字サイズ”
3. 広告の挿入位置

※何もご入力、ご選択いただかなかった場合は下記の通り設定されます。

１−４．コードを自動生成する

各種カスタマイズの入力を終えたら、［コードを自動生成する］をクリックします。

すると、下の枠にあなた専用のコードが表示されます。

表示されたら［コードを全選択する］をクリックして、右クリック > コピー してください。

１−４．はてなブログに貼り付ける（設定する）

あなた専用のコードをコピーできたら、最後にはてなブログに設定をしていきます。はてなブログの管理画面を開き、デザインメニューを選択してください。

左側サイドメニューから真ん中の設定アイコンをクリックします。

まずは記事のプレビューを有効にします。

続いて、記事上 または 記事下 にコードを貼り付けます。

特に何行目に貼り付けなければいけないという制限はありませんが、僕は記事上の1行目に貼り付けました。正しく貼り付けられると、下記画面のようになります。

以上で、はてなブログへの初回設定は終わりです。

最後に指定した位置にGoogle Adsense広告が正しく表示されているかどうか、広告を非表示にしたいカテゴリの記事で広告が非表示となっているかをご確認ください。

アップデート予定

次回のアップデートは次の内容を予定しています。

• 記事内に見出しが1つもない場合

バージョン情報

通常版

ver2.1.1 – 機能追加/修正内容

• フッター直上（記事下）への広告配置に新規対応
• 各広告配置パターンのイメージ画像を新規掲載
• スクリプトの処理速度向上

ver2.0.5 – 機能追加/修正内容

• モバイル版コードの自動生成に対応
• コードの微修正

広告2連続表示対応版

ver.1.1.1 – 機能追加/修正内容

• フッター直上（記事下）への広告配置に新規対応
• 各広告配置パターンのイメージ画像を新規掲載
• “スポンサーリンク”文字の左寄せ、右寄せが反応せず全てセンタリングされていたバグを修正

ver1.0.3 – 機能追加/修正内容

• 通常版に加えての新規リリース
• モバイル版コードの自動生成に対応

Ｑ＆Ａ

1.［自動生成する］ボタンを押してもコードが出力されません。

対応ブラウザでページをご覧いただいていますか？
このサービスは、Chrome、Microsoft Edge、Firefoxでのみご利用いただけます。なお推奨ブラウザはChromeです。

2. ページを何度読み込んでも、［自動生成する］ボタンを何度クリックしてもコードが出力されません。

以前もこのサービスを利用したことがある、またはページを開いたことがある場合はブラウザに残ったキャッシュが原因であることがほとんどです。

ブラウザのキャッシュを削除するかプライベートブラウザ等で再度開き直してください。

3. 見出しがない記事では広告はどこに挿入されますか？

大見出し、中見出し、小見出しいずれも記事内で見つからない場合は記事上または記事下に自動的に広告が挿入されます。これは、生成したスクリプトをはてなブログの「記事上」「記事下」どちらの欄に設定したかにより異なります。

また広告非表示カテゴリが記事に適切に設定されて入れば、見出しのない記事でも広告は表示されません。

補足

A. モバイルページの対応について

この記事ではPC版サイトへの設定方法を紹介しました。モバイル版は後ほど公開します。

→1月19日21時にモバイル対応・2広告横並び表示対応版をリリースしました。

B. その他のカスタマイズについて

その他のカスタマイズについてはスクリプト開発元の記事等をお読みいただき、実施していただくようにお願いいたします。

C. 同志のご紹介

同志jay様が掲載されているスクリプトも基本的に同内容です。今後も簡単に実現できるよう、パターン数を増やすなど頑張っていきます。

www.tsumemiko.com

サンプル

当ブログでも実際にこのスクリプトを利用しています。それぞれ広告表示がどのようになっているか、ご確認ください。

広告表示あり

www.kanamalu.com

広告表示なし（”Adb”というカテゴリに属する記事）

www.kanamalu.com

免責事項

本サービスを実施したことによりブログデザインの喪失、広告収入の減少、Googleによるアカウント停止措置等が発生しても当ブログではその責を負いかねます。操作前に必ずバックアップをとるなど、自己の責任において実施くださいますようお願いいたします。

本サービスのスクリプトではその性質上Google Adsenseの広告コードをご入力いただいておりますが、自動生成スクリプトはすべてユーザー様の環境内で実行されており、当ブログがGoogle Adsenseに関する情報を収集することは一切ございません。ご安心ください。

本サービスは予告なく変更・中断される場合がございます。予めご了承ください。

と、一通り書かせていただきましたが、今後も良い方法がないかアップデートしていきたいと考えています。参考になれば幸いです。