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

2013/11/26 2014/11/22

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

はじめに

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

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

利用規約の確認

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

livedoorブログでは商用利用に対して禁止事項を設けていませんので、
利用が可能であることはご存知のことでしょう。

2014/03/29 訂正

こちらの投稿にてコメントを頂戴致しまして、本投稿に誤りがあることが判明致しました。
以下の広告サイズの制限は「スマートフォン版」に対してのみの制約です。

その為、PC版に対してGoogleAdSenseを設置する際には特に制約はありません。
お詫びして訂正させて頂きます。

~~しかし、利用規約を確認すると、結構重大なことが書いてあります。~~
~~livedoorブログでは、~~

GoogleAdSenseの以下のサイズの広告を”スマートフォン版に対して”設定することはできません。

推奨　336×280 – レクタングル(大)
その他縦長　120×600 – スカイスクレイパー
推奨　160×600 – ワイドスカイスクレイパー
その他縦長　300×600 – スカイスクレイパー(大)

~~感触的には、魅力あるレクタングル(大)が利用できない点が非常にもどかしいですね。~~

スマートフォン版のフリーエリアなどを利用して、GoogleAdSenseを設置する際には、
上記サイズの広告は認められていませんのでご注意ください。

念のため利用規約の確認を行ったことに関するご紹介は以下の投稿です。
Google™AdSense広告をlivedoor™ブログで利用する上の規約確認

広告ユニットの取得

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

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

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

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

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

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

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

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

設置前の状態

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

GoogleAdSense設置前の表示

プラグインの状態

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

GoogleAdSense設置前のブログパーツ状態

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

設置方法

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

HTML編集機能

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

HTMLエディタ
シンプルエディタ

これは、記事の投稿エリアに対して、
入力した内容をHTMLエディタで編集を行うか否かを設定できる項目です。

通常は[HTMLエディタ]が選択されていると思います。

GoogleAdSenseを挿入する場合には、
HTMLエディタにてコードの貼り付けを行う必要があります。

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

設定の確認方法

マイページから[ブログ設定]をクリックします。

ブログ設定

ブログ設定画面より[投稿設定]をクリックします。

投稿設定

投稿フォームの形式の部分で[HTMLエディタ]が選択されていることを確認します。
選択されていない場合には、選択し下部の[設定する]をクリックし保存します。

投稿フォームの形式

シンプルエディタでも「改行を反映する」を無効にすることで、
JavaScriptを挿入することはできると思いますが、
効率的な作業は難しいと思いますので今回は利用しません。

設定の確認は以上です。

記事の投稿

通常通り[記事を書く]をクリックし、新しい記事を作成します。本文を作成します。
この時、作成する画面は[シンプルエディタ(ワープロ)]の状態で作業を行っています。

投稿本文の記載

ここで、HTMLエディタに切り替えて表示します。
右上の[HTMLタグ編集]をクリックします。

HTMLタグ編集の選択

HTMLタグが表示された状態で、投稿が表示されます。
投稿の改行がすべてつながって表示されているかもしれません。

GoogleAdSenseスクリプトの挿入

投稿本文内で広告を表示したい部分に対して、
GoogleAdSenseのスクリプトコードを貼り付けて挿入します。

再び、右上の[HTMLタグ編集]をクリックします。
シンプルエディタに戻ります。

GoogleAdSenseコードの貼り付け

画面上では少し、おかしな表示になりますが、このまま投稿を行います。
[投稿する]をクリックし、記事を公開します。

シンプルエディタの表示と投稿

ブラウザから記事の確認

記事を表示してGoogleAdSenseが表示されていれば、
GoogleAdSenseの挿入は完了です。

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

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

ブラウザからの表示

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

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

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

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

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

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

2013/12/07 訂正・追記

その後livedoorの広告仕様を調べておりました。

livedoorではGoogleAdSenseを私たちが設置する場合を考慮して、
既存の広告表示でGoogleAdSenseを表示しないように設定を行うことができます。

その為、正しく設定を変更することによって、
設置できる広告ユニットの制限は、GoogleAdSenseで定められた個数で設置が可能です。

コンテンツ向け広告：３個
リンクユニット：３個
検索ユニット：２個

設定変更の方法は、以下の投稿でご紹介しています。
Google™AdSense広告をlivedoor™ブログで利用する際の既存広告の変更

尚、変更後はMicroAdからの配信広告が表示されます。

さいごに

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

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

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

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

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

参考

無料版ブログで自分のGoogle AdSenseを表示する　（抜粋引用）

無料プラン（アダルトカテゴリでは不可）でもアフィリエイト広告などは掲載可能ですが、お客様ご自身でGoogle AdSenseを掲載する場合には、管理画面の記事下広告の設定で「livedoor」を選択してください。LINE株式会社の掲載するGoogle AdSenseのIDと、お客様のIDの衝突を回避するためです。

無料版ブログで自分のGoogle AdSenseを表示させたい – livedoor ブログヘルプセンター

livedoorはLINE株式会社の登録商標（第４４５１５８５号）であり、
livedoorブログはLINE株式会社のサービス名称です。
livedoorロゴ、アイコンその他のマーク等はLINE株式会社の商標であり、LINE株式会社の著作物です。

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