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

Seesaaブログにアドセンスを設置する方法

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

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

Googleアドセンス申請から設置までのまとめ

アドセンスの設置の流れと効果的な配置と種類

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

設置-1

記事タイトル付近などはよくクリックされる場合が多いのですが、これは自分の記事読まれてないという事ですし、そもそもコンテンツを押し下げるような広告はサイトの評価的には微妙という事も言われてます。

一番効果的なのがスマホページの広告。訪問者の8割くらいはスマホ経由なので、スマホの広告が一番大事なんですが、無料ブログのスマホページにはすでに自動で広告がでるようになっていて自分の収益にはなりません。これが無料ブログのデメリットになります

という事で記事下、記事中、サイドバーに設置していきます。

通常広告のサイズはPCとスマホで使い分けるのですが、アドセンスの場合は「レスポンシブ」を選んでおけばそれぞれのスペースに合う広告が表示されます

という事でサイズはレスポンシブでOK。

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

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

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

「デザイン」⇒「デザイン設定」⇒「コンテンツ」をクリック。

Seesaaブログのデザインコンテンツ

サイドバーにメニューから「自由形式」をドラッグ&ドロップして追加。

Seesaaブログに人気記事一覧を設置する方法-3

で、自由形式の「設定マーク」をクリック。

Seesaaブログに人気記事一覧を設置する方法-4

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

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

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

Seesaaブログにアドセンスを設置する方法-1

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

自由形式のタイトルを表示させるようにする

先程ラベル(スポンサーリンク)という表示を入れたのですが、Seesaaブログの場合は自由形式のタイトル(名前)がサイドバーには反映されませんので、これを反映されるようにカスタマイズしていきます。

Seesaaブログの管理画面から「デザイン」⇒「コンテンツ」で自由形式を追加して「自由形式」の設定部分をクリック。

Seesaaブログに人気記事一覧を設置する方法-4

自由形式の「コンテンツHTML編集」をクリック。

Seesaaブログに人気記事一覧を設置する方法-6

HTMLが表示されます。1行目に以下のような記述があります。

これの直後に以下のコード1行を追加。

こんな感じになります。保存を忘れずに。

Seesaaブログに人気記事一覧を設置する方法-11

自由形式に「このコンテンツは独自にHTML編集されています」と表示されていればOK。ここも保存。これで自由形式のタイトルが反映されるようになります。

Seesaaブログに人気記事一覧を設置する方法-9

自由形式の画面を閉じるとコンテンツ一覧画面に戻るのでここでも念のため保存。

Seesaaブログに人気記事一覧を設置する方法-10

これで自由形式のタイトルが反映されるようになります。

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

Seesaaブログスタイルシート編集画面

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

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

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

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

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

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

SeesaaブログHTMLの編集

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

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

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

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

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

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

Seesaaブログスタイルシート編集画面

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

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

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

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

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

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

SeesaaブログHTMLの編集

HTMLのコードがたくさん書いてありますが、初期状態なら162行目付近に次のようなコードがあります。

上記コードの「直前」に次のコードを追加。

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

Seesaaブログにアドセンスを設置する方法-4

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

Seesaaブログスタイルシート編集画面

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

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

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

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

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

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

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

WordPressアドセンス-1

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

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

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

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

Seesaaブログにアドセンスを設置する方法-5

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

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

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

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

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

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

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

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

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

Seesaaブログスタイルシートスマホ版編集画面

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

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

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

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

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

一番重要なのがスマホページの広告ですが、冒頭でも書いたようにブログサービス側が設置した広告が邪魔になっており、自分の広告を設置する場所は限られます。

また、「記事タイトルの上」「記事タイトルの下」「記事下」などの重要なポジションは取られているのが痛いところです

どうしてもスマホの広告を消したいという方はWordPressへの移行して下さい。ブログを収益化するならWordPress一択です。

WordPressと無料ブログの違いは?WordPressを始めるのに必要な物や料金

さて、ここまで書いてきた記事中に設置したアドセンスはスマートフォンで表示されますが、それ以外の「記事下」や「サイドバー」などに設置した広告はスマートフォンでは表示されません

スマートフォン用の広告の幅はレスポンシブもしくは300pxがちょうどいい感じなので300×250とかの広告を設置したらいいかな。

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

Seesaaブログにアドセンスを設置する方法-7

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

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

Seesaaブログにアドセンスを設置する方法-9

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

Seesaaブログにアドセンスを設置する方法-8

これ、「記事下」という所に自由形式を追加してアドセンス追加しましたが、実際スマホで見ると、記事下には別の広告があり、その下に関連記事、さらにその下に自分の自由形式に入れた広告が表示されますのでこれはあまり効果ないかもです。

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

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

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

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

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

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

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

WordPressの始め方
にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

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

ブログの更新はこちらから

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

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

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

CAPTCHA


  1. 310

    しげぞう様

    ご返信頂きありがとうございます。
    ご指摘いただいた箇所を修正し、サイト確認をし他ところ、
    スポンサーリンクの下に余白がなく表示できました。

    親切な修正箇所のご指摘、大変ありがとうございます。
    自分自身、もう少し勉強していこうと思います。

  2. しげぞう 投稿作成者

    310様

    返信ありがとうございます。CSSの部分で間違いが幾つかあって最初の見出し(h3)の装飾以外は多分全部反映されていない感じがします。フォントサイズやリンクの色など多分全部反映されてないかも。

    前回書いたように途中でコードミスがあるとそれ以降のCSSはすべて反映されません。いくつか気づいたミスを書いてみますので修正してみてください。

    ↓この記述。

    ここは最後の「 } 」が1つ抜けているので上記記述の最後の部分をしっかり閉じる必要があります。これ以降の記述がすべて反映されてません。

    それからその記述の下にbodyの部分の記述があるのですが、font-size:16px;となっている部分が全角の数値16pxになってますので、半角の数値16pxにしてください。

    とりあえずそれだけ修正してサイトの確認をお願いします。まだミスがあるかもですが、まずはここまでがOKか確認したいです。

  3. 310

    しげぞう様

    ご返信頂きありがとうございます。

    Seesaaブログに関しては、新デザインの方を使用しております。
    指定された場所へのコピーアンドペーストでコードを貼り付けていますので、
    記述のミスはないかと思います。また、CSSとHTMLを確認もし間違っておりませんでした。
    コードをコピペしてから、ブログを再度読み込み等も試しました。

    私自身、CSSやコードに関しまして全く無知でどうすればいいのかわからず、
    原因がわかりません。以下、URLです。
    お忙しい中大変申し訳ありませんが、よろしくお願いします。

  4. しげぞう 投稿作成者

    310様

    コメントありがとうございます。CSSが反映されない場合って色々原因があります。コード自体が間違っていたり、そのコードよりも前の記述が間違ったりするとそれ以降のコードなどは全て反映されません。

    まずはSeesaaブログの新デザインであるかどうか?記述ミスはないか?CSSとHTMLを間違っていないか?を確認し、再度ブログを表示させて再読み込みをして反映されているか確認をします。時々以前のデータがブラウザに残っていて再読み込みしないと反映されない場合も多いので、その辺もチェックが必要です。

    なので原因が分からない場合にはブログのURLを教えてもらえると助かります。コメント公開時にはURLは削除します。