シーサーブログにGoogleアドセンスを設置する方法

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

今回はシーサーブログにGoogleアドセンス広告を貼り付ける方法を紹介していきます。

シーサーブログにGoogleアドセンスを貼り付けるのはちょっと特殊で、コードの直前に改行タグ<br />を入れないと上手く表示できない場合ありますのでこれも対処していきます。

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

それからアドセンスの広告を設置する前に余計な広告表示は出さないようにしておく事も必要です。
シーサーブログの広告を消す方法

スポンサーリンク

サイドバーにアドセンス広告を設置する

まずはサイドバーにアドセンス広告を設置する方法を紹介します。シーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進みます。

見出しタグ-6

コンテンツ一覧画面の左側の「コンテンツ」という部分の「+」の部分をクリック。

アドセンス-1

開いたメニューの中から「自由形式」というのをドラッグ&ドロップでサイドバーに追加。

アドセンス-2

追加できたらこの「自由形式」をクリックして「タイトル」を「スポンサーリンク」と書き換えて、内容部分に次のコードを追加します。

<div align="center"><br />
ここにアドセンスの広告のコード
</div>

↓↓このようになっているはずです。。

シーサー追加-1

追加できたら「保存」をクリック。このままだとタイトルの「スポンサーリンク」という文字が表示されないので、次にこの自由形式の「コンテンツHTML編集」をクリック。

アドセンス-4

自由形式のHTMLが書いてあるのを全部削除して次のコードに入れ替えます。

<div class="sidetitle"><% content.title %></div>
<div class="sidead">
<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>

できたら保存して「自由形式」の画面を閉じ、コンテンツ一覧の画面に戻るのでここでも「保存」をクリックして変更を保存します。

これで「スポンサーリンク」というタイトルも表示されて、アドセンス広告がサイドバーに表示されたはずです。

グローバルナビ

表示されない場合は少し時間が経ってからもう一度確認するか再度やり直してみて下さい。

サイドバーに広告を入れると広告の下に余白がなくて詰まった感じになると思うので、デザイン設定で位置を調整します。

シーサーブログの管理画面から「デザイン」⇒「デザイン設定」⇒「自分のテンプレート」をクリックして次のコードを追加しておきます。

.sidead {margin-bottom:30px}

これで広告の下に余白ができます。さらにこの数値を大きくすると広告の下にもっと余白ができるので調整してみて下さい。

それからGoogleアドセンスでは禁止事項になっていますが、忍者アドマックスの広告を貼る場合はサイドバーに追尾型広告としても設置できるやり方もあります。
シーサーブログのサイドバーに追尾型の広告を設置する方法

記事下にアドセンス広告を設置する

今度は記事下にもアドセンス広告を設置していきましょう。先ほどと同じようにシーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進み「記事」をクリック。

見出しタグ-7

「記事」をクリックして「コンテンツHTML編集」をクリック。

見出しタグ-8

HTMLが書いてある画面になるので「Ctrl」キーを押しながらアルファベットの「F」を押して検索窓を出現させ、<% if:blog.bookmark_service %>という部分(ソーシャルボタンのコード)を検索してみましょう。するとこのようなコードがあると思います。

<% if:blog.bookmark_service %>
<div class="bookmark" data-url="<% article.page_url %>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip | html %>"></div>
<% /if %>

もし、検索できない場合はタグのハイライトを無効にしてから検索。

タグチェック-5

設置する場所はソーシャルボタンの上か下に付けたいので、先ほどのコードの直前もしくは直後に次のコードを追加。

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

このコードを入れて確認してみて、広告の下に余白が必要な場合は最後に<br />をもう1つ入れて調整して下さい。

この部分を解説しておくとこれは<% if:page_name eq ‘article’ -%>で個別記事なら広告を表示させる設定にしています。トップページでも表示させる事は可能ですが、トップページには複数の記事があるので広告の数が多くなってしまいます。Googleアドセンスは1ページに3つまでという決まりがあるので個別記事の記事下にのみ表示させるようにしているという訳です。

一応トップページの下に広告を貼る方法も紹介しておきます。

トップページの記事一覧の下にアドセンス広告

シーサーブログの管理画面から「デザイン」⇒「HTML」と進み、適応中のHTMLを選択。初めてHTMLをカスタマイズする場合にはHTMLの追加をして名前を付けてからカスタマイズする事。

見出しタグ-3

HTMLの一番下の方にフッターを出力するコードがあります。

<div id="footer">

これがフッターの始まり部分なのでこのコードの下に次のコードを追加。

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

先ほど個別記事の下に「もし個別記事なら」という条件分岐で広告を設置したので、今度は「もしトップページなら」という条件分岐でトップページだけ広告を表示させてます。

この部分には「div class=”page-ad-bottom”」というクラス名を付けておいたので、CSSで位置調整もできるようにしてみました。例えばこんな感じ。

.page-ad-bottom {
  text-align:center;    /* 中央寄せ */ 
  margin-bottom:10px;   /* 下に余白 */ 
}

位置は中央が嫌なら「text-align:center」を削除して「margin-left: 〇〇px」とする事で〇〇の数値の分だけ左に余白(右に寄る)ができるので調整してみて下さい。これは他の位置の広告にも応用できるのでそれぞれクラス名を付けてCSSで位置調整してもOK。

広告を設置したらトップページ、それから個別ページでいくつのユニット広告が設置されているか必ず確認しておく事。

それから記事下の部分に広告1つではなくバナー(画像広告)を2つ横並びに設置するダブルレクタングルでも設置は可能です。ダブルレクタングルに関してはちょっと説明が長くなるので別記事書いたので、時間があるときに読んでみて下さい。
シーサーブログにダブルレクタングルを設置する方法

スマートフォンでもアドセンスを表示させる設定

ここまでの設定ではスマートフォンにアドセンスは表示されません。スマートフォンにはスマートフォンの設定が別に必要になります。アドセンスのクリックはスマートフォンでも多いのでここにも設置をしておきましょう。広告のサイズとしては横幅300pxがおすすめです。

シーサーブログの管理画面から「デザイン」⇒「スマートフォン」と進みます。

アドセンスs-2

スマートフォンのコンテンツをクリック。

アドセンスs-3

スマートフォンのコンテンツが表示されるのでその中から「記事」をクリック。

アドセンスs-4

「記事」の「挿入テキスト(上部)」と「挿入テキスト(下部)」というのがあります。これはどちらでもいいですが、やはり記事下の方に表示させた方が良いと思うので「挿入テキスト(下部)」の「+」部分をクリック。

アドセンスs-5

クリックしたらそこに次のコードを入れます。

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

コードを入れたら下の保存をクリックして、この画面を閉じ、またスマートフォンのコンテンツ一覧画面になるのでここでも下の「保存」をクリックしておきます。

スマートフォンにもう一つ追加

さらにもう一箇所追加しておきます。先ほど記事下にアドセンスを入れましたが、今度はスマートフォン版のコンテンツに自由形式を追加して広告を設置します。

シーサーブログの管理画面からデザイン⇒「スマートフォン」と進み「コンテンツ」をクリック。

adtuika-1

ここの記事の下の部分に自由形式を追加して広告を設置しますが、注意点が1つあって、スマートフォンでは1つの表示可能なページに表示できる広告ユニットは1つまでという決まりがあります。つまりスマートフォンでスクロールしない1画面に広告は1つという事です。

そのため、先ほど記事下に設置したアドセンスからちょっと距離を置いて下の方に設置する必要があります。心配なら貼らなくてもいいですが、もう1つ設置したいという場合は、記事コンテンツの下に「カテゴリー」やその他コンテンツを追加しておいてその下に自由形式を追加するのがおすすめです。

adtuika-2

自由形式を追加したら広告を設置します。自由形式に広告を設置するやり方は記事の最初で説明した「サイドバーにアドセンスを設置する方法」と同じ要領です。

最後に保存を忘れないように。以上シーサーブログにアドセンス広告を貼る方法でした。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

シーサーブログにGoogleアドセンスを設置する方法”に93件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. えりりん

    しげぞう様

    早速のお返事ありがとうございます。

    引っ越しの件ですが、全ての記事を全部です。
    旧ブログのトップページに「引っ越しました」のメッセージは
    残したいのですが
    アドセンスは外したほうが無難なんですね。

    管理画面の件ですが、アドセンスに聞いてみます!!

    お忙しいのにすみません。
    ありがとうございました!

  2. しげぞう 投稿作成者

    えりりん様

    コメントありがとうございます。Seesaaブログからの引っ越しされるという事ですが、これは個別記事なども全てリダイレクト(転送)をされる予定でしょうか?これによってちょっと違ってくる場合があるかと思います。

    もしリダイレクトされる場合には個別記事などは全て新URLに転送されますので、旧ブログの方のアドセンスは外してもOKです。リダイレクトなしでトップページだけ残すような引っ越しの場合もアドセンスは外しておくのが良いと個人的には思います。

    というのも、アドセンスの広告というのは情報がないページとか情報が少ないページに貼り付けていると警告が来る場合があります(絶対に警告を受けるという訳ではないと思いますが)。引っ越しする場合に、トップページだけ残すような場合も、引っ越し先のURLしか書いていないページにアドセンスを貼るのはちょっと心配です。

    また、アドセンスの管理画面で許可サイトの部分だと思うのですが、これはそのまま残しておいてOKと思います。完全に削除する場合には削除しても良いと思いますが、それ以外であれば登録サイトとして残しておいても問題はないかと思います。

    上記はあくまで私個人の意見ですが、もし心配であればアドセンスのヘルプフォーラムなどで聞いてみるのが一番確実かもしれません。あまり参考にならずすみません。

  3. えりりん

    しげぞう様

    こんにちは。

    現在、seesaaブログでアドセンスを貼ってブログをやってますが
    このブログを閉鎖して、他の無料ブログに引っ越しをする予定です。
    その場合、過去記事も全て移すので新しいURLを記載するのですが
    (新しいブログはこちらです!みたいに)

    ここから質問なんですが
    seesaaブログで貼り付けてあるアドセンスは
    どうしたらいいのでしょうか?
    googleアドセンスの画面でseesaaブログの部分は削除すればよいのでしょうか?
    (新しい無料ブログに誘導する為に閉鎖しますがトップ画面は残しておきたいのです)
    新しい無料ブログは「追加」はわかるのですが
    閉鎖したブログの分がわかりません。

    宜しくお願い致します。

  4. 茶風

    しげぞう様

    アドバイス通り試したところ、見事成功していました!!
    いつも大変助かっております。ありがとうございました!

  5. しげぞう 投稿作成者

    茶風様

    コメントありがとうございます。おそらくフッターのポジションが原因かなと思いますが、スタイルシートで調整できるかと思います。

    スタイルシートの一番下に次のコードを追加して試して見て下さい。

    .l-footer {
        position: static !important;
    }

    上記をスタイルシートの一番下に追加して保存。それでブログを開き、「Ctrl」と「F5」を一緒に押してリロードしてから確認してみて下さい。

    もしそれでも上手く行かない場合には再度コメント下さい。よろしくお願いします!

  6. 茶風

    しげぞう様
    お久しぶりです。また一つアドバイスを頂きたい事案が発生しました。

    こちら当ブログなのですが、記事の最後が、

    「この記事へのコメント」の下に余白など、本来表示されるスペースが表示されなくなってしまっています。

    これはどう解決したら良いのでしょうか?
    お手隙の際で構いませんので、お願い致します。

  7. 茶風

    しげぞう様

    こんばんは
    しげぞう様はいつも返信が大変早く、とても助かります。
    ご案内の通り試してみたところ、その一文を削除してみると、見事希望通りのレイアウトになりました。
    ヘッダー画像サイズの件もありがとうございます。試してみます。

  8. しげぞう 投稿作成者

    茶風様

    返信ありがとうございます。Seesaaブログの場合は選択するデザインによって若干違う部分があるんですが、茶風様のブログの場合はヘッダー部分(ヘッダー画像とナビの部分)の幅が画面いっぱいに広がっている設定なのかな?と思います。

    私もこのケースは初めてなのでやってみないと分からないのですが、思いついた対処方法としては以下です。

    まず、ナビの部分なんですが、CSSに次のような記述があると思います。

    #navi-bar{max-width:960px;}   /* メニュー全体の幅 */

    この1文を消してみて保存。それでブログを表示させます。「Ctrl」と「F5」を一緒に押してリロードしてから確認して下さい。これでナビが横幅いっぱいに表示されたらOKです。

    ヘッダー画像に関しては現在横幅960pxで画像を作成されたと思うのですが、これを横幅1350pxの画像で作成して設定すれば良い感じがします。ちょっと面倒かとは思うのですが、一度試してもらえると助かります。

  9. 茶風

    しげぞうさんこんにちは
    この度しげぞうさんの記事を頼りにグローバルナビとパンくずリストを設置しました。

    こちらがその画像なのですが、どうもブログの左端にくっつくように設置されてしまっています。
    中央に設置するにはどうすれば良いのでしょうか?
    こちらがブログになります。

    よろしくお願いします。

  10. しげぞう 投稿作成者

    fuku様

    いつもありがとうございます。fuku様のサイトも見させて頂きましたが、確かに記事下の広告だけ表示されませんね。コードを調べてみたのですが、これってアドセンスのコードをそのまま貼り付けてますか?もしかして若干改変して使っていないでしょうか?

    アドセンスのコードの部分に「if(location.href!~」のような記述があるのですがこれもアドセンスの広告コードに含まれていたのでしょうか?

    一度アドセンスで作成したコードをそのまま貼り付けて表示させ、「Ctrl」と「F5」を押して確認してみてください。

    それでもし反映されない場合には再度コメント頂けると助かります。

  11. fuku

    しげぞう様

    いつも記事を拝見させていただいております。fukuです。

    あれからしばらく放置してみましたが、やはり記事下にアドセンス広告が表示
    されません。URLをお伝えしますので、大変恐縮ですが一度ご確認いただけます
    でしょうか?URLは以下の通りです。

    恐れ入りますがよろしくお願いします。

  12. fuku

    しげぞう様

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

    先ほど別のブログ(シーサーブログ)で試しに記事下にアドセンスを貼ってみたところ、なぜか設置直後に表示されていました。

    別記事になりますが、以前ご質問した件でトップに戻るボタンがタップできない、という問題がありましたが、あちらは時間経過で問題解決しました。。
    今回ももしかしたら時間経過で解決するかもしれないので、2、3日様子を見てみます。
    それでも改善されなかった場合はURLをお伝えしますので、お手数ですがご確認いただけると助かります。

  13. しげぞう 投稿作成者

    fuku様

    返信ありがとうございます。アドセンス広告を新規で作成した場合にはしばらく「新規」になっていると思いますので、これは関係ないと思います。後はキャッシュの問題か設置自体のコードミスの可能性だと思います。

    一度別のブラウザでも確認してみる事をおすすめします。それでも反映されていない場合にはお手数ですが、URLを教えて頂けると助かります。コメント公開時にはURLは削除しますので、もしよかったらお願いします。

    それと今から用事で明日と明後日までおりおませんので、返信が遅くなってしまうと思います。申し訳ないのですが、返信は24日以降になると思います。すみません。