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

この記事はSeesaaブログの「新システム版」です。従来のシステム(旧システム)を利用している方はこちらの記事を参考に。
シーサーブログのサイドバーや記事下に広告を貼る方法

今回はSeesaaブログに広告を設置する方法を図解で紹介していきます。普通の広告でも忍者admaxのような広告でもやり方は同じですが、Seesaaブログの場合はPCページとスマートフォンページは別々になっているので、それぞれ広告の設置が必要になるので忘れないようにしておきましょう。

また、Googleアドセンス広告設置の場合にはちょっと違う部分があるので、こちらの記事を参考に。
Seesaaブログにアドセンスを設置する方法【新システム】

広告の用意と設置場所について

さて今回は広告の設置場所候補としては「サイドバー」「記事下」「記事の途中」の3箇所に画像広告(バナー)を設置していきます。

忍者admaxなどの広告を利用する場合は3つ広告が貼れますが、効果的な貼り付け場所としては「記事の途中(記事中)」に1つと記事下に2つ。これで3つになってしまうので、サイドバーにはadmax以外の広告を探して用意しておく事をおすすめします。

紹介する広告に関しては「A8.net」や「afb」のようなASPに登録して広告を利用する事ができます。

先に登録を済ませて広告を用意しておくとスムーズに進むので、自分のサイドバーのサイズに合う広告のサイズを用意しておいて下さい。ASPの登録も利用も無料です。それとサイドバーの初期状態のサイズは300pxです。

それでは順番に説明していきます。

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

まずはサイドバーに広告を設置していく手順。

忍者admaxの広告を設置する方の場合は前述したように忍者admax以外の広告を貼るのがおすすめです。一応サイドバーに忍者admaxの広告を設置したいという方もいると思いますので手順だけ紹介しておきます。普通の広告も貼り方は同じです。

Seesaaブログの管理画面から「デザイン」⇒「コンテンツ」と進み、サイドバーの好きな位置に自由形式を追加。ちなみにサイドバーは初期状態なら300pxなので、横幅300pxの広告を用意しておけばOK。

Seesaa新デザインアドセンス-1

追加できたら自由形式の操作マークをクリックして自由テキスト部分に次のコードを追加。

<div class="admax-side">
ここに広告のコードをコピペ
</div>

こんな感じですね。

seesaa-ad-renew

取得した広告のコードを入れて「保存」。自由形式の画面を閉じてコンテンツ一覧画面に戻るので、そこで再度「保存」。この部分には「admax-side」という名前を付けておいたので、スタイルシートで位置調整できます。

今度はSeesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブに切り替え。

新デザインパンくず-3

スタイルシートの一番下に次のコードを入れてサイドバーの広告の位置調整ができます。

.admax-side {
text-align : center;   /* 広告を中央寄せ */
margin-top : 10px;     /* 広告の上に余白 */
margin-bottom : 10px;  /* 広告の下に余白 */
}

ここの「margin-top」と「margin-bottom」で上下に余白ができるので、好きな数値に変更して上や下とのコンテンツの距離を調整して下さいね。

以上でサイドバーへの広告設置は完了。

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

サイドバーに広告が設置できたら今度は記事下。記事下の広告は「個別ページ」と「トップページ」の記事下にそれぞれ設置していきますが、まずは個別ページの記事下から。

一応広告が2つ縦に並ぶような感じになりますが、記事下の広告2つを横並びにしたい場合には次の記事を参考に。後で戻ってきてね。
シーサーブログに広告横並び(ダブルレクタングル)の広告を設置する方法

Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリックして、今後は「HTML編集」のタブに切り替え。

新デザインパンくず-2

HTMLの中から次のコードを探します。初期状態のままなら97行目付近。

<% if:blog.bookmark_service -%>

これが記事下の「ソーシャルボタン(TwitterとかFacebookとか)」を表示させるコードの始まりの部分なので、このコードの「直前」に広告コードを入れます。

記事下に2つの広告を入れる場合のコード

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

記事下に1つの広告を入れる場合のコード

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

追加できたら「保存」。「もし個別ページなら」という条件分岐タグというのを入れておきました。ついでにここも位置調整できるように「admax-bottom」という名前を付けてあります。

HTMLの編集ができたら位置調整をするので「スタイルシート編集」タブに切り替え。

新デザインパンくず-3

スタイルシートの一番下に次のコードを入れて位置調整。数値はお好みで変更して下さい。中央寄せが必要ない場合はその部分を削除してもOK。

.admax-bottom {
text-align : center;   /* 広告を中央寄せ */
margin-top : 10px;     /* 広告の上に余白 */
margin-bottom : 10px;  /* 広告の下に余白 */
}

できたら「保存」して完了。これで個別記事の記事下に広告が表示されます。

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

最後に今度はトップページの記事下に広告を設置していきます。記事下とは言ってもフッターの部分ですね。

Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリックして「HTML編集」タブに切り替え。

新デザインパンくず-2

HTMLのコードがたくさん書かれていますが、一番下の方に次のようなコードがあります。最後の方から上にスクロールしていくと見つかります。

<footer role="contentinfo" class="l-footer">
        <% parts_50 | mark_raw -%>
        <div class="footer">

ここからフッターが始まるよ!というコードなので、これの下(直後)に次のコードを追加。

<% if:page_name eq 'index' -%>
<div class="page-admax-bottom">
ここに忍者admaxのコードをコピペ
</div>
<% /if -%>

追加できたら「保存」。ここでは「もしトップページなら」という条件分岐を入れてさらに位置調整できるように「page-admax-bottom」という名前を付けてあります。

「保存」できたら位置調整のために再度「スタイルシート編集」タブに切り替え。

新デザインパンくず-3

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

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

これでトップページのフッター部分に広告が表示されるはずです。もし表示されない場合は「Ctrl」と「F5」を押してリロードしてみて下さい。

記事中に広告を設置

さて、記事下やサイドバーに設置した広告はスマートフォンページでは表示されませんが、この記事中に入れる広告に関してはスマートフォンページでも表示される広告になります

記事中に広告を入れるのはちょっと面倒なんですが、広告を入れたい場所に1つ1つ手作業でコードを入れていきます。一括でもできるとは思いますが、これは思っていた位置とは違う場合も多々あるので、面倒でも手作業がおすすめです。

記事投稿画面で記事の途中に次のコードを入れます。

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

これで保存して確認してみると広告の上下に結構余白があるので、これをスタイルシート(CSS)の編集で調整していきます。

スタイルシートの編集で一番下に次のコードを追加。

.middle-ad {
    text-align:center;
    margin-top: -65px;
    margin-bottom: -65px;
}

広告の中央寄せが必要ない場合には「text-align:center」は削除してもOK。

できたら保存して確認。この記事中の広告はスマートフォンでも表示されますが、上記コードを入れてもスマートフォンでは余白が反映されないので、スマートフォン用のスタイルシートもちょっと調整が必要です。

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

Seesaaアド-2

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

.ad-middle {
    margin-top: -65px;
    margin-bottom: -65px;
}

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

さて、冒頭でも書いたように後はスマートフォンページへの広告設置が必要になるので、それは次の記事で紹介します。
Seesaaブログのスマートフォンページに広告を設置する方法【新システム】

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

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

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

Seesaaブログの記事下やサイドバーに広告を設置する方法【新システム】”に10件のコメントがあります。

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

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

  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様

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