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ブログに広告を横並び(ダブルレクタングル)で設置する方法でした。

コメント

  1. しげぞう より:

    さーもん様

    コメントありがとうございます!幅の変更という部分ですが、使っているデザインによって若干違う部分がでるかもしれませんが、一般的な方法で回答しますので、そちらを試して見て下さい。

    まず、さーもん様のサイトですが、現在のサイトの幅が以下のようになっています。

    ・全体の幅:960px
    ・メインコンテンツの幅:640px
    ・サイドバーの幅:300px
    ・メインとサイドバーとの間の余白20px

    つまり、640+300+20=960pxという状態です。

    これのメインコンテンツの幅を700pxにするので、「メインコンテンツの幅」と、「全体の幅」を変更する必要があります。

    .l-content { width: 1020px;}
    .main { width: 700px;}
    .side { width: 300px;}

    こんな感じですね、この記述をCSSの一番下に追加して上手くいくか試してみてもらえますか?

  2. さーもん より:

    しげぞう様
    退院おめでとうございます。心配でした。

    結局解決には至らず、はじめから作り直すことにしました。
    目的は横幅336pxのアドセンスを横並びにすることです。
    他の記事を拝見しますと、最低でも672px必要ということでしたので、メインコンテンツの幅を700にしたいのですが、そうすると以前と同じくサイドのコンテンツがすべて最下部に移動してしまいます。

    はじめからやり直したので特に間違ったことはしていないと思うのですが、原因がつかめません。
    よろしくお願い致します。

  3. しげぞう より:

    さーもん様

    返信ありがとうございます。差分を確認できるようであれば差分の分が変更した分なのでその分を元に戻す作業です。どれくらいのミスなのかは分かりません。1つのズレで起こる物なのか、複数の原因でずれているのかは分かりませんので、差分を元に戻しながら確認していくしかないと思います。もしくはCSSやHTMLのバックアップも保存しているなら今のHTMLやCSSをメモしておいてから復元してみるのも有りかと思います。

    どうしても原因が分からない場合には最初からCSSやHTMLを書き直した方が早いかもしれません。

    横並びに関してはCSSの記述はありますが、HTMLの方の記述が横並びの物にはなっていないようです。ただ、横並びの前にサイドバーの部分を修正するのが先かなと思います。

  4. さーもん より:

    しげぞう様

    お返事ありがとうございます。
    横並びの作業をする前まで通常通りでしたので、横並びのコードを打つ作業中に何らかのミスで変更が起きたものだと思います。

    仰るとおり初期値との差分は確認できます。
    ここからどのように原因を探ればよろしいのでしょうか?
    よろしくお願い致します。

  5. しげぞう より:

    さーもん様

    コメントありがとうございます。元の状態がどのような感じだったのか分からないのですが、サイドバーが落ちているということはサイトの全体の幅、もしくはコンテンツ部分の幅もしくはサイドバーの幅が変更された、もしくは余白が変更された事が原因かなと推測してます。

    HTMLやCSSは編集画面で「差分」が確認できるようになっていると思いますので、それを元に修正できるのではないかと思います。

    また、このズレは最近の物ではないかもしれません。キャシュを確認してみても12月10日のキャッシュが残っているようですが、その時からこのような状態になっているようですので、原因が最近の編集部分ではないかもしれません。

    その辺の日付も修正の助けになるかもしれません。

  6. さーもん より:

    しげぞう様
    いつもお世話になっています。

    この記事を見て広告を横並びにチャレンジしている途中、何かコードを消してしまったそうで、サイドに表示していたコンテンツが最下部に移動してしまいました。

    ブログURLになります

    また、手順通りにやっても横並びにできませんでした。
    大変恐れ入りますが、最下部に移動してしまったコンテンツの直し方、また横並びにする方法をご教授いただけないでしょうか。
    お忙しい中恐縮ですが、よろしくお願い致します。

  7. しげぞう より:

    かっこじい様

    返信ありがとうございます!そして無事に反映されて私も嬉しいです。かっこじい様のコメントのおかげで記述ミスの記事も修正できましたので、私も助かりました!ありがとうございます。最初は分からない部分も多いと思いますし、私のブログでも説明不足の部分が多々あると思いますので、また何かあれば遠慮なくコメント下さい。今後ともどうぞよろしくお願い致します。

  8. かっこじい より:

    しげぞう様
    こんなに丁寧にご回答を
    またご指導を頂き、本当にありがとうございます!
    お蔭さまで、2個横並び成功致しました!
    本当に感激です!
    見て下さい!
      
    このような私の質問の為に、しげぞう様、いや、しげぞう先生!
    余計なお時間と労力を使わさせて、申し訳ありません。
    まだ超新米ですが、この広告並びを絶対無駄にしないよう、
    見せられるブログにして行きます。
    ありがとうございましたm(__)m
    //かっこじいより、いっぱいの感謝を込めて

  9. しげぞう より:

    かっこじい様

    返信ありがとうございます。URLを確認してみていくつか問題点がありましたので、1つ1つ解説してみます。

    1.ブログの幅が狭い

    ブログの幅の変更をされているのですが、このブログで紹介したサンプル通りの変更になってます。広告を2つ横並びにする場合には広告の横幅を考えて全体の幅やコンテンツの幅を変更する必要があります。現時点でかっこじい様のブログのコンテンツの幅が520pxです。設置されている1つ目のアドセンスの広告の横幅が336pxなので、これを2つ並べる場合には横幅が最低でも336×2=672px必要になります。520pxでは足りないため横並びにはなりません。

    2.アドセンス広告の幅がバラバラになっている。

    設置するアドセンスは同じサイズで設置が必要です。なので、横幅336pxの広告であれば1つコードを取得して同じコードを2回使ってもOKです。後で解決策を書きます。

    3.スタイルシートでの記述ミスが1箇所

    スタイルシートでの記述で「 } 」が1つ抜けている部分があります。これがちょっと影響している部分もあります。

    上記2点を解決するためにはまずブログの幅を広げる必要がありますが、かっこじい様のブログの場合は改行が多く、ブログの文章自体が横幅を使いきっていない感じなので、ブログの幅を広げると文章とサイドバーまでの距離が目立つ感じになります。それでも構わないという場合には一度ブログの幅を広げてみましょう。

    ■解決策

    えっとまず、スタイルシート(CSS)に記述したブログの幅の記述「.l-wrapper」とか「.main」とかの記述を一度全部削除して下さい。「.l-wrapper」以下の記述を一度全部削除でOKです。アドセンスの位置調整コードも再度追加しますので、とりあえずブログの幅を変更したコードとアドセンス位置調整のためのスタイルを全部削除です。

    削除できたら代わりに以下を追加して保存します。全体の幅とコンテンツの幅を変更するコードとアドセンスの横並びのコードが以下です。スタイルシートです。

    .l-wrapper {
      width: 1030px;  /* 全体の幅 */
      }
    .main {
      width: 690px;  /* メインコンテンツの幅 */
    }
    .side {
      width: 300px;  /* サイドバーの幅 */
    }
    .side--right {
      float: left;
      margin-left: 40px;  /* メインコンテンツとサイドバーの間の余白 */
    }
    /* 横並び広告全体部分 */
    .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;
    }

    追加できたら保存しておきます。

    次にアドセンスから横幅336×280pxというサイズの広告コードをコピーして、HTML編集のアドセンスのコードを設置する場所に貼り付け。2つとも同じコードでOKです。

    以上試してみて下さい。また途中分からない部分などあれば再度コメント下さい。

  10. かっこじい より:

    しげぞう様
    お手数おかけしてすみません!
    HTMLアドセンス設置コードを変更しましたが、
    やはり横並びになりません
    私の方に何か問題あるのか、、、
    こんな感じになっております
         

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