頑張らない!でも諦めない!必死にならずにええかげん

Google™AdSense広告をlivedoor™ブログに設置する方法(PC・ブログパーツ)

      2014/11/22

Google or AdMax Promotion(it)

livedoor™ブログを利用していて、HTMLの編集まではしたくないけど、
ちょっと表示するコンテンツを増やしたり、
Google™AdSenseなどの広告を挿入したいといった時ありますよね。
そんな時には、ブログパーツを利用したプラグイン形式で挿入すると簡単です。

はじめに

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

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

利用規約の確認

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

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以降、新しい画面が公開されています、しばらくは併用が可能なようです)

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

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

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

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

GoogleAdSenseの広告をlivedoorブログに対して設置するわけですが、
livedoorブログではHTMLの編集が認められていますので、
HTMLの直接編集にて設置するのも1つの選択だと思います。

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

またお勧めはしませんが本文の間に挿入する方法もご紹介しています。
Google™AdSense広告をlivedoor™ブログに設置する方法(本文挿入)

ここでは、livedoorブログのブログパーツを利用した設置方法をご紹介します。

設置前の状態

livedoorブログに対して、Google AdSense広告を設置する前の状態は、
以下のような状態になっています。(個別投稿画面です)

01_GoogleAdSense設置前の表示

GoogleAdSense設置前の表示

ブログパーツの状態

livedoorブログのブログパーツページは以下のようになっています。

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

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

設置方法

HTMLで挿入されている位置を確認することも可能です。
livedoor™ブログのHTML構造とタグ挿入位置の関係(を調べる方法)

広告設置エリアのサイズ確認

AdSenseスクリプトコードを貼り付ける前に、広告エリアのサイズを確認します。

貼り付けるGoogleAdSenseのスクリプトコードは、表示される場所にあったサイズを指定します。
その為、サイズに合ったAdSenseスクリプトコードを、それぞれGoogleAdSenseから取得してください。

表示エリアのサイズを調べる方法は以下でご紹介しています。
Google™Chromeを利用してサイトの構造とCSS定義を調査変更する方法

今回私のサイトの場合、サイドバーのサイズは幅が200pxとなっていますので、
幅が200px以下の広告ユニットを配置します。

ブログパーツの追加

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

03_マイページブログ設定選択

マイページブログ設定選択

ブログ設定画面より[ブログパーツ]をクリックします。

04_ブログの設定ブログパーツ選択

ブログの設定ブログパーツ選択

ブログパーツをクリックすると、現在ブログに設定されているブログパーツが左に表示され、
右には、追加可能なブログパーツが表示されます。

05_ブログパーツ画面

ブログパーツ画面

画面をスクロールし、追加可能なブログパーツの部分にある、
[フリーエリア]のパーツを、Aまたは、Bのブログパーツを設定する部分へドラッグしマウスを離して配置します。

06_フリーエリアのドラッグ配置

フリーエリアのドラッグ配置

AdSenseスクリプトコードの設定

追加した[フリーエリア]をマウスオーバーすると[設定]が表示されます。
[設定]をクリックして、フリーエリアを編集します。

07_フリーエリア設定の選択

フリーエリア設定の選択

フリーエリア設定のポップアップ画面が表示されますので、
フリーエリアの内容にGoogleAdSenseのスクリプトコードを貼り付けます。

ここでは設定していませんがラベルに対しては[スポンサーリンク]などの
文言を入れるといいでしょう。

また、下部のパーツの表示は[表示]を選択します。
設定が完了したら[保存する]をクリックしてブログパーツを保存します。

08_GoogleAdSenseスクリプトコードの貼り付け

GoogleAdSenseスクリプトコードの貼り付け

保存が完了すると「保存しました」とメッセージが表示されます。

09_保存の確認メッセージ

保存の確認メッセージ

ブラウザからブログの表示を確認すると、設定したGoogleAdSenseが表示されています。

10_ブログ表示の確認

ブログ表示の確認

位置合わせの調整

GoogleAdSenseを貼り付けただけでは、広告が左寄せになっていると思います。
センタリングをしたいような場合には、スクリプトコードの貼り方を工夫する必要があります。

GoogleAdSenseのセンタリングなどの位置合わせについては以下でご紹介しています。
Google™AdSense広告のレイアウトをCSSでセンタリングする方法
Google™AdSense広告ユニットのレイアウト別HTML・CSS一覧

念のため競合のチェック

GoogleAdSenseを設置するにあたっては、設置広告数に上限があります。
ディスプレイ広告ユニットで3個、リンクユニットで3個、検索ユニットで2個まで設置が可能です。

無料のブログサービスでは、既に何かしらの広告が表示されていると思いますが、
その外せない広告の配信元がGoogleではないことを確認しますが、
ぱっと見で設置されていることがわかります。

livedoorではGoogleAdSenseが採用されています。

11_既存GoogleAdSenseとの競合に注意

既存GoogleAdSenseとの競合に注意

その為、私たちが追加できるコンテンツ広告は2つまでになります。
その他のリンクユニットなどは利用されていないようなので、
通常通りのリンクユニット3つ、検索ユニット2つまで追加が可能です。(* 以下追記参照)

その後、別のタイミングでサイトを確認しましたら、
「株式会社フリークアウトの広告」も同じエリアに表示されていました。
その為、このデフォルト広告はランダムに入れ替わるタイプのようです。

ですが、1つはGoogleAdSenseが挿入されるとして、
対応をしておく方が無難であると思います。

2014/03/29 追記

livedoorブログでは既存で表示される広告に対して、
GoogleAdSenseを配信しないように設定変更を行うことができます。

設定を行うことでGoogleAdSenseで認められた広告数を有効に利用することができます。

詳細は以下でご紹介しています。
Google™AdSense広告をlivedoor™ブログで利用する際の既存広告の変更

さいごに

広告をどこに表示したいかによって広告を挿入するプラグインカテゴリを変更したり、
ブログパーツを並べ替えて位置を変更したりすることができます。

簡単にブログパーツを利用してGoogle AdSenseを設置できるこうした仕組みは、
とても便利な機能ではないでしょうか。

ただし、こうしたプラグインによる挿入方法だけでは、
ブログのタイトルヘッダーの直下や、ブログフッターのすぐ上といった、
コンテンツの領域以外に挿入することはできません。
(※そうした形にHTMLが定義されているテンプレートがあれば別ですが)

自分が挿入したい位置に対して、GoogleAdSenseを挿入する場合には、
HTMLで編集されることをお勧めします。

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

参考

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

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

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


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

Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

プロモーション(btm)

Google or AdMax Promotion (it)

 - livedoorブログ , , ,

  関連記事