Seesaaブログにアドセンスを設置する方法【新システム】

この記事はSeesaaブログの新システム版です。旧システムを利用している方はこちらの記事を参考に。
シーサーブログにGoogleアドセンスを設置する方法

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

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

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

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

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

設置-1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Seesaa新デザインアドセンス-1

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

Seesaa新デザインアドセンス-2

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

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

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

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

Seesaa新デザインアドセンス-3

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

Seesaa新デザインアドセンス-4

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

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

新デザインパンくず-1

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

Seesaa新デザインアドセンス-5

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

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

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

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

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

Seesaa新デザインアドセンス-6

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

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

新デザインパンくず-3

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

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

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

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

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

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

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

新デザインパンくず-2

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

<% if:blog.bookmark_service -%>

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

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

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

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

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

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

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

新デザインパンくず-3

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

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

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

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

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

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

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

新デザインパンくず-2

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

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

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

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

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

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

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

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

Seesaa新デザインアドセンス-10

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

新デザインパンくず-3

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

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

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

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

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

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

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

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

WordPressアドセンス-1

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

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

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

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

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

Seesaaアド-1

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

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

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

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

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

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

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

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

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

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

Seesaaアド-2

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

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

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

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

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

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

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

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

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

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

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

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

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

Seesaa新デザインアドセンス-11

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

Seesaa新デザインアドセンス-2

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

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

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

Seesaa新デザインアドセンス-12

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

Seesaa新デザインアドセンス-9

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

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

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

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

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

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

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

Seesaaブログにアドセンスを設置する方法【新システム】”に52件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. まいぺん

    はじめまして。
    いろいろ参考にさせていただいて、本当にためになります。

    ありがとうございます!

  2. しげぞう 投稿作成者

    けけ様

    2重登録って事があるんですね。初めて知りました!わざわざ報告ありがとうございます、参考にさせて頂きます!

  3. けけ

    お世話になっております。

    いつもご相談に乗っていただき感謝しております。

    先日、アドセンスに合格することが出来ました。
    本当にありがとうございました。

    私の場合、

    2月にコードを貼り付け2次審査回答を待つ

    5月まで返答なし(問い合わせフォーム3回利用も変化なし)

    1度アドセンスキャンセル

    登録し直し

    その日のうちに合格

    という形でした。
    原因は、登録のし間違いにあったようです。

    申請してから数ヶ月音沙汰がなく、登録できているのか確認するために、再度ログインを試みたのですが、その際に”違うグーグルアカウント”を入れてしまい、そのまま登録画面になったので登録ができていなかったのだと思いこんで、そのまま再申請しました。
    すると、サイトURLが登録済みである旨エラーが出たので、そのまま放置していたのですが、1度アドセンスキャンセルをした際に、キャンセルの通知メールが2件来たため、2重登録になってしまっていたことが原因だったのでは?と思っております。

    しげぞう様の元には、お問合わせが多々あるかと思いますので、情報の提供としてご連絡させていただきました。

    そのため、こちらへの返答は不要でございます。
    ご存知の情報でしたらご放念ください。

    今後共、よろしくお願い致します。

  4. しげぞう 投稿作成者

    miffy様

    コメントありがとうございます。広告を貼り付けて審査という感じだと思います。この場合貼り付けた広告は審査が通るまで空白の広告になりますので、サイドバーの一番下に広告を追加すればOKです。審査が合格してから貼り付け場所を変更していく方が良いと思います。

    Seesaaブログの独自ドメインだと思うのですが、サイドバーのコンテンツの一番下に自由形式を追加して自由形式の内容の部分に300pxくらいのサイズの広告コードを貼り付けて保存です。
    それから一応ブログのURLを教えていだだけると助かります。

  5. miffy

    いつも記事を見て参考にしています。
    seesaaブログから、グーグルアドセンス申請をしました。
    グーグルからおめでとうございます!
    というメールが来ましたが、これはあくまでも1次審査で、広告がきちんと張り付いているかどうか審査があってからの2次審査をするというメールなのでしょうか?
    審査が通ったとしても、seesaaブログなので、トップ画面からのhtml編集からしかできないのでしょうか?
    とりあえず、デザイン編集、コンテンツ、HTML編集テスト用のコードを張り付けましたが、それでよろしいですか?
    いろいろ張り付けているうちに分からなくなったので、タグのチェックをしていただけたらと思っています。
    まだまだ初心者なので、ご指導の程お願いします。

  6. ari

    入院中とのことですが、大丈夫でしょうか・・・?

    記事中のアドセンスだけが、「スポンサーリンク」
    の文字がうまく表示されなかったのですが、
    余白が狭くて広告の後ろに隠れていたとわかり、数値: -120px;を
    ‐90px;に -90px;を -60px;に替えたらうまく「スポンサーリンク」
    が表示されていました。記事中のサイズはレスポンシブにしています。

    このサイトはいつもとても参考にさせていただいて助かっています。
    どうか長く続けてくださいね。長文失礼しました。

  7. しげぞう 投稿作成者

    ガリゲー様

    わざわざコメントありがとうございます!非常に励みになります。私自身もド素人から始めたので、ちょっとした事でつまづく事が非常に多いです(笑)その都度メモ代わりに記事にしてますので、それが参考になったのであれば私としても非常に嬉しいです。

    WordPress楽しみですね。引っ越しは結構大変な作業になりますが、また何か分からない部分などあればいつでもコメント下さい。今後ともどうぞよろしくお願い致します。

  8. ガリゲー

    しげぞう様
    いつもお世話になっております。

    アドセンス記事中挿入の際、ラベル(スポンサーリンク)を入れると、
    かなり余白ができてしまい、どこのサイトを見ても分からず終いでした。

    しかし、しげぞう先生のサイトに細かな解説がしてあり、問題解決いたしました!
    かなり感動いたしましたので御礼を述べさせて頂きたくコメントいたしました。

    Seesaaブログを立ち上げ早1年ほどが経ち、近々WordPressへ引越しします。
    もちろん、引越しを思い立ったのはしげぞう先生のサイトを拝見したからです。

    CSSやHTML、SEOなど、本屋に売ってる書籍なんかよりも比べ物にならないくらい
    affiliate150.comに助けていただいております。誠に感謝しております。

    WordPress初心者でSeesaaからのアクセスが引き継げるのか心配ではありますが、
    長い目でみてWordPressでがんばっていきたいと思います。

    長文失礼いたしました。
    SEOでよく言われている「有益なサイト」とはまさにこのサイトです!

  9. さいとうさん

    しげぞう様

    お世話になってます。

    回答頂き、有難うございます。
    早速実践してみます。

    お言葉に甘えて、また何かあれば
    質問させて頂くかも知れません。

    今後とも、宜しくお願い致します。

  10. しげぞう 投稿作成者

    さいとうさん様

    コメントありがとうございます。コード内に「スポンサーリンク」という日本語が含まれますがこれはそのままコピペでOKです。実際に広告を設置すると広告の上に「スポンサーリンク」と表示される部分です。コードに関しては「アドセンスのコード」となっている部分だけ自分のアドセンスコードに書き換えて下さい。

    また、スタイルシートの分も日本語の部分は「コメント」になります。後から修正する場合に分かりやすくなります。/* */で囲まれた部分は実際のコードには影響しない部分なので、日本語のメモ(コメント)も含めた分をコピペでOKです。要はそのままコピペでOKです。

    特に失敗しても元に戻せますが、心配であれば一度スタイルシートなどをメモ帳に貼り付けておいてコードを追加してみると良いと思います。それならまた元に戻すのも簡単になります。

    また何かわからない部分があればコメント下さい。今後もよろしくお願い致します。

  11. さいとうさん

    しげぞう様

    初めまして。
    ブログ初心者の「さいとうさん」と申します。

    『“Seesaaブログにアドセンスを設置する方法【新システム】”』
    記事を参照にgoogleアドセンスを貼り付けようとしているのですが、
    記述で理解出来ない部分があります。
    勉強不足で申し訳ないですが、ご教授頂けないでしょうか。

    『記事下に2つアドセンスを設置する場合』について
    例文画像内のグレー色の日本語文字(「スポンサーリンク」)も、
    入力するのでしょうか?
    アルファベットや記号の入力例の中に、日本語が混ざっているので、
    困惑してしまいました。

    また、続けて下の、
    『スタイルシートの一番下に次のコードを追加。一応サンプル。』
    部分の例についても同じくです。
    オレンジ色の日本語表記部分は入力するのでしょうか。
    日本語表記部分が、その前に書かれている英文の意味となっているようなので、
    これも入力するものなのか、
    それとも、意味を解説して下さっているものなのか、

    違いが分からず、先に進めずにいます・・

    「とりあえずやってみる」、で、取り返しのつかない失敗になるのが
    怖く、先に進めずにいます。

    どうぞ宜しくお願い致します。

  12. しげぞう 投稿作成者

    goro様

    コメントありがとうございます。返信遅れてすみません。コメントには個人的なurlが貼り付けてある場合があるため、1つ1つ確認してから公開するようにしてますので、ちょっとタイムラグがあります。

    それで本題ですが、シーサーブログには旧システムと新デザインシステムの2パターンがあって、それぞれデザインもHTMLも違います。このブログではこの両方の記事を分けていますので、goro様の見ている記事と、システムが違うのではないかと思います。それぞれ記事の冒頭に旧システムと新デザインシステムへのリンクがあると思いますので、確認をしてみて下さい。