Seesaaブログが新システムに移行しているので、新システム版のアドセンス設置方法を改めて紹介します。今回紹介するのは「サイドバー」「記事下」「記事中」それから「スマートフォンでの広告表示」です。

アドセンスの登録や審査が終わって広告コードの作成までできている前提で進めますが、まだ登録や審査、広告の作成方法が分からないという場合には先にこちらの記事から順番にどうぞ。
⇒Googleアドセンス申請から設置までのまとめ

それと従来のシステム（旧システム）ではアドセンスコードの直前に改行タグ<br />を入れないと上手く表示できない場合があったので、今回も念のため入れておく事にします。それでは早速解説スタート！

おすすめのASP

⇒もしもアフィリエイトの登録や使い方

効果的なアドセンスの位置

まずアドセンスのユニット広告が貼れる数は１ページに３つまでです。効果的なアドセンスの設置位置を紹介しておくと、「記事中」それから「記事下」の２箇所です。サイドバーは意外にあまりクリックされません。

特にWordPressとかでも最近は記事中に１つ、記事下に２つという設置にしているブログが非常に多いですし、私の場合も色々試してこの配置を採用しています。

記事中に１つと記事下２つの広告を設置するとこれで合計３つになりますので、サイドバーにはアドセンス以外の広告を設置するというのが非常に効果的な配置になります。

サイドバーに設置する広告を用意しておこう

サイドバーには自分のサイトのターゲットに合わせた広告を探す必要があります。例えば若い女性の訪問者がターゲットのサイトなら「脱毛関連」や「エステ関連」みたいな感じでもいいですし、季節物の商品や商材でもOK。

紹介する広告に関しては「A8.net」や「afb」のようなASPに無料登録して広告を利用する事ができます。

特に「afb」のアフィリエイトリンクには全て「no follow」タグ（リンク先に評価を渡さないタグ）が入っているのでおすすめです。

要はリンク先に自分のブログのパワーを渡さないリンクになりますし、検索順位に悪影響を与えないアフィリエイトリンクになります。

サイドバーの広告ってどのページでも表示される部分なのでこの辺も考慮しておくとベターです。

先に登録を済ませて広告を用意しておくとスムーズに進むので、自分のサイドバーのサイズに合う広告のサイズを用意してね。初期状態なら300pxの横幅です。
⇒afb

サイドバーに広告を設置する場合

前述したようにサイドバーにはアドセンス以外の広告を入れるのが一般的で私もそうしてます。サイドバーにアドセンスを設置したい場合もあるかと思いますし、別の広告を貼る場合にも参考になると思いますので一応書いてみます。

アドセンス広告を貼り付ける場合には他の広告と区別をするために「ラベル表示」が必要になります。例えば「スポンサーリンク」とか「広告」という表示をしておく必要があります。これも入れながらサイドバーにアドセンスを設置してみましょう。

※アドセンス以外の広告の場合はラベルは必要ないです。

Seesaaブログの管理画面から「デザイン」⇒「コンテンツ」と進み、サイドバーに「自由形式」をドラッグ&ドロップで追加。

自由形式を追加したら「」マークをクリック。

「名前」という部分に「スポンサーリンク」もしくは「広告」と入力。それで自由テキストの部分には次のコードを入れます。

<div class="side-ad"><br />
ここにアドセンスのコード
</div>

ここは後でスタイルシートで位置調整できるように名前「side-ad」という名前を付けておきました。後でスタイルシートで位置調整しますね。

自由形式はこんな感じになります。

「ここにアドセンスのコード」って書いてある部分を削除してアドセンスのコードを挿入し「保存」。「保存」したらこの自由形式の画面は閉じてコンテンツ一覧の画面に戻ります。戻ったら再度一番下の「保存」をクリックして保存。

この時点で広告は表示されますが、先ほど付けた名前「スポンサーリンク」の表示がない状態なので、アドセンス設置の場合は自由形式の名前を表示できるようにしていきましょう。

Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」と進み、適応中のデザインタイトルをクリック。

それで、タブの切り替えができるので、「コンテンツHTML編集」をクリック。

コンテンツHTMLの205行目から206行目に次のようなコードがあります。

<% if:parts_name == 'free' # START parts -%>
<section class="module">

この記述の下に次のコードを追加ね。

<h3 class="module__heading"><% parts.title -%></h3>

こんな感じになりますよ。

追加できたら「保存」。保存できたらブログに反映されているかチェック。

最後に位置調整をします。「スタイルシート編集」のタブをクリック。

ここに色々コードが書いてありますが、一番下までスクロールして次のコードを追加。一応サンプル。

/* サイドバーアドセンス位置調整 */
.side-ad{
  text-align:center;  /* 中央寄せ */
  margin-top:10px;    /* 上に余白 */
  margin-bottom:10px; /* 下に余白 */
}

余白などの数値はお好みで変更しておけばOK。以上サイドバーにアドセンス設置完了！

個別記事の記事下にアドセンスを設置する場合

記事下にアドセンスは結構クリック率の高い場所の１つ。私の場合は記事下に２つアドセンスを縦並びにしている事が多いです。横並びの方が見た目はいいですが、縦の方がクリック率が高い事が多いです。これはサイトによって違うと思うので検証する必要があります。

基本的には「個別ページの記事下」と「トップページの記事下」2箇所に設置しておけばいいでしょう。

Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」と進み、「HTML編集」のタブをクリック。

デフォルト(初期状態)のままならHTMLの97行目付近（デザインによって違うかも？）に次のようなコードがあります。

<% if:blog.bookmark_service -%>

これは記事下のSNS（FacebookとかTwitterとか）のボタンを表示させる記述のスタート部分ね。SNSボタンの上にアドセンスを設置したいので、先ほどのコードの前に以下のコードを追加。

記事下に２つアドセンスを設置したい場合のコード

<% if:page_name eq 'article' -%>
<div class="ad-bottom">
<p>スポンサーリンク</p><br />
ここに１つ目のアドセンスのコード
<br />
ここに２つ目のアドセンスコード
</div>
<% /if %>

記事下に１つアドセンスを設置したい場合のコード

<% if:page_name eq 'article' -%>
<div class="ad-bottom">
<p>スポンサーリンク</p><br />
ここにアドセンスのコード
</div>
<% /if %>

ここでも後で位置調整できるように「ad-bottom」という名前を付けておき、後でスタイルシートで位置調整できるようにしておきます。ついでに念のため、「もし個別ページなら」という条件分岐をしておきました。深く考える必要なし。

以上記述ができたら「保存」。それで今度はスタイルシートで位置調整をしていきます。先ほど記事下のアドセンスには「ad-bottom」という名前を付けておいたのでスタイルシートで位置調整。スタイルシート編集のタブに切り替え。

それでスタイルシートの一番下に次のように記述をします。一応サンプル。

/* 個別記事の記事下アドセンス位置調整 */
.ad-bottom{
  text-align:center;  /* 中央寄せ */
  margin-top:30px;    /* 上に余白 */
  margin-bottom:30px; /* 下に余白 */
}

記事下の広告を縦に２つ並べる場合には「中央寄せ」はしない方がいいかも。個人的にはその方がクリック率が高かったので。

必要な部分をスタイルシートに追加して表示を確認してね。それから設置してからしばらく広告が反映されない場合があるので、数時間は様子をみましょう。

トップページの記事下にアドセンスを設置する場合

先ほど個別記事の記事下にアドセンスを設置しましたが、これだとトップページにアドセンスは表示されません。という訳でトップページの下にもアドセンスを設置してみよう。

再度HTML編集タブに切り替えます。

HTMLのコードがたくさん書いてありますが、一番下の方にスクロールして行って次のコードを探します。最後の方にあるよ。

<footer role="contentinfo" class="l-footer">
		<% parts_50 | mark_raw -%>
		<div class="footer">

これがブログのフッター部分の始まりの部分なので、このコードの後（下）に次のコードを追加。

記事下に２つアドセンスを設置する場合

<% if:page_name eq 'index' -%>
<div class="page-ad-bottom">
<p>スポンサーリンク</p><br />
ここに１つ目のアドセンスコード
<br />
ここに２つ目のアドセンスコード
</div>
<% /if -%>

記事下に１つアドセンスを設置する場合

<% if:page_name eq 'index' -%>
<div class="page-ad-bottom">
<p>スポンサーリンク</p><br />
ここにアドセンスのコード
</div>
<% /if -%>

もしトップページならという条件分岐（if:page_name eq ‘inde）を入れて、さらにこの部分も位置調整できるように「page-ad-bottom」という名前を付けておく。追加できたら「保存」。

後は位置調整なので、「スタイルシート編集」に切り替え。

スタイルシートの一番下に次のコードを追加。一応サンプル。

.page-ad-bottom {
  text-align:center;    /* 中央寄せ */
  margin-top:10px     /* 上に余白 */ 
  margin-bottom:10px;   /* 下に余白 */
}
.l-content {padding-bottom: 10px; /* メインコンテンツの下の余白 */
}

以上でPCページ記事下の広告の設置は完了ですが、広告が反映されるまでしばらく時間がかかる場合があるので、数時間は様子をみてね。

Seesaaブログの記事中にアドセンスを設置する

記事の途中にアドセンスを設置するのは結構手間がかかります。自動で全記事一括で設置できそうですが、自動で一括にする場合には予期しない場所に広告が表示されたりするので、記事中のアドセンスは面倒でも１つ１つ設置したい文中にコードを入れていくのが良いと思います。

また、記事中に入れたアドセンスはスマートフォンでも表示されるので、横幅は300pxのサイズがおすすめ。これ以上になるとはみ出す可能性があります。

注意点としてはできるだけ、冒頭文（リード文）の下に設置するのがおすすめ。つまり記事の最初の方ですね。というのも、この記事中のアドセンスはスマートフォンでも表示されますが、スマートフォンには後で記事下のアドセンスを追加するので、「記事中のアドセンス」と「記事下のアドセンス」の位置が近すぎると警告が来る場合があるためです。

スマートフォンに関しては「スクロールせずに見える範囲（1ビュー）にユニット広告は１つだけ」というルールがあるので、スマートフォンで広告が近すぎないように設置する必要がある訳です。

なので、「記事中のアドセンス」に関しては自動ではなく、1記事1記事手動でアドセンスを設置するのが良いというのはこういう理由です。

さて、記事中にアドセンスを設置する場合は記事投稿画面の記事の本文の途中でアドセンスを入れたい位置に次のコードを入れます。

<p class="middle-label">スポンサーリンク</p>
<div class="ad-middle">
ここにアドセンスのコード
</div>

これを入れたら一度「保存」。

ただ、このままだとラベル（スポンサーリンク）の下に余白が大きくできてしまいます。

これはSeesaaブログの設定で「改行を<br />タグに変換する」という設定になっているのが原因。アドセンスのコードは見やすくするために改行が幾つか入っているのでその分空白ができるのです。

これを改善するには次の方法があります。

• Seesaaの設定を変更する：これは他の記事にも影響するのでNG
• アドセンスのコードから改行を無くす：アドセンスコードの改変はしない方が良いので却下
• スタイルシート（CSS）で余白を調整：これは良さそう

という訳でスタイルシートで調整するのが良さそう。

記事中のアドセンスを設置したらスタイルシートの編集でスタイルシートの一番下に次のコードを追加。

.ad-middle {
    margin-top: -120px;
    margin-bottom: -90px;
}

ちょっと強引ですが余白を無くすコード。マイナスのmarginを設定することで上下の余白を無くす感じね。数値は自分の記事を見ながら変更、調整してね。

それからこの前述したように、「記事中のアドセンス」はスマートフォンでも表示されます。

なので、スマートフォン版のスタイルシートにも同じような記述をする必要があるのでやっておきましょう。

Seesaaブログの管理画面から「デザイン」⇒「スマートフォン」⇒「デザイン設定」⇒「適応中のデザイン」の順にクリック。

するとスマートフォン用のスタイルシート（CSS）が表示されるので、一番下に次のコードを追加。

.ad-middle {
    margin-top: -120px;
    margin-bottom: -90px;
}

追加したら「保存」すればOK。スマートフォンから見てきちんと設置できているか確認してね。数値は変更して調整も可能。

以上で記事中のアドセンス設置はOK。後は1記事1記事の記事中にアドセンスのコードを入れていく、面倒ですが。

続いてスマートフォンはスマートフォン用の設置が必要なので、それもやってみよう。

スマートフォンページにアドセンスを設置

先ほど書いたように記事中に設置したアドセンスはスマートフォンで表示されるけど、それ以外の「記事下」や「サイドバー」などに設置した広告はスマートフォンでは表示されません。

ですがスマートフォンでの設置は1箇所にしておくのが無難。どの無料ブログでもそうなんですが、スマートフォンページには元々広告が多い上、一番効果的な場所は先に占領されています。これが無料ブログのデメリット。

スマートフォンの場合は広告を上に設置するほど効果がありますが、既にその位置はキープされているし、これより上に表示させると「コンテンツを押し下げる広告」として検索順位的にあまりよろしくない。という事なんで設置は記事下の1箇所がいいと私は思ってます。

最近はスマートフォンの普及でスマホからの流入が半数以上になっているのでここは無料ブログの痛い部分です。無料ブログで損しているかも？と思う部分です。

どうしてもスマホの広告を消したいという方はWordPressへの移行も考えてみると良いと思います。無料ブログも悪くないですが、せめてメインで稼ぐブログだけは削除の心配もないWordPressへの移行がおすすめです。

さて、話を戻してスマートフォン用の広告の幅は300pxがちょうどいい感じなので300×250とかの広告を設置したらいいかな。

Seesaaブログの管理画面から「デザイン」⇒「スマートフォン」⇒「コンテンツ」の順番にクリックし、「記事下」という部分に「自由形式」をドラッグ&ドロップ。

自由形式を追加したら「」マークをクリック。

それで自由形式の名前（タイトル部分）はスマートフォンでは反映されないので、「自由形式」のままでOK。その代わり自由形式のテキスト部分に次のように記述。

<div align="center"><p>スポンサーリンク</p><br />
ここにアドセンスコード
</div>

一応こんな感じになってたら大丈夫。

追加できたら「保存」してこの自由形式画面を閉じる。コンテンツ一覧画面に戻るので再度「保存」をクリックして完了。

設置したアドセンスが表示されない場合の対処

アドセンスを設置しても広告が表示されないという場合には次の点を確認しておきましょう。

• ブログを表示させて「Ctrl」と「F5」を一緒に押す（リロード）
• しばらく待ってみる
• 一度設置した広告を削除して保存し、再度貼り付け

アドセンスを貼り付けてもブラウザのキャッシュが残っていてCSSやHTMLが反映されていない場合があるので、これはブログを表示させてから「Ctrl」と「F5」を一緒に押してリロードして確認します。

また、アドセンスは貼り付けてもすぐに表示されない場合があります。数時間から1日は待ってみる事をおすすめします。また、当然ながら2次審査を合格していない状態では広告は表示されないので注意。

それと最後にSeesaaブログの場合はミスなく設置しても表示されない場合があるので、その場合には一度設置したコードを削除して「保存」。表示されていない部分を一度元に戻して保存したら再度貼り付けという手順ね。

以上長かったですがSeesaaブロブのアドセンス設置は完了です。

• ⇒シーサーブログからWordPressにリダイレクトして引越しする方法
• ⇒WordPressと無料ブログの違いは？WordPressを始めるのに必要な物や料金
• ⇒WordPressの始め方や設定、カスタマイズまでのまとめ
• ⇒Googleアドセンス申請から設置までのまとめページ
• ⇒アフィリエイトの始め方と必要な基礎知識まとめ