シーサーブログの記事下やサイドバーに広告を設置する方法

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

今回はシーサーブログに広告を貼り付ける方法を紹介していきます。忍者admaxなどの設置も同じ手順でOKです。

設置自体は簡単ですが、PC用とスマートフォン用で設置が違うのでそれぞれ設置が必要です。特に最近はスマートフォンでの閲覧するユーザーが多いのでその辺も考えながら設置していきますが、幾つか注意事項もあるのでその都度説明していきます。

それとGoogleアドセンス広告の場合はやり方がちょっと違うのでアドセンス広告を貼り付けたい場合はこの記事を参考に。
シーサーブログにGoogleアドセンスを設置する方法

サイドバーに貼る場合は事前にブログの幅、サイドバーの幅も変更して広告に合わせた幅にしておく事をおすすめします。おすすめのサイドバーのサイズとしては300pxくらいあればOKです。
ブログのコンテンツやサイドバーの幅を変更するカスタマイズ

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

まずはサイドバーに広告を設置する方法を紹介します。シーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進みます。

見出しタグ-6

コンテンツ一覧画面の左側の「コンテンツ」という部分の「+」の部分をクリック。

アドセンス-1

開いたメニューの中から「自由形式」というのをドラッグ&ドロップでサイドバーに追加。

アドセンス-2

追加できたらこの「自由形式」をクリックして内容の部分をこのように書きます。

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

この「div class=”admax-side”」という部分だが、広告部分に「admax-side」というクラス名を付けておきます。このクラス名は別になくてもいいのですが、後からCSSで位置調整をしたりするときに便利なので。こんな感じになると思います。

admax-ad-2

中央寄せにしたり、上下に余白の設定は後でCSSで調整するので、とりあえずここまでできたら保存して「自由形式」の画面を閉じ、コンテンツ一覧の画面に戻るのでここでも「保存」をクリックして変更を保存。

グローバルナビ

これでサイドバーに広告が表示されます。表示されない場合はリロード(F5を押す)か、時間が経ってからもう一度確認するかやり直してみて下さい。

位置調整

サイドバーに広告が表示されているのを確認したらデザイン設定で位置を調整していきます。シーサーブログの管理画面から「デザイン」⇒「デザイン設定」⇒「自分(適応中)のテンプレート」をクリックしてCSSの一番下に次のコードを追加しておきます。

.admax-side {
text-align : center;   /* 広告をセンターに */ 
margin-top : 10px;     /* 広告の上に余白 */ 
margin-bottom : 10px;  /* 広告の下に余白 */ 
}

これで広告の上下に余白ができます。さらにこの数値を大きくすると広告の上下にもっと余白ができるので調整してみましょう。これでサイドバーの設定は完了。

記事下に広告を設置する

今度は記事下にもadmax広告を設置していきます。先ほどと同じようにシーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進み「記事」をクリック。

見出しタグ-7

「記事」をクリックして「コンテンツHTML編集」をクリックします。

見出しタグ-8

HTMLが書いてある画面になるので「Ctrl」キーを押しながらアルファベットの「F」を押して検索窓を出現させ、<% if:blog.bookmark_service %>という部分(ソーシャルボタンのコード)を検索してみます。するとこのようなコードがあります。

<% if:blog.bookmark_service %>
<div class="bookmark" data-url="<% article.page_url %>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip | html %>"></div>
<% /if %>

設置する場所はソーシャルボタンの下に付けたいので、先ほどのコードの下に次のコードを追加。

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

ここのスペースにはサイドバー同様にクラス名を付けておくと便利。

今回は記事下なので、「admax-bottom」という名前を付けておきました。サイドバーとは違う名前を付けておくとサイドバーの広告位置調整と別に調整できるので便利です。

この部分を解説しておくとこれは<% if:page_name eq ‘article’ -%>で個別記事なら広告を表示させる設定にしています。

トップページでも表示させる事は可能ですが、トップページには複数の記事があり、広告の数が多くなってしまうので個別記事の記事下にのみ表示させるようにしているという訳です。

位置調整

広告の設置ができたら表示を確認したら、保存してCSSに次のコードを追加して位置調整をしていきます。

.admax-bottom {
text-align : center;   /* 広告をセンターに */ 
margin-top : 10px;     /* 広告の上に余白 */ 
margin-bottom : 10px;  /* 広告の下に余白 */ 
}

一応2箇所テンプレートに埋め込む形で広告の設置を解説しましたが、もっと広告を貼りたい場合は自由形式を増やして追加するか記事本文中に1つ1つ埋め込む方法もあるので試してみて下さい。

以上でPC版の広告設置は完了ですがこの状態ではスマートフォンには広告は表示されません。スマートフォンにはスマートフォン用の設置を別にする必要があります。

スマートフォンでの広告は結構クリック率が良いのでスマートフォンにも広告を設置する事を忘れないように。

次回シーサーブログのスマートフォン版に広告を設置する方法を解説していきます。
シーサーブログのスマートフォンページに広告を設置する方法

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

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

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

シーサーブログの記事下やサイドバーに広告を設置する方法”に3件のコメントがあります。

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

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

  1. しげぞう 投稿作成者

    かすたねっと様

    コメントありがとうございます。設置する広告はASPから探す事ができます。
    アフィリエイトのASPとは?
    ASPの比較と選び方

    もしくはクリック数に応じて報酬がもらえるアドセンスを利用しても良いと思いますが、サイトの審査やちょっと厳しめの規約もあります。
    Googleアドセンス申請から設置までのまとめ

    好きな広告を探して設置してみてください。また何か分からない部分があればコメント頂けると助かります。どうぞよろしくお願い致します。