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

Seesaaブログの記事下やサイドバーに広告を設置する方法Seesaaブログアフィリエイトとカスタマイズ

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

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

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

MEMO

広告の用意ができてないという方はASPから広告を探しておいて下さい。

ASPの比較と選び方

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

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

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

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

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

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

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

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

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

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

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

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

Seesaaブログの記事下やサイドバーに広告を貼る方法-1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Seesaaブログ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」という名前を付けておいたのでスタイルシートで位置調整。スタイルシート編集のタブに切り替え。

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

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

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

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

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

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

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

Seesaaブログ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」という名前を付けておきます。追加できたら「保存」。

Seesaaブログの記事下やサイドバーに広告を貼る方法-2

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

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

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

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

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

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

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

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

MEMO

一番収益を上げる事ができるスマホページがこの状態なので無料ブログは収益化には向いてません。

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

WordPressを始めるのに必要な物や料金

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

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

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

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

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

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

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

Seesaaブログの記事下やサイドバーに広告を貼る方法-3

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

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

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

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

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

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

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

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

コメント

  1. しげぞう より:

    まいけん様

    返信ありがとうございます。そうです、記事投稿の最初にアイキャッチ画像を入れたらOKです。WordPressの場合は別にアイキャッチ画像を設定する項目があるのですが、Seesaaの場合は記事の最初に直接画像を入れておけば表示されると思いますので、一度試してみて、関連記事や最近の記事の部分にも画像が表示されるか確認してみて下さい。

    もし上手く行かない場合には再度コメント下さいませ。最近Seesaaはほとんど使ってなくて、WordPressばかりなので、多少変更している部分もあるかもしれませんので、その場合には再度調べてみますね。

  2. まいけん より:

    しげぞう様、いろいろアドバイスありがとうございます。恥ずかしい話ですが、アイキャッチ画像は本文の欄に画像を直接貼ればよいのでしょうか。参照記事を教えていただけませんでしょうか。

  3. しげぞう より:

    まいけん様

    返信ありがとうございます。アイキャッチ画像は必須ではないのですが、あった方が見やすい感じですし、サイトの訪問者の方の離脱率も下がったりしますので、文章だけよりも画像があった方が良いと思います。

    アイキャッチ画像に関しては使い回しではなく、1つ1つ探して使う方がほとんどだと思います。最近はフリーの素材を探せるサイトも多いので探してみると良いと思います。ただ、注意点としてはフリーの画像でも画像の下などにクレジット表記(所有者、著作権者の名前など)が必要な物や、クレジット表記なしで使える物など種類がありますので、その点だけは注意してフリー画像を探して見て下さい。

  4. まいけん より:

    しげぞう様、素早いご回答ありがとうございます。私も連休中で、パソコンにゆっくり向き合えず、連休明けにやってみたいと思います。追加で伺います。アイキャッチ画像は記事を書く都度新しく入れていくものでしょうか。それともある程度、あらかじめ設定しておいて使い回しするものでしょうか。甘えすぎかもしれませんが、教えていただけないでしょうか。

  5. しげぞう より:

    まいけん様

    コメントありがとうございます。関連記事の部分の画像はアイキャッチ画像だと思うのですが、記事の先頭に画像を入れるとその画像が反映されるかと思います。これを使うのかそれとも非表示にするのか一度考えてみる事をおすすめします。もし非表示にする場合などはお手数ですが、コメント下さい。その際に使用しているデザイン名も教えてもらえると助かります。

    それからヘッダー画像は入れる事ができます。これも利用しているデザインによって若干違う部分がありますので、もし分からない場合には再度コメント下さい。
    Seesaaブログのヘッダーに画像を設置する方法【新システム】

    連休はちょっとバタバタなので、次の返信は来週になってしまうと思います、すみません。

  6. まいけん より:

    Seesaaブログでアフィリエイトを始めたばかりのまいけんと申します。

    2つほど質問させていただきたいのですが、
    ①おそらくフッターの位置に、関連する記事が表示されるのですが、
    本来画像を入れるところなのか、「no image」の正方形のスペースができ、その下に以前の記事タイトルが出ます。修正方法の参考になる記事もしくはサイトを教えていただけるとありがたいです。
    ②ヘッター部分には画像を入れられないのでしょうか。

    済みません、よろしければお時間あるときにお願いします。

    こちらのサイトでは、よく勉強させていただいております。ありがとうございます。

  7. しげぞう より:

    トモ様

    コメントありがとうございます。通常アフィリエイト広告には表示回数(インプレッション数)を計測するためのタグ(imgタグ)が余計についてます。もちろんタグの改変は禁止されているASPが多いので改変はできませんが、このタグのせいで広告の下に無駄な余白ができてしまうパターンは多いです。

    どのような広告を設置されているか分かりませんが、一度「margin-bottom」の数値をマイナス(-50pxとか-40pxとか)で設定してみて試してください。

    もしそれでも反映されない場合にはお手数ですが、ブログのURLを教えて下さい。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  8. トモ より:

    いつも勉強させて頂いておりますトモと申します。

    サイドバーに広告を設置する件について質問させて頂きたいのですが、
    .admax-side {
    text-align : center; /* 広告を中央寄せ */
    margin-top : 10px; /* 広告の上に余白 */
    margin-bottom : 10px; /* 広告の下に余白 */
    }
    上記のコードを追加して、数値をいくつに変えても全く反映されません。
    中央寄せは出来ているのですが上下の余白の調整だけが出来ません。

    もしかしてと思い「padding :」でやってみても同じく変化なしで
    現状無駄な余白があり困っています。

    対処法を教えて頂ければと思いコメントさせてもらいました。
    よろしくお願い致します。

  9. しげぞう より:

    mary様

    コメントありがとうございます。自由形式の作成ですが、「デザイン」⇒「コンテンツ」と進み、サイドバーに自由形式を追加はできてますか?それ自体でできない感じでしょうか?それとも自由形式の内容が反映されないのでしょうか?そこだけ再度教えて下さい。できれば試してみた手順も教えてもらえると助かります。どうぞよろしくお願い致します。

  10. mary より:

    自由形式を作成できないのですがどうやればよいでしょうか

タイトルとURLをコピーしました