Seesaaブログに広告を横並び(ダブルレクタングル)で設置する方法

Seesaaブログに広告を横並び(ダブルレクタングル)で設置する方法Seesaaブログアフィリエイトとカスタマイズ

今回はSeesaaブログにダブルレクタングル、つまり2つの画像やバナー(画像広告)を横並びに設置する方法を解説します。よく色々なサイトを見て回ると記事下に2つの画像広告が横並びになっているサイトをよく見かけますよね。

Seesaaブログに広告を横並び(ダブルレクタングル)で設置する方法-1

これはブログに広告を貼る時に結構応用ができる場面が多いので覚えておきましょう。

横幅の確認と前準備

横並びにするのは広告でも画像でも大丈夫です。

まずはバナー(画像広告)を2つ横並びにするので、それに合わせたブログの幅を変更しておく必要があります。

例えば横幅300pxの画像を横並びにするのであれば最低でも300×2=600pxに加えて2つの広告の間のスペースが必要になります。

余裕を持たせた幅に変更しておくとスムーズにいきますし、サイズが足りないと横並びにはならないので注意。先に横幅は変更しておきましょう。

Seesaaブログの幅を変更する方法

ダブルレクタングルで広告を挿入する方法

通常広告の横並びは記事下に設置するので、サンプルとして記事下に2つ並べてみようかと思います。

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

SeesaaブログHTMLの編集

記事下のソーシャルボタンの上に広告を設置したいのでHTMLの中から次のコードを探します。初期状態のままなら97行目付近です。

<% if:blog.bookmark_service -%>

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

アドセンス広告の場合

アドセンス広告の場合はラベル(スポンサーリンク)の表記が必要になりますので、次のコードを入れます。

<% if:page_name eq 'article' -%>
<p class="ad-label">スポンサーリンク</p>
<div class="ad-bottom-main">
<div class="ad-bottom-left">
広告のコード(左)
</div>
<div class="ad-bottom-right">
広告のコード(右)
</div>
</div>
<% /if %>

アドセンス以外の広告の場合

アドセンス以外の広告の場合にはラベル(スポサーリンク)は必要ないのでこちらのコード。

<% if:page_name eq 'article' -%>
<div class="ad-bottom-main">
<div class="ad-bottom-left">
広告のコード(左)
</div>
<div class="ad-bottom-right">
広告のコード(右)
</div>
</div>
<% /if %>

コードの解説としては条件分岐タグ「if:page_name eq ‘article」で「個別記事なら」以下を表示するという条件分岐をしてます。この条件分岐を書かないと「トップページ」や「カテゴリーページ」の記事一覧ページで、各記事毎に広告が表示されてしまいます。

上記のコードを追加したら保存します。

スタイルシートで横並びにする

ここまでで一応2つの広告は表示されますが、縦並びになっているので、これをスタイルシート(css)の編集で横並びにしていきます。

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

/* 横並び広告全体部分 */
.ad-bottom-main {
  margin-top:20px;  /* 上に余白 */
  margin-bottom:20px;  /* 下に余白(下のコンテンツとの距離) */
}
 
/* 広告左 */
.ad-bottom-left{
     float:left;  /* 広告を左寄せ */
     margin-right:10px;  /* 右に余白(2つの広告の間の余白) */
}
  
/* 広告右 */
.ad-bottom-right{
     float:left;  /* これも広告の左寄せ */
}
 
/* 最後に左寄せを解除するための記述 */
.ad-bottom-main:after {
  content:"";
  display:block;
  clear:both;
}

後はこれを保存してブログを表示させて確認してみて下さい。一応「Ctrl」と「F5」を一緒に押してリロードしてから確認して下さい。

アドセンスの場合はスタイルシートに次のコードも追加してラベル(スポンサーリンク)表記を中央寄せにしておくといいかも。

p.ad-label {
    text-align: center;
}

これでもしラベルが中央にこない場合には「text-align:center;」の代わりに「margin-left:●●px;」をいれて数値で調整します。左に数値分の余白を入れる事ができます。

以上Seesaaブログに広告を横並び(ダブルレクタングル)で設置する方法でした。

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

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

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

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

コメント

  1. しげぞう より:

    記事内で紹介しているコードから条件分岐の部分(if~の部分)を抜いたら普通に記事中でも使えます。

    スポンサーリンク

    広告のコード(左)
    広告のコード(右)

    ただ、Seesaaブログの場合は記事中のEnterが改行として扱われるかも?なので、広告の上下にスペースができるかも?です。その場合はコードの改行を全部なくしてコードの部分を全部一列に並べるとよいと思います。

    ↓こんな感じ。

    スポンサーリンク

    広告のコード(左)
    広告のコード(右)

    また、広告が横並びにならない場合は横幅が狭い可能性もあります。

  2. ガンバルンバ より:

    お世話になります、いつも参考にさせてもらってます。
    シーサーブログで記事中にアドセンス広告を横並びに表示させることは可能でしょうか?
    記事に直接任意の場所に貼り付けたいんですが、そんなことは可能なんでしょうか?
    どうぞよろしくお願いいたします。

  3. さーもん より:

    しげぞう様
    いつも本当に早いお返事ありがとうございます。
    ご指摘の通りしてみましたら、広告が縦に表示されてしまいました。
    数値を変更していくことで、理想の幅に設定することができました!

    全体1200px
    メイン800px
    サイド300px
    メインとサイドの幅40px
    としました。
    しげぞう先生、いつもありがとうございます。本当に助かります。

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