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

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

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

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

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

横幅の確認と前準備

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

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

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

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

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

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

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

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

SeesaaブログHTMLの編集

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

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

アドセンス広告の場合

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

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

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

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

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

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

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

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

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

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

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

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

最終更新日:2018/05/17

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

コメントの反映には時間がかかる場合があります。

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

  1. さーもん

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

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

  2. しげぞう 投稿作成者

    さーもん様

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

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

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

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

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

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

  3. さーもん

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

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

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