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

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

ダブルレクタングル-1

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

スポンサーリンク

横幅の確認と前準備

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

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

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

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

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

通常広告の横並びは記事下に設置するので、まずは記事下の場所を探していきましょう。

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

新デザインパンくず-2

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;」をいれて数値で調整します。左に数値分の余白を入れる事ができますよ。

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

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

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

Seesaaブログに広告を横並び(ダブルレクタングル)で設置する方法”に21件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. さーもん

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

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