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. しげぞう より:

    匿名様

    コメントありがとうございます。連休中でも大丈夫です!お気遣いありがとうございます。

    アドセンスの横並びですが、私の方が一部コードを間違ってました!本当にすみません!スタイルシートの部分はそのままでOKですが、HTMLのアドセンスの設置コードは以下に変更して下さい。

    <% 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 %>

    記事の方も修正しておきました、お手数かけて本当に申し訳ないです、すみません!これで設置してみて横並びにならない場合にはもう一度コメント頂けると助かります。どうぞよろしくお願い致します。

  2. 匿名 より:

    しげぞう 様
    連休中なのにごめんなさい!
    私のブログ恥ずかしいのですが
    まだ、始めて3週間位のブログです
          

    トップページには、サイド広告のみで
    記事内の下に広告2個縦並びになっています
    尚、右サイドにも一個広告を付けています
    宜しくお願いします。

  3. しげぞう より:

    かっこじい様

    返信ありがとうございます!気になってたので結局連休中に返信です(笑)

    広告自体は表示できたようですので、後はブログの幅の問題かと思います。ブログの幅を変更する記事ではサンプルでの幅ですので、この数値はもう少し広めにしておくべきかと思います。

    メインコンテンツ部分が520pxというのは広告を横並びにするには狭い気がしますが、画像が小さめという事なのでちょっと見てみないと何とも言えません。もし良かったら一度ブログのURLを教えて頂けると助かります。ブログを見れば大体の原因は分かるかと思いますし、コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  4. かっこじい より:

    しげぞう様
    連休中に申し訳ありません
    早速のご回答ありがとうございます!
    広告2個の表示出来ました!
    しかし、縦並びになったまま、
    横並びになってくれません。
    幅の変更も説明通りの値にしました。
    l-wrapper {
    width: 860px; /* 全体の幅 */
    }
    .main {
    width: 520px; /* メインコンテンツの幅 */
    }
    .side {
    width: 300px; /* サイドバーの幅 */
    }
    .side–left {
    float: left;
    margin-right: 40px;

    私のブログデザインは2カラムで
    画像は小さめです。
    連休終了後、ご指導をお願いします。

  5. しげぞう より:

    かっこじい様

    コメントありがとうございます!ちょっとコメントのコード?の部分が一部表示されなかったので推測での回答です。すみません。

    まず広告が1つも表示されないというのが気になります。確認のポイントですが、まず広告を設置するコード自体はHTML編集へ追加です。

    HTMLの中から次のコードを探します。97行目付近かなと思います。SNSボタンなどを表示させるコードが以下です。

    <% if:blog.bookmark_service -%>

    一度これの前にテキストで構いませんので、「テストテキスト」などとテキストを入れて保存して確認をしてみると良いと思います。アドセンスのコードではなくて、テキストを追加してみて、SNSボタンの上にそのテキストが表示されるかテストする感じですね。

    保存したらブログを表示させて「Ctrl」と「F5」を一緒に押してリロードします。それで入力したテキスト「テストテキスト」が表示されるか確認をしてみて下さい。

    もしこれでテキストが表示されているのであれば再度HTMLの編集で「テストテキスト」という部分をアドセンス設置用のコードに入れ替えて保存して下さい。

    まずは上記で試してみて表示されない場合には再度コメント下さい。返信は連休明けになってしまうと思いますが(すみません!)、連休明けにできるだけ早く返信しますのでどうぞよろしくお願い致します。

  6. かっこじい より:

    しげぞう様
    はじめまして!
    Seesaaブログ記事下に、アドセンス広告を2個横並びにしたい為、
    しげぞうさんの方法をしてみてるのですが、うまく出来ません!
    質問ですが、
     このコードの「直前」に画像や広告コードを入れます。との事ですが、「直前」と言うのは、の後コード追加するのか、前にコード追加するのか?
    両方試してみましたが、プレビューで広告が一つも出ません!
    お願いします。

  7. しげぞう より:

    fuku様

    コメントありがとうございます。スマホ版のアドセンス表示ですが、私のブログで確認したのですが、スマホ版の表示ではHTMLに組み込んだ記事下のアドセンスは表示されませんので、1ビューの規約はOKだと思います。

    ただ、fuku様の言われるようにPC版を見るで切り替えた場合には表示されます。ただ、これはPC版なので、アドセンスの規約的にどうなのか私もよく分かりません。一応問い合わせをしてみて再度返信させて頂きますので、しばらくお待ち下さいませ。それとhuku様のブログはスマホ版をリダイレクトしてPC版と同じHTMLという事なので、この場合はスマホで表示してもアドセンスは表示されるかもしれません。私の場合はそのままのスマホ版を利用してますので、これはちょっと分かりません。すみません。

    どのような方法でリダイレクトされているかによりますが、アドセンス以外の広告を利用して設置してみてスマホで自分のブログを確認してみる事をおすすめします。

  8. fuku より:

    しげぞう様

    いつも記事を参考にしています。fukuです。
    返信が遅れまして申し訳ございません。

    スマホ版を表示し、「PC版を見る」をクリックした際に表示される画面にも
    アドセンスが表示されない、ということでしょうか?

  9. しげぞう より:

    fuku様

    コメントありがとうございます。Seesaaブログの場合はpc版とスマホ版でhtmlが違います。そのため、HTMLの編集で記事下に広告を入れてもスマホでは表示はされないと思います。なのでPC版では2つ記事下の広告が表示されますが、スマホでは1つも表示されないはずです。なのでスマホ版にはまた別に広告を設置する手順が必要になります。

    但し、HTMLの編集ではなく記事中など「記事の投稿」で入れている広告はスマートフォンでも表示されます。

    今回のやり方の場合はPC版のHTMLを編集していますので、これがスマートフォンで反映はされないと思いますが、もし確認してみて表示されるようであれば再度コメント頂けると助かります。どうぞよろしくお願い致します。

  10. fuku より:

    しげぞう様

    いつも記事を参考にさせていただいております。fukuと申します。

    シーサーブログにアドセンスをダブルレクタングルで挿入することに関する質問です。
    シーサーブログをスマホからPC表示で見たとき、記事下のアドセンスはどのように表示されるのでしょうか。
    新システムのシーサーブログのテンプレートはレスポンシブデザインのものも多くありますが、スマホから見たときアドセンスが縦に2つ並びになるのでしょうか?その場合規約違反に抵触するのではないかと心配しております。

    アドセンスに関する知識があまり無いので見当違いな質問かもしれませんが、ご回答をよろしくお願いします。

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