Seesaaブログにアドセンスを設置（新システム）
スポンサーリンク
Seesaaブログが新システムに移行しているので、新システム版のアドセンス設置方法を改めて紹介します。「サイドバー」「記事下」「記事中」それから「スマートフォンでの広告表示」です。
サイドバーに広告を設置
アドセンス広告を貼り付ける場合には他の広告と区別をするために「ラベル表示」が必要になります。例えば「スポンサーリンク」とか「広告」という表示をしておく必要があります。
Seesaaブログの管理画面から「デザイン」⇒「コンテンツ」と進み、サイドバーに「自由形式」をドラッグ&ドロップで追加。
自由形式を追加したら「」マークをクリック。
「名前」という部分に「スポンサーリンク」もしくは「広告」と入力。それで自由テキストの部分には次のコードを入れます。
|
1
2
3
|
<div class="side-ad"><br />ここにアドセンスのコード</div> |
ここは後でスタイルシートで位置調整できるように名前「side-ad」という名前を付けました。後でスタイルシートで位置調整します。
自由形式はこんな感じになります。
「ここにアドセンスのコード」って書いてある部分を削除してアドセンスのコードを挿入して「保存」します。「保存」したらこの自由形式の画面を閉じてコンテンツ一覧の画面に戻り再度一番下の「保存」をクリックして保存します。
次にラベル表示をします。（スポンサーリンクの表示）Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」と進み、適応中のデザインタイトルをクリック。
それで、タブの切り替えができるので、「コンテンツHTML編集」をクリック。
コンテンツHTMLの205行目から206行目に下記コードがあります。
|
1
2
|
<% if:parts_name == 'free' # START parts -%><section class="module"> |
この記述の下に下記のコードを追加します。
|
1
|
<h3 class="module__heading"><% parts.title -%></h3> |
下記のような感じになります。
追加できたら「保存」して、ブログに反映されているかチェックします。
最後に位置調整をします。「スタイルシート編集」のタブをクリック。
一番下までスクロールして下記のコードを追加します。
|
1
2
3
4
5
6
|
/* サイドバーアドセンス位置調整 */.side-ad{ text-align:center; /* 中央寄せ */ margin-top:10px; /* 上に余白 */ margin-bottom:10px; /* 下に余白 */} |
余白などの数値はお好みで変更してください。以上サイドバーにアドセンス設置完了です。
個別記事の記事下にアドセンスを設置
基本的には「個別ページの記事下」と「トップページの記事下」2箇所に設置しておきます。
Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」と進み、「HTML編集」のタブをクリックします。
デフォルト(初期状態)のままならHTMLの97行目付近（デザインによって違うかも？）に下記コードがあります。
|
1
|
<% if:blog.bookmark_service -%> |
上記コードの前に下記のコードを追加します。
記事下に２つアドセンスを設置したい場合のコード
|
1
2
3
4
5
6
7
8
|
<% if:page_name eq 'article' -%><div class="ad-bottom"><p>スポンサーリンク</p><br />ここに１つ目のアドセンスのコード<br />ここに２つ目のアドセンスコード</div><% /if %> |
記事下に１つアドセンスを設置したい場合のコード
|
1
2
3
4
5
6
|
<% if:page_name eq 'article' -%><div class="ad-bottom"><p>スポンサーリンク</p><br />ここにアドセンスのコード</div><% /if %> |
後で位置調整できるように「ad-bottom」という名前を付けておきます。
記述ができたら「保存」。それで今度はスタイルシートで位置調整をします。
スタイルシートの一番下に次のように記述をします。
|
1
2
3
4
5
6
|
/* 個別記事の記事下アドセンス位置調整 */.ad-bottom{ text-align:center; /* 中央寄せ */ margin-top:30px; /* 上に余白 */ margin-bottom:30px; /* 下に余白 */} |
※記事下の広告を縦に２つ並べる場合には「中央寄せ」はしない方が・・・・
トップページの記事下にアドセンスを設置
個別記事の記事下にアドセンスを設置しても、トップページにアドセンスは表示されませんので、トップページの下にアドセンスを設置します。
再度HTML編集タブに切り替えます。
一番下の方にスクロールして下記のコードを探します。
|
1
2
3
|
<footer role="contentinfo" class="l-footer"> <% parts_50 | mark_raw -%> <div class="footer"> |
このコードは、ブログのフッター部分の始まりの部分なので、このコードの後（下）に次のコードを追加します。
記事下に２つアドセンスを設置する場合
|
1
2
3
4
5
6
7
8
|
<% if:page_name eq 'index' -%><div class="page-ad-bottom"><p>スポンサーリンク</p><br />ここに１つ目のアドセンスコード<br />ここに２つ目のアドセンスコード</div><% /if -%> |
記事下に１つアドセンスを設置する場合
|
1
2
3
4
5
6
|
<% if:page_name eq 'index' -%><div class="page-ad-bottom"><p>スポンサーリンク</p><br />ここにアドセンスのコード</div><% /if -%> |
位置調整できるように「page-ad-bottom」という名前を付けておきます。後は位置調整なので、「スタイルシート編集」に切り替えて、スタイルシートの一番下に下記のコードを追加します。
|
1
2
3
4
5
6
7
|
.page-ad-bottom { text-align:center; /* 中央寄せ */ margin-top:10px /* 上に余白 */ margin-bottom:10px; /* 下に余白 */}.l-content {padding-bottom: 10px; /* メインコンテンツの下の余白 */} |
以上でPCページ記事下の広告の設置は完了ですが、広告が反映されるまでしばらく時間がかかる場合があります、数時間は様子をみてください。
記事中にアドセンスを設置は、スマートフォンページにアドセンスを設置で紹介します。
スマートフォンに関しては「スクロールせずに見える範囲（1ビュー）にユニット広告は１つだけ」というルールがあるので、スマートフォンで広告が近すぎないように設置する必要があります。