Google™AdSense広告をFC2™ブログに設置する方法(本文挿入)

2013/11/24 2014/11/22

Google™AdSenseなどを始めようとして思ったところに広告が挿入できないといったことは、
おそらくどこのブログを利用していても経験することかもしれません。
今回はFC2™ブログの投稿内へのスクリプト挿入を利用して、
GoogleAdSense広告ユニットを挿入する方法をご紹介します。

はじめに

無料ブログサービスでカスタマイズをとなると、
様々な制約やルールの上で、編集をしていくことになります。

それぞれの無料ブログごとに編集の流儀があって慣れるまでは苦労が付きまといます。

利用規約の確認

こうした広告配信プログラムを無料ブログなどの他社サービスで利用する上で、
最初に確認するべきことは、利用規約の確認です。

FC2ブログでは商用利用に対して禁止事項を設けていませんので、
利用が可能であることはご存知のことでしょう。
念のため利用規約の確認を行ったことに関するご紹介は以下の投稿です。
Google™AdSense広告をFC2™ブログで利用する上の規約確認

広告ユニットの取得

GoogleAdSenseのコンテンツ広告の取得手順は以下の手順になります。
※サイトポリシー順守に伴い、GoogleAdSenseの画像に関してはご紹介できません。
また、下記の操作手順は2013/11/12現在の画面に対応しています。
（2013/11/22以降、新しい画面が公開されています、しばらくは併用が可能なようです）

GoogleAdSenseログインし上部の[広告の設定]タブをクリックします。
サイドバーに表示された[コンテンツ]-[広告ユニット]をクリックします。
表示されたページに[＋新しい広告ユニット]のボタンが表示されますのでクリックします。
広告に名前を付けます。
広告サイズや広告タイプを選択します。
広告のスタイルは必要があればサイトに合わせて修正します。
[保存してコード取得]をクリックします。

個人的にはTatsuo Ikura – Google+さんのサイトが綺麗でわかりやすいかなと思います。
広告コードの取得 – ぼくらのアドセンスデイズ

また、公式ヘルプにも十分書かれています。
広告ユニットを作成する – AdSense ヘルプ

取得した広告ユニットの設置

GoogleAdSenseの広告をFC2ブログに対して設置するわけですが、
FC2ブログではプラグインカテゴリに対してプラグイン形式で挿入機能があります。
こうした表示する要素を挿入するにはプラグインを利用する方が楽かもしれません。
プラグインを利用した挿入方法については以下でご紹介しています。
Google™AdSense広告をFC2™ブログに設置する方法(PC・プラグイン)

HTMLを編集して設置する方法については、以下でご紹介しています。
Google™AdSense広告をFC2™ブログに設置する方法(PC・HTML)

ここでは、FC2ブログの本文に対してGoogleAdSenseを挿入方法をご紹介します。

設置前の状態

FC2ブログに対して、Google AdSense広告を設置する前の状態は、
以下のような状態になっています。

設定前の状態

プラグインの状態

FC2ブログのプラグインページは以下のようになっています。

プラグイン管理の状態

この状態から、AdSenseユニットを配置していきます。

設置方法

FC2ブログに対して本文中で広告を表示するには、
記事の投稿画面の動きを理解する必要があります。

改行タグの自動挿入機能

FC2ブログでは記事を記載する方法として以下の設定が行えます。

改行をそのまま反映
HTMLタグ以外は無視

これは、記事の投稿エリアに対して、文字を入力した際の改行を、
そのまま<br />タグとして置き換えて、ページを生成するか否かを選択するものです。

その為、この設定が「改行をそのまま反映」として選択されている場合には、
記事の投稿エリアにGoogleAdSenseスクリプトコードを貼り付けても、
そのままでは、JavaScriptコード内に<br />が挿入されてしまって動作しません。

毎回、GoogleAdSenseのコードを投稿の本文中に挿入する予定であれば、
この設定を「HTMLタグ以外は無視」を選択してしまうことも一つの方法です。

ただ、すべてをHTMLで記述することが必要となる為、お勧めはできません。

記事本文への挿入がうまくいかない場合は、大抵はこの仕様によるものではないかと思います。

設定の変更方法

設定の変更ブログ管理画面からサイドバーの[環境設定]をクリックします。

環境設定の選択

環境設定が開いたら上部の[ブログ設定]タブをマウスオーバーし、
プルダウンで表示される[記事の設定]クリックします。

記事の設定の選択

記事の設定が開いたら、スクロールして[投稿設定]の部分を表示します。
投稿設定の中に[自動改行]の設定がありますので、
そこで「改行をそのまま反映」または、「HTMLタグ以外は無視」を選択します。

投稿設定の自動改行の変更

HTMLタグ以外は無視で投稿

「HTMLタグ以外は無視」に設定してGoogleAdSenseを設置した場合は以下のようになります。
※この設定は記事を新規に作成した時点で作成した記事に常に有効になります。
のちに、この設定を変更しても、過去に作成されている投稿には反映されません。
記事の編集画面から設定を個別に変更は可能です。

投稿画面では以下のように、改行の度に<br />と改行タグを入力します。

HTMLタグ以外は無視・記事の投稿

投稿のプリビューでは何も表示されません。
これはプリビュー画面のURL(http://algorhythnn.blog.fc2.com/?editor)が、
ログインユーザーのみにアクセス権が与えられている為、
広告配信が行えないページである為と思われます。
（以後、プリビュー表示は省略します）

HTMLタグ以外は無視・プリビュー

実際に投稿を行うと、以下のように広告が配信されます。

HTMLタグ以外は無視・広告の表示

尚、この方法はFC2ヘルプにも記載されています。

商用利用は出来ますか？また、アフィリエイトは利用できますか？

Q.商用利用は出来ますか？また、アフィリエイトは利用できますか？
A.両方とも可能です。アフィリエイトの登録の方法はこちらをご参照ください。

Q.Google AdSenseの利用の仕方は？
A.プラグインのフリーエリアやテンプレートのカスタマイズにて様々な箇所に貼り付けることが可能です。
記事内に表示させたい場合は、HTMLタグの改行の解釈の違いによって表示されない場合がありますので、
記事投稿画面の下側の「記事の設定」にて「そのまま反映」ではなく「HTMLタグのみ」に変更をして下さい。

改行はそのまま反映で投稿

「改行はそのまま反映」に設定してGoogleAdSenseを設置した場合は以下のようになります。
※この設定も記事を新規に作成した時点で作成した記事に常に有効になります。
のちに、この設定を変更しても、過去に作成されている投稿には反映されません。
記事の編集画面から設定を個別に変更は可能です。

投稿画面では通常通り、見たまま入力することができます。

GoogleAdSenseのスクリプトコードをそのまま貼り付けた場合、
投稿を行っても、GoogleAdSenseの表示は行われません。

これは、JavaScriptのソース内に<br>タグが挿入され、
JavaScriptとして実行できない状態になってしまう為です。

改行はそのまま反映・広告が表示されない

改行は取り除く

これを実行できるようにするためには、改行をすべて取り除きます。
JavaScript自体は改行を行う必要は特にありませんので、以下のように変更します。
９

これで正しく表示が行われるようになりました。

改行はそのまま反映・広告の表示

GoogleAdSenseスクリプトコードの改変について

今回は改行コードのみ取り除く改変を行うことでGoogleAdSense広告ユニットの表示を行いました。

通常、GoogleAdSenseのスクリプトコードの改変は認められていません。
しかし、一部緩和処置としての改変を認めるようになっています。

現在のGoogle AdSenseのポリシーで、
レスポンシブデザインなどの対応の為に一部の改変が認められています。

AdSense 広告コードの修正

AdSense コードについて、禁止されている改変方法は次のとおりです。

広告ユニットを隠す（display:none など）

コンテンツを覆い隠すような方法で AdSense 広告コードを設定する

何らかの方法で 1 ページに 4 つ以上の AdSense 広告ユニットを表示する

隠しキーワードや iframe などを使って広告のターゲット設定を操作する

メールやソフトウェアで広告を配信する

広告ユニットをフロート表示させ、ユーザーの注意を不当に引き付ける

このことから、Google AdSenseの広告主にとって損害が出ないような改変であれば、
おおむね認められているという力加減です。
ただし、念のため自己責任としてください。

さて、こうして改行を取り除いたGoogleAdSenseスクリプトコードを貼り付ければ、
投稿時の改行のストレスなく、投稿の内部に対して広告が表示されました。

しかし、毎回こうした長いコードを貼り付けるのではあまり効率的ではありません。

また、広告ユニットの差し替えをしたいと思った際に、
GoogleAdSenseを挿入した投稿のすべてを修正する必要があります。

外部スクリプトコードによる挿入

あと考えられるのがスクリプトの外部化ですが、
さすがに、外部化したjsを読み込むという手法をとれば、
実際には<script async src=”[url]”></script>で１行で済むかとは思うのですが、
この方法は認められなそうなので取りやめます。

FC2で投稿の本文に挿入する場合には、
改行を取り除いて実装が現実的かなと思います。

トップページなどの最新の投稿の表示に注意

通常FC2ブログのTOPページなどでは、
最新の投稿が５件(設定変更可)表示されたりします。

この表示では追記機能を利用しない場合には、本文の全文が表示されます。

ですので、本文中にGoogleAdSenseを挿入した場合、
トップページには投稿の数分の５か所にGoogleAdSenseが表示される状態になります。

これはAdSenseポリシーに違反します。

その為、投稿の中にGoogleAdSenseを挿入される際には、
必ず、投稿を[本文の編集]と[追記の編集]の二つに分割し、
GoogleAdSenseは[追記の編集]の方へ挿入されることをお勧めします。

こうすることで、[本文の編集]に記載した投稿はTOPページの抜粋表示として利用されます。

詳細は以下をご確認ください。
FC2™ブログの投稿で「続きを読む(read more)を表示する方法

さいごに

本文の中に広告を挿入したい場合には実際このような方法を取る形になるのですが、
これは本来１か所で管理して運営できるGoogleAdSenseのスクリプトコードを、
投稿の数だけ散在させてしまうことになります。

確かに、投稿の内容に応じて広告を表示する、しないの選択が、
コードを挿入する、しないで選択ができるという利点もあります。

しかし、あえて広告をその投稿だけ表示しないというのは、
投稿の内容が問題なのか、表示されるページが広告に不適切なのかはわかりませんが、
別のアプローチで解決を探る方がいいのではないかと思います。

プラグインを利用した挿入方法については以下でご紹介しています。
Google™AdSense広告をFC2™ブログに設置する方法(PC・プラグイン)

HTMLを編集して設置する方法については、以下でご紹介しています。
Google™AdSense広告をFC2™ブログに設置する方法(PC・HTML)

FC2はFC2, Inc.の商標であり、FC2ブログはFC2, Inc.のサービス名称です。
FC2ロゴ、アイコンその他のマーク等はFC2, Inc.の商標であり、FC2, Inc.の著作物です。

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。
Google Analytics™はGoogle Inc. の商標です。