Google™AdSense広告をSeesaaブログに設置する方法(PC・コンテンツ)

2013/11/14 2014/11/22

Google™AdSenseなどを始めようとして思ったところに広告が挿入できないといったことは、
おそらくどこのブログを利用していても経験することかもしれません。
今回はSeesaa™ブログのコンテンツ機能を利用して、
GoogleAdSense広告ユニットを挿入する方法をご紹介します。

はじめに

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

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

利用規約の確認

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

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

広告ユニットの取得

GoogleAdSenseのコンテンツ広告の取得手順は以下の手順になります。
※サイトポリシー順守に伴い、GoogleAdSenseの画像に関してはご紹介できません。
また、下記の操作手順は2013/11/12現在の画面に対応しています。

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

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

GoogleAdSenseの広告をSeesaaブログに対して設置するわけですが、
SeesaaブログではHTMLの編集が認められていますので、
HTMLの直接編集にて設置するのも１つの選択だと思います。
HTMLを編集して設置する方法については、以下でご紹介しています。
Google™AdSense広告をSeesaa™ブログに設置する方法(PC・HTML)

ここでは、Seesaaブログのコンテンツを利用した設置方法をご紹介します。

試験用ソースの説明

今回Seesaaブログにて、GoogleAdSenseの広告を表示するテスト方法として、
以下の投稿で説明させて頂いているようなテストソースを用いて行っていきます。

無料ブログ各社のGoogle™AdSense設置試験用スクリプト説明

Seesaaブログコンテンツに対して、それぞれソースを設定し動作確認を行っていきます。

設置前の状態

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

コンテンツの状態

Seesaaブログのコンテンツページは以下のようになっています。

独自タグとコンテンツレイアウトの関係

ブログの表示

現在の状態でブログを表示すると以下のような状態です。

開始時ブラウザの表示

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

設置方法

Seesaaブログにログインし表示される[新規投稿]画面の
サイドバーから[デザイン]をクリックします。

サイドバーのデザイン選択

デザイン一覧画面から、上部の[PC]タブが選択されていることを確認し、
[コンテンツ]をクリックします。

PCタブ・コンテンツのクリック

コンテンツ画面がされると、現在サイトに設定されているコンテンツが、
右にレイアウトされて表示されています。

また、追加するコンテンツのパーツは、左の[＋コンテンツ]部分の
[＋]をクリックすると展開されて表示されます。

コンテンツリストの展開

コンテンツを展開したらコンテンツパーツから[自由形式]を探し、
自由形式パーツをマウスでドラッグアンドドロップして、右のレイアウトに配置します。

コンテンツの配置

マウスで配置したらパーツが固定されますので、クリックして編集します。

編集対象コンテンツの選択

編集画面がポップアップで表示されますので、
ここに対して表示する内容や、スクリプトを貼り付けます。

コンテンツ編集画面

テストソースを貼り付けた状態は以下のようになります。

テストソースの貼り付け

テストソース例

ここでは、algorhythnn_gad_img.jsを読み込み、
そこに定義された関数で擬似AdSense画像を呼び出しています。

※これはGoogle AdSense自体がJavaScriptで記述されており、
JavaScriptが実行できる環境であればGoogle AdSenseが設置可能である点から、
擬似的に確認をしています。
実際のGoogle AdSenseコードでは別途レイアウトの調整は必要になりますが、
作業方法としてご説明させて頂いています。

<script type="text/javascript" src="http://algorhythnn.jp/pblic_js/algorhythnn_gad_img.js"></script>
<script type="text/javascript">
	disp_ad("linkunit-h_big_728-15");
</script>

disp_ad("linkunit-h_big_728-15");

</script>

貼り付けが完了したら、スクロールして[保存]ボタンを表示します。
表示された[保存]ボタンをクリックし[設定を完了しました]と表示されたら、
[×]をクリックしてポップアップウィンドウを閉じます。

スクロールして保存・閉じる

元のコンテンツ画面に戻ったら、このコンテンツを反映する対象のページを
上部から選択して[保存]をクリックします。
ここでは[全ページ]を選択しています。

尚、設定対象に選択が可能な単位は以下の選択肢があります。

全ページ
トップページ
記事ページ
過去ログページ
カテゴリページ

上部全ページクリックと保存

保存が完了したら、ブラウザからTOPページなり設定したページを表示し、
設定したアドセンスが表示されていれば完了です。

ブラウザの表示とテスト画像の表示

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

実際には、Google AdSenseのスクリプトコードを設定することになりますので、
Googleから提供されたスクリプトを貼り付けてご利用ください。

実際にはこうした画像ではなくGoogleAdSenseコードを貼り付けておられるでしょうから、
以下のようになっているはずです。
※レイアウトは乱れていますがこれは後でCSSからなどで修正可能です。

また以下の投稿でご紹介しています。
Seesaaブログに設置したGoogle™AdSense広告のレイアウトをセンタリングする

GoogleAdSenseコードの貼付例と表示

全箇所に設置した例

上記のコンテンツに対する設定を繰り返すことで、
複数のGoogle AdSenseを好きな場所に設置することが可能です。

ただし、コンテンツ広告は１ページ内に３個までの制限がありますので、
設置する個数には各自ご注意ください。

テスト用に設置したコンテンツは以下のように設定しています。

テスト用コンテンツの配置

実際にブラウザから設置したテストソースによる表示は以下のようになります。

上部ブラウザ表示

中部ブラウザ表示

下部ブラウザ表示

さいごに

どの位置に挿入したいかによって、コンテンツをどこにドラッグすればいいかがわかります。

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

コンテンツを利用する方法以外にも、直接HTMLを編集して導入する方法も可能です。
以下の投稿でご紹介しています。
Google™AdSense広告をSeesaa™ブログに設置する方法(PC・HTML)

Seesaaはシーサー株式会社の登録商標（第５０４９９６５号）であり、
Seesaaロゴはシーサー株式会社の登録商標（第５１３７４５７号）です。
Seesaaブログはシーサー株式会社のサービス名です。
Seesaaのサービスに用いられるアイコンその他のマーク等は、
シーサー株式会社の商標であり、シーサー株式会社の著作物です。

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