Seesaaブログが新システムに移行しているので、新システム版のアドセンス設置方法を改めて紹介します。今回紹介するのは「サイドバー」「記事下」「記事中」それから「スマートフォンでの広告表示」です。
アドセンスの登録や審査が終わって広告コードの作成までできている前提で進めますが、まだ登録や審査、広告の作成方法が分からないという場合には先にこちらの記事から順番にどうぞ。
⇒Googleアドセンスの始め方。申請や審査から設置までのまとめ
WordPressへアドセンス設置に関してはHTMLやCSSの編集が必要になりますので、HTMLやCSSのようなものは苦手って方は「アドセンスの自動広告」の設置がおすすめです。
アドセンスの自動広告はサイトへコード１つ加えるだけでアドセンス広告の設置場所や数をGoogleにお任せする事ができますし、自動で最適化されますので面倒な作業が必要ありません。
目次
アドセンスの設置の流れと効果的な配置と種類
まずアドセンスの効果的なアドセンスの設置位置を紹介しておくと、「記事中」それから「記事下」の２箇所です。サイドバーは意外にあまりクリックされません。
記事タイトル付近などはよくクリックされる場合が多いのですが、これは自分の記事読まれてないという事ですし、そもそもコンテンツを押し下げるような広告はサイトの評価的には微妙という事も言われてます。
一番効果的なのがスマホページの広告。訪問者の8割くらいはスマホ経由なので、スマホの広告が一番大事なんですが、無料ブログのスマホページにはすでに自動で広告がでるようになっていて自分の収益にはなりません。これが無料ブログのデメリットになります。
という事で記事下、記事中、サイドバーに設置していきます。
通常広告のサイズはPCとスマホで使い分けるのですが、アドセンスの場合は「レスポンシブ」を選んでおけばそれぞれのスペースに合う広告が表示されます。
という事でサイズはレスポンシブでOK。
サイドバーに広告を設置する場合
アドセンス広告を貼り付ける場合には他の広告と区別をするために「ラベル表示」が必要になります。例えば「スポンサーリンク」とか「広告」という表示をしておく必要があります。これも入れながらサイドバーにアドセンスを設置してみましょう。
※アドセンス以外の広告の場合はラベルは必要ないです。
「デザイン」⇒「デザイン設定」⇒「コンテンツ」をクリック。
サイドバーにメニューから「自由形式」をドラッグ＆ドロップして追加。
で、自由形式の「設定マーク」をクリック。
「名前」という部分に「スポンサーリンク」もしくは「広告」と入力。それで自由テキストの部分には次のコードを入れます。
1 2 3 | <div class="side-ad"> ここにアドセンスのコード </div> |
ここは後でスタイルシートで位置調整できるように名前「side-ad」という名前を付けておきました。後でスタイルシートで位置調整します。
自由形式はこんな感じになります。
「ここにアドセンスのコード」って書いてある部分を削除してアドセンスのコードを挿入し「保存」。「保存」したらこの自由形式の画面は閉じてコンテンツ一覧の画面に戻ります。戻ったら再度一番下の「保存」をクリックして保存。
自由形式のタイトルを表示させるようにする
先程ラベル（スポンサーリンク）という表示を入れたのですが、Seesaaブログの場合は自由形式のタイトル（名前）がサイドバーには反映されませんので、これを反映されるようにカスタマイズしていきます。
Seesaaブログの管理画面から「デザイン」⇒「コンテンツ」で自由形式を追加して「自由形式」の設定部分をクリック。
自由形式の「コンテンツHTML編集」をクリック。
HTMLが表示されます。1行目に以下のような記述があります。
1 | <section class="module module--free"> |
これの直後に以下のコード1行を追加。
1 | <h3 class="module__heading"><% parts.title -%></h3> |
こんな感じになります。保存を忘れずに。
自由形式に「このコンテンツは独自にHTML編集されています」と表示されていればOK。ここも保存。これで自由形式のタイトルが反映されるようになります。
自由形式の画面を閉じるとコンテンツ一覧画面に戻るのでここでも念のため保存。
これで自由形式のタイトルが反映されるようになります。
最後に位置調整をします。「スタイルシート編集」のタブをクリック。
ここに色々コードが書いてありますが、一番下までスクロールして次のコードを追加。一応サンプル。
1 2 3 4 5 6 | /* サイドバーアドセンス位置調整 */ .side-ad{ text-align:center; /* 中央寄せ */ margin-top:10px; /* 上に余白 */ margin-bottom:10px; /* 下に余白 */ } |
余白などの数値はお好みで変更しておけばOK。以上サイドバーにアドセンス設置完了！
個別記事の記事下にアドセンスを設置する場合
記事下にアドセンスは結構クリック率の高い場所の１つ。私の場合は記事下に２つアドセンスを縦並びにしている事が多いです。横並びの方が見た目はいいですが、縦の方がクリック率が高い事が多いです。これはサイトによって違うと思うので検証する必要があります。
基本的には「個別ページの記事下」と「トップページの記事下」2箇所に設置しておけばOK。
Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」と進み、「HTML編集」のタブをクリック。
デフォルト(初期状態)のままならHTMLの94行目付近（デザインによって違うかも？）に次のようなコードがあります。
1 | <% if:blog.bookmark_service -%> |
これは記事下のSNS（FacebookとかTwitterとか）のボタンを表示させる記述のスタート部分ね。SNSボタンの上にアドセンスを設置したいので、先ほどのコードの前に以下のコードを追加。
■記事下に２つアドセンスを設置したい場合のコード
1 2 3 4 5 6 7 8 | <% if:page_name eq 'article' -%> <div class="ad-bottom"> <p>スポンサーリンク</p> ここに１つ目のアドセンスのコード <br /> ここに２つ目のアドセンスコード </div> <% /if %> |
■記事下に１つアドセンスを設置したい場合のコード
1 2 3 4 5 6 | <% if:page_name eq 'article' -%> <div class="ad-bottom"> <p>スポンサーリンク</p> ここにアドセンスのコード </div> <% /if %> |
ここでも後で位置調整できるように「ad-bottom」という名前を付けておき、後でスタイルシートで位置調整できるようにしておきます。ついでに念のため、「もし個別ページなら」という条件分岐をしておきました。深く考える必要なし。
以上記述ができたら「保存」。それで今度はスタイルシートで位置調整をしていきます。先ほど記事下のアドセンスには「ad-bottom」という名前を付けておいたのでスタイルシートで位置調整。スタイルシート編集のタブに切り替え。
それでスタイルシートの一番下に次のように記述をします。一応サンプル。
1 2 3 4 5 6 | /* 個別記事の記事下アドセンス位置調整 */ .ad-bottom{ text-align:center; /* 中央寄せ */ margin-top:30px; /* 上に余白 */ margin-bottom:30px; /* 下に余白 */ } |
記事下の広告を縦に２つ並べる場合には「中央寄せ」はしない方がいいかも。個人的にはその方がクリック率が高かったので。
必要な部分をスタイルシートに追加して表示を確認してね。それから設置してからしばらく広告が反映されない場合があるので、数時間は様子をみましょう。
トップページの記事下にアドセンスを設置する場合
先ほど個別記事の記事下にアドセンスを設置しましたが、これだとトップページにアドセンスは表示されません。という訳でトップページの下にもアドセンスを設置してみよう。
再度HTML編集タブに切り替えます。
HTMLのコードがたくさん書いてありますが、初期状態なら162行目付近に次のようなコードがあります。
1 2 3 4 5 6 7 | <% if:page_name eq 'index' -%> <% if:pager -%> <% if:pager.need_pager -%> <ul class="pager"> <% if:pager.previous_page -%> <li class="pager__item prev"><a href="<% blog.page_url(pager.previous_page) -%>"><</a></li> <% else -%> |
上記コードの「直前」に次のコードを追加。
1 2 3 4 5 6 | <% if:page_name eq 'index' -%> <div class="page-ad-bottom"> <p>スポンサーリンク</p> ここにアドセンスのコード </div> <% /if -%> |
もしトップページならという条件分岐（if:page_name eq ‘inde）を入れて、さらにこの部分も位置調整できるように「page-ad-bottom」という名前を付けておきます。追加できたら「保存」。
後は位置調整なので、「スタイルシート編集」に切り替え。
スタイルシートの一番下に次のコードを追加。一応サンプル。
1 2 3 4 5 | .page-ad-bottom { text-align:center; /* 中央寄せ */ margin-top:10px /* 上に余白 */ margin-bottom:10px; /* 下に余白 */ } |
以上でPCページ記事下の広告の設置は完了ですが、広告が反映されるまでしばらく時間がかかる場合があるので、数時間は様子見をして下さい。
Seesaaブログの記事中にアドセンスを設置する
記事の途中にアドセンスを設置するのは結構手間がかかります。自動で全記事一括で設置できそうですが、自動で一括にする場合には予期しない場所に広告が表示されたりするので、記事中のアドセンスは面倒でも１つ１つ設置したい文中にコードを入れていくのが良いと思います。
また、記事中に入れたアドセンスはスマートフォンでも表示されるので、レスポンシブもしくは横幅は300pxのサイズがおすすめ。これ以上になるとはみ出す可能性があります。
注意点としてはできるだけ、冒頭文（リード文）の下に設置するのがおすすめ。つまり記事の最初の方ですね。というのも、この記事中のアドセンスはスマートフォンでも表示されますが、スマートフォンには後で記事下のアドセンスを追加するので、「記事中のアドセンス」と「記事下のアドセンス」の位置が近すぎると警告が来る場合があるためです。
スマートフォンに関しては「スクロールせずに見える範囲（1ビュー）にユニット広告は１つだけ」というルールがあるので、スマートフォンで広告が近すぎないように設置する必要がある訳です。
なので、「記事中のアドセンス」に関しては自動ではなく、1記事1記事手動でアドセンスを設置するのが良いというのはこういう理由です。
さて、記事中にアドセンスを設置する場合は記事投稿画面の記事の本文の途中でアドセンスを入れたい位置に次のコードを入れます。
1 2 3 4 | <p class="middle-label">スポンサーリンク</p> <div class="ad-middle"> ここにアドセンスのコード </div> |
これを入れたら一度「保存」。
ただ、このままだとラベル（スポンサーリンク）の下に余白が大きくできてしまいます。
これはSeesaaブログの設定で「改行を<br />タグに変換する」という設定になっているのが原因。アドセンスのコードは見やすくするために改行が幾つか入っているのでその分空白ができるのです。
これを改善するには次の方法があります。
- Seesaaの設定を変更する：これは他の記事にも影響するのでNG
- アドセンスのコードから改行を無くす：アドセンスコードの改変はしない方が良いので却下
- スタイルシート（CSS）で余白を調整：これは良さそう
という訳でスタイルシートで調整するのが良さそう。
記事中のアドセンスを設置したらスタイルシートの編集でスタイルシートの一番下に次のコードを追加。
1 2 3 4 5 6 7 | .ad-middle { text-align:center; margin-top: -100px; margin-bottom: -50px; } .middle-label {text-align:center;} |
ちょっと強引ですが余白を無くすコード。マイナスのmarginを設定することで上下の余白を無くす感じね。数値は自分の記事を見ながら変更、調整して下さい。
それからこの前述したように、「記事中のアドセンス」はスマートフォンでも表示されます。
なので、スマートフォン版のスタイルシートにも同じような記述をする必要があるのでやっておきましょう。
Seesaaブログの管理画面から「デザイン」⇒「スマートフォン」⇒「CSS/HTML編集」⇒「適応中のデザイン」の順にクリック。
するとスマートフォン用のスタイルシート（CSS）が表示されるので、一番下に次のコードを追加。
1 2 3 4 5 6 7 | .ad-middle { text-align:center; margin-top: -100px; margin-bottom: -50px; } .middle-label {text-align:center;} |
追加したら「保存」すればOK。スマートフォンから見てきちんと設置できているか確認。数値は変更して調整も可能。
以上で記事中のアドセンス設置はOK。後は1記事1記事の記事中にアドセンスのコードを入れていく、面倒ですが。
続いてスマートフォンはスマートフォン用の設置が必要なので、それもやっていきます。
スマートフォンページにアドセンスを設置
一番重要なのがスマホページの広告ですが、冒頭でも書いたようにブログサービス側が設置した広告が邪魔になっており、自分の広告を設置する場所は限られます。
また、「記事タイトルの上」「記事タイトルの下」「記事下」などの重要なポジションは取られているのが痛いところです。
どうしてもスマホの広告を消したいという方はWordPressへの移行して下さい。ブログを収益化するならWordPress一択です。
さて、ここまで書いてきた記事中に設置したアドセンスはスマートフォンで表示されますが、それ以外の「記事下」や「サイドバー」などに設置した広告はスマートフォンでは表示されません。
スマートフォン用の広告の幅はレスポンシブもしくは300pxがちょうどいい感じなので300×250とかの広告を設置したらいいかな。
Seesaaブログの管理画面から「デザイン」⇒「スマートフォン」⇒「コンテンツ」の順番にクリックし、「記事下」という部分に「自由形式」をドラッグ&ドロップして設定マークをクリック。
それで自由形式の名前（タイトル部分）はスマートフォンでは反映されないので、「自由形式」のままでOK。その代わり自由形式のテキスト部分に次のように記述。
1 2 3 | <div align="center"><p>スポンサーリンク</p> ここにアドセンスコード </div> |
一応こんな感じになってたら大丈夫。
追加できたら「保存」してこの自由形式画面を閉じる。コンテンツ一覧画面に戻るので再度「保存」をクリックして完了。
これ、「記事下」という所に自由形式を追加してアドセンス追加しましたが、実際スマホで見ると、記事下には別の広告があり、その下に関連記事、さらにその下に自分の自由形式に入れた広告が表示されますのでこれはあまり効果ないかもです。
設置したアドセンスが表示されない場合の対処
アドセンスを設置しても広告が表示されないという場合には次の点を確認しておきましょう。
- ブログを表示させて「Ctrl」と「F5」を一緒に押す（リロード）
- しばらく待ってみる
- 一度設置した広告を削除して保存し、再度貼り付け
アドセンスを貼り付けてもブラウザのキャッシュが残っていてCSSやHTMLが反映されていない場合があるので、これはブログを表示させてから「Ctrl」と「F5」を一緒に押してリロードして確認します。
また、アドセンスは貼り付けてもすぐに表示されない場合があります。数時間から1日は待ってみる事をおすすめします。また、当然ながら2次審査を合格していない状態では広告は表示されないので注意。
それと最後にSeesaaブログの場合はミスなく設置しても表示されない場合があるので、その場合には一度設置したコードを削除して「保存」。表示されていない部分を一度元に戻して保存したら再度貼り付けという手順ね。
以上長かったですがSeesaaブロブのアドセンス設置は完了です。
しげぞう様
ご返信頂きありがとうございます。
ご指摘いただいた箇所を修正し、サイト確認をし他ところ、
スポンサーリンクの下に余白がなく表示できました。
親切な修正箇所のご指摘、大変ありがとうございます。
自分自身、もう少し勉強していこうと思います。
310様
返信ありがとうございます。CSSの部分で間違いが幾つかあって最初の見出し（h３）の装飾以外は多分全部反映されていない感じがします。フォントサイズやリンクの色など多分全部反映されてないかも。
前回書いたように途中でコードミスがあるとそれ以降のCSSはすべて反映されません。いくつか気づいたミスを書いてみますので修正してみてください。
↓この記述。
ここは最後の「 } 」が１つ抜けているので上記記述の最後の部分をしっかり閉じる必要があります。これ以降の記述がすべて反映されてません。
それからその記述の下にbodyの部分の記述があるのですが、font-size:16px;となっている部分が全角の数値１６pxになってますので、半角の数値16pxにしてください。
とりあえずそれだけ修正してサイトの確認をお願いします。まだミスがあるかもですが、まずはここまでがOKか確認したいです。
しげぞう様
ご返信頂きありがとうございます。
Seesaaブログに関しては、新デザインの方を使用しております。
指定された場所へのコピーアンドペーストでコードを貼り付けていますので、
記述のミスはないかと思います。また、CSSとHTMLを確認もし間違っておりませんでした。
コードをコピペしてから、ブログを再度読み込み等も試しました。
私自身、CSSやコードに関しまして全く無知でどうすればいいのかわからず、
原因がわかりません。以下、URLです。
お忙しい中大変申し訳ありませんが、よろしくお願いします。
310様
コメントありがとうございます。CSSが反映されない場合って色々原因があります。コード自体が間違っていたり、そのコードよりも前の記述が間違ったりするとそれ以降のコードなどは全て反映されません。
まずはSeesaaブログの新デザインであるかどうか？記述ミスはないか？CSSとHTMLを間違っていないか？を確認し、再度ブログを表示させて再読み込みをして反映されているか確認をします。時々以前のデータがブラウザに残っていて再読み込みしないと反映されない場合も多いので、その辺もチェックが必要です。
なので原因が分からない場合にはブログのURLを教えてもらえると助かります。コメント公開時にはURLは削除します。