今回はSeesaaブログにダブルレクタングル、つまり２つの画像やバナー（画像広告）を横並びに設置する方法を解説します。よく色々なサイトを見て回ると記事下に２つの画像広告が横並びになっているサイトをよく見かけますよね。
これはブログに広告を貼る時に結構応用ができる場面が多いので覚えておきましょう。
横幅の確認と前準備
横並びにするのは広告でも画像でも大丈夫です。
まずはバナー（画像広告）を２つ横並びにするので、それに合わせたブログの幅を変更しておく必要があります。
例えば横幅300pxの画像を横並びにするのであれば最低でも300×2=600pxに加えて２つの広告の間のスペースが必要になります。
余裕を持たせた幅に変更しておくとスムーズにいきますし、サイズが足りないと横並びにはならないので注意。先に横幅は変更しておきましょう。
ダブルレクタングルで広告を挿入する方法
通常広告の横並びは記事下に設置するので、サンプルとして記事下に２つ並べてみようかと思います。
Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」をクリックして、今後は「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」で「個別記事なら」以下を表示するという条件分岐をしてます。この条件分岐を書かないと「トップページ」や「カテゴリーページ」の記事一覧ページで、各記事毎に広告が表示されてしまいます。
上記のコードを追加したら保存します。
スタイルシートで横並びにする
ここまでで一応２つの広告は表示されますが、縦並びになっているので、これをスタイルシート（css）の編集で横並びにしていきます。
スタイルシートの一番下に次のコードを追加。
/* 横並び広告全体部分 */
.ad-bottom-main {
margin-top:20px; /* 上に余白 */
margin-bottom:20px; /* 下に余白（下のコンテンツとの距離） */
}
/* 広告左 */
.ad-bottom-left{
float:left; /* 広告を左寄せ */
margin-right:10px; /* 右に余白（２つの広告の間の余白） */
}
/* 広告右 */
.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と無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
記事内で紹介しているコードから条件分岐の部分（if～の部分）を抜いたら普通に記事中でも使えます。
ただ、Seesaaブログの場合は記事中のEnterが改行として扱われるかも？なので、広告の上下にスペースができるかも？です。その場合はコードの改行を全部なくしてコードの部分を全部一列に並べるとよいと思います。
↓こんな感じ。
また、広告が横並びにならない場合は横幅が狭い可能性もあります。
お世話になります、いつも参考にさせてもらってます。
シーサーブログで記事中にアドセンス広告を横並びに表示させることは可能でしょうか？
記事に直接任意の場所に貼り付けたいんですが、そんなことは可能なんでしょうか？
どうぞよろしくお願いいたします。
しげぞう様
いつも本当に早いお返事ありがとうございます。
ご指摘の通りしてみましたら、広告が縦に表示されてしまいました。
数値を変更していくことで、理想の幅に設定することができました！
全体1200px
メイン800px
サイド300px
メインとサイドの幅40px
としました。
しげぞう先生、いつもありがとうございます。本当に助かります。
さーもん様
コメントありがとうございます！幅の変更という部分ですが、使っているデザインによって若干違う部分がでるかもしれませんが、一般的な方法で回答しますので、そちらを試して見て下さい。
まず、さーもん様のサイトですが、現在のサイトの幅が以下のようになっています。
・全体の幅：960px
・メインコンテンツの幅：640px
・サイドバーの幅：300px
・メインとサイドバーとの間の余白20px
つまり、640＋300＋20＝960pxという状態です。
これのメインコンテンツの幅を700pxにするので、「メインコンテンツの幅」と、「全体の幅」を変更する必要があります。
.l-content { width: 1020px;} .main { width: 700px;} .side { width: 300px;}こんな感じですね、この記述をCSSの一番下に追加して上手くいくか試してみてもらえますか？
しげぞう様
退院おめでとうございます。心配でした。
結局解決には至らず、はじめから作り直すことにしました。
目的は横幅336pxのアドセンスを横並びにすることです。
他の記事を拝見しますと、最低でも672px必要ということでしたので、メインコンテンツの幅を700にしたいのですが、そうすると以前と同じくサイドのコンテンツがすべて最下部に移動してしまいます。
はじめからやり直したので特に間違ったことはしていないと思うのですが、原因がつかめません。
よろしくお願い致します。
さーもん様
返信ありがとうございます。差分を確認できるようであれば差分の分が変更した分なのでその分を元に戻す作業です。どれくらいのミスなのかは分かりません。１つのズレで起こる物なのか、複数の原因でずれているのかは分かりませんので、差分を元に戻しながら確認していくしかないと思います。もしくはCSSやHTMLのバックアップも保存しているなら今のHTMLやCSSをメモしておいてから復元してみるのも有りかと思います。
どうしても原因が分からない場合には最初からCSSやHTMLを書き直した方が早いかもしれません。
横並びに関してはCSSの記述はありますが、HTMLの方の記述が横並びの物にはなっていないようです。ただ、横並びの前にサイドバーの部分を修正するのが先かなと思います。
しげぞう様
お返事ありがとうございます。
横並びの作業をする前まで通常通りでしたので、横並びのコードを打つ作業中に何らかのミスで変更が起きたものだと思います。
仰るとおり初期値との差分は確認できます。
ここからどのように原因を探ればよろしいのでしょうか？
よろしくお願い致します。
さーもん様
コメントありがとうございます。元の状態がどのような感じだったのか分からないのですが、サイドバーが落ちているということはサイトの全体の幅、もしくはコンテンツ部分の幅もしくはサイドバーの幅が変更された、もしくは余白が変更された事が原因かなと推測してます。
HTMLやCSSは編集画面で「差分」が確認できるようになっていると思いますので、それを元に修正できるのではないかと思います。
また、このズレは最近の物ではないかもしれません。キャシュを確認してみても12月10日のキャッシュが残っているようですが、その時からこのような状態になっているようですので、原因が最近の編集部分ではないかもしれません。
その辺の日付も修正の助けになるかもしれません。
しげぞう様
いつもお世話になっています。
この記事を見て広告を横並びにチャレンジしている途中、何かコードを消してしまったそうで、サイドに表示していたコンテンツが最下部に移動してしまいました。
ブログURLになります
また、手順通りにやっても横並びにできませんでした。
大変恐れ入りますが、最下部に移動してしまったコンテンツの直し方、また横並びにする方法をご教授いただけないでしょうか。
お忙しい中恐縮ですが、よろしくお願い致します。
かっこじい様
返信ありがとうございます！そして無事に反映されて私も嬉しいです。かっこじい様のコメントのおかげで記述ミスの記事も修正できましたので、私も助かりました！ありがとうございます。最初は分からない部分も多いと思いますし、私のブログでも説明不足の部分が多々あると思いますので、また何かあれば遠慮なくコメント下さい。今後ともどうぞよろしくお願い致します。
しげぞう様
こんなに丁寧にご回答を
またご指導を頂き、本当にありがとうございます！
お蔭さまで、２個横並び成功致しました！
本当に感激です！
見て下さい！
このような私の質問の為に、しげぞう様、いや、しげぞう先生！
余計なお時間と労力を使わさせて、申し訳ありません。
まだ超新米ですが、この広告並びを絶対無駄にしないよう、
見せられるブログにして行きます。
ありがとうございましたm(__)m
//かっこじいより、いっぱいの感謝を込めて
かっこじい様
返信ありがとうございます。URLを確認してみていくつか問題点がありましたので、１つ１つ解説してみます。
１．ブログの幅が狭い
ブログの幅の変更をされているのですが、このブログで紹介したサンプル通りの変更になってます。広告を２つ横並びにする場合には広告の横幅を考えて全体の幅やコンテンツの幅を変更する必要があります。現時点でかっこじい様のブログのコンテンツの幅が520pxです。設置されている1つ目のアドセンスの広告の横幅が336pxなので、これを２つ並べる場合には横幅が最低でも336×2＝672px必要になります。520pxでは足りないため横並びにはなりません。
２．アドセンス広告の幅がバラバラになっている。
設置するアドセンスは同じサイズで設置が必要です。なので、横幅336pxの広告であれば１つコードを取得して同じコードを2回使ってもOKです。後で解決策を書きます。
３．スタイルシートでの記述ミスが１箇所
スタイルシートでの記述で「 } 」が１つ抜けている部分があります。これがちょっと影響している部分もあります。
上記２点を解決するためにはまずブログの幅を広げる必要がありますが、かっこじい様のブログの場合は改行が多く、ブログの文章自体が横幅を使いきっていない感じなので、ブログの幅を広げると文章とサイドバーまでの距離が目立つ感じになります。それでも構わないという場合には一度ブログの幅を広げてみましょう。
■解決策
えっとまず、スタイルシート（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; /* 右に余白（２つの広告の間の余白） */ } /* 広告右 */ .ad-bottom-right{ float:left; /* これも広告の左寄せ */ } /* 最後に左寄せを解除するための記述 */ .ad-bottom-main:after { content:""; display:block; clear:both; }追加できたら保存しておきます。
次にアドセンスから横幅336×280pxというサイズの広告コードをコピーして、HTML編集のアドセンスのコードを設置する場所に貼り付け。２つとも同じコードでOKです。
以上試してみて下さい。また途中分からない部分などあれば再度コメント下さい。
しげぞう様
お手数おかけしてすみません！
HTMLアドセンス設置コードを変更しましたが、
やはり横並びになりません
私の方に何か問題あるのか、、、
こんな感じになっております
匿名様
コメントありがとうございます。連休中でも大丈夫です！お気遣いありがとうございます。
アドセンスの横並びですが、私の方が一部コードを間違ってました！本当にすみません！スタイルシートの部分はそのままでOKですが、HTMLのアドセンスの設置コードは以下に変更して下さい。
記事の方も修正しておきました、お手数かけて本当に申し訳ないです、すみません！これで設置してみて横並びにならない場合にはもう一度コメント頂けると助かります。どうぞよろしくお願い致します。
しげぞう 様
連休中なのにごめんなさい！
私のブログ恥ずかしいのですが
まだ、始めて3週間位のブログです
トップページには、サイド広告のみで
記事内の下に広告2個縦並びになっています
尚、右サイドにも一個広告を付けています
宜しくお願いします。
かっこじい様
返信ありがとうございます！気になってたので結局連休中に返信です（笑）
広告自体は表示できたようですので、後はブログの幅の問題かと思います。ブログの幅を変更する記事ではサンプルでの幅ですので、この数値はもう少し広めにしておくべきかと思います。
メインコンテンツ部分が520pxというのは広告を横並びにするには狭い気がしますが、画像が小さめという事なのでちょっと見てみないと何とも言えません。もし良かったら一度ブログのURLを教えて頂けると助かります。ブログを見れば大体の原因は分かるかと思いますし、コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。
しげぞう様
連休中に申し訳ありません
早速のご回答ありがとうございます！
広告２個の表示出来ました！
しかし、縦並びになったまま、
横並びになってくれません。
幅の変更も説明通りの値にしました。
l-wrapper {
width: 860px; /* 全体の幅 */
}
.main {
width: 520px; /* メインコンテンツの幅 */
}
.side {
width: 300px; /* サイドバーの幅 */
}
.side–left {
float: left;
margin-right: 40px;
私のブログデザインは２カラムで
画像は小さめです。
連休終了後、ご指導をお願いします。
かっこじい様
コメントありがとうございます！ちょっとコメントのコード？の部分が一部表示されなかったので推測での回答です。すみません。
まず広告が１つも表示されないというのが気になります。確認のポイントですが、まず広告を設置するコード自体はHTML編集へ追加です。
HTMLの中から次のコードを探します。97行目付近かなと思います。SNSボタンなどを表示させるコードが以下です。
一度これの前にテキストで構いませんので、「テストテキスト」などとテキストを入れて保存して確認をしてみると良いと思います。アドセンスのコードではなくて、テキストを追加してみて、SNSボタンの上にそのテキストが表示されるかテストする感じですね。
保存したらブログを表示させて「Ctrl」と「F5」を一緒に押してリロードします。それで入力したテキスト「テストテキスト」が表示されるか確認をしてみて下さい。
もしこれでテキストが表示されているのであれば再度HTMLの編集で「テストテキスト」という部分をアドセンス設置用のコードに入れ替えて保存して下さい。
まずは上記で試してみて表示されない場合には再度コメント下さい。返信は連休明けになってしまうと思いますが（すみません！）、連休明けにできるだけ早く返信しますのでどうぞよろしくお願い致します。
しげぞう様
はじめまして！
Seesaaブログ記事下に、アドセンス広告を２個横並びにしたい為、
しげぞうさんの方法をしてみてるのですが、うまく出来ません！
質問ですが、
このコードの「直前」に画像や広告コードを入れます。との事ですが、「直前」と言うのは、の後コード追加するのか、前にコード追加するのか？
両方試してみましたが、プレビューで広告が一つも出ません！
お願いします。
fuku様
コメントありがとうございます。スマホ版のアドセンス表示ですが、私のブログで確認したのですが、スマホ版の表示ではHTMLに組み込んだ記事下のアドセンスは表示されませんので、1ビューの規約はOKだと思います。
ただ、fuku様の言われるようにPC版を見るで切り替えた場合には表示されます。ただ、これはPC版なので、アドセンスの規約的にどうなのか私もよく分かりません。一応問い合わせをしてみて再度返信させて頂きますので、しばらくお待ち下さいませ。それとhuku様のブログはスマホ版をリダイレクトしてPC版と同じHTMLという事なので、この場合はスマホで表示してもアドセンスは表示されるかもしれません。私の場合はそのままのスマホ版を利用してますので、これはちょっと分かりません。すみません。
どのような方法でリダイレクトされているかによりますが、アドセンス以外の広告を利用して設置してみてスマホで自分のブログを確認してみる事をおすすめします。
しげぞう様
いつも記事を参考にしています。fukuです。
返信が遅れまして申し訳ございません。
スマホ版を表示し、「PC版を見る」をクリックした際に表示される画面にも
アドセンスが表示されない、ということでしょうか？
fuku様
コメントありがとうございます。Seesaaブログの場合はpc版とスマホ版でhtmlが違います。そのため、HTMLの編集で記事下に広告を入れてもスマホでは表示はされないと思います。なのでPC版では２つ記事下の広告が表示されますが、スマホでは１つも表示されないはずです。なのでスマホ版にはまた別に広告を設置する手順が必要になります。
但し、HTMLの編集ではなく記事中など「記事の投稿」で入れている広告はスマートフォンでも表示されます。
今回のやり方の場合はPC版のHTMLを編集していますので、これがスマートフォンで反映はされないと思いますが、もし確認してみて表示されるようであれば再度コメント頂けると助かります。どうぞよろしくお願い致します。
しげぞう様
いつも記事を参考にさせていただいております。fukuと申します。
シーサーブログにアドセンスをダブルレクタングルで挿入することに関する質問です。
シーサーブログをスマホからPC表示で見たとき、記事下のアドセンスはどのように表示されるのでしょうか。
新システムのシーサーブログのテンプレートはレスポンシブデザインのものも多くありますが、スマホから見たときアドセンスが縦に2つ並びになるのでしょうか？その場合規約違反に抵触するのではないかと心配しております。
アドセンスに関する知識があまり無いので見当違いな質問かもしれませんが、ご回答をよろしくお願いします。