Seesaaブログの記事下やサイドバーに広告を設置する方法【新システム】

今回はSeesaaブログの前記事の記事下やサイドバーに広告を貼る方法を紹介していきます。HTMLで全てのページに広告を設置してスタイルシートで位置調整するような感じになります。

通常の広告であれば何でもOKですが、Googleアドセンスに関しては若干違う部分がありますので、アドセンス広告を設置する場合は以下の記事を参考にやってみて下さい。

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

Seesaaブログのサイドバーに広告を設置する

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

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

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

「名前」という部分はSeesaaブログでは表示されませんので適当でOK（表示させる事も可能なので後述します）。

それで自由テキストの部分には次のコードを入れます。

<div class="side-ad">
ここに広告のコード
</div>

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

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

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

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

先程サンプルには自由形式の名前の部分（タイトル）に「おすすめの本」という表示を入れたのですが、Seesaaブログの場合は自由形式のタイトル（名前）がサイドバーには反映されませんので、これを反映されるようにするにはカスタマイズが必要です。
Seesaaブログの管理画面から「デザイン」⇒「コンテンツ」で自由形式を追加して「自由形式」の設定部分をクリック。

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

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

<section class="module module--free">

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

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

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

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

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

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

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

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

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

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

個別記事の記事下に広告を設置する場合

記事下に広告は結構クリック率の高い場所の１つ。基本的には「個別ページの記事下」と「トップページの記事下」2箇所に広告を設置しておけばOK。

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

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

<% if:blog.bookmark_service -%>

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

<% if:page_name eq 'article' -%>
<div class="ad-bottom">
ここに広告のコード
</div>
<% /if %>

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

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

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

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

以上で個別記事の記事下の広告設置は完了。

トップページの記事下に広告を設置する場合

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

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

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

<% 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 -%>

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

<% if:page_name eq 'index' -%>
<div class="page-ad-bottom">
ここに広告のコード
</div>
<% /if -%>

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

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

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

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

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

スマートフォンページへの広告設置について

一番重要なのがスマホページの広告ですが、スマホページにはブログサービス側が設置した広告が多く、自分の広告を設置する場所は限られます。

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

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

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

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

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

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

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

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

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

以上Seesaaブログの記事下やサイドバーに広告を設置する方法でした。

ブログを収益化するならWordPress利用がおすすめ

無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。

また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。

WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。

• ⇒WordPressを始めるのに必要な物や料金
• ⇒WordPressブログの始め方と使い方まとめ！【初心者向け】
• ⇒Seesaaブログカスタマイズまとめ【新システム版】