Xeory Baseで広告を並列表示できない場合の対処法

  • このエントリーをはてなブックマークに追加

最近、ダブルレクタングルという手法を知り、
Xeory Base:記事下にアドセンスを横並び(ダブルレレクタングル)にするカスタマイズ
というサイトを参考に、広告を貼り付けてみましたが、
何度試しても縦の表示になってしまいます。

色々と試行錯誤した結果、デフォルトのXeory Baseだとダブルレクタングルができないようです。

とはいえ、最終的にはダブルレクタングルできたので、
どのように対処したか、記載しておきます。


なぜ配置できなかったか

サイドバーを利用しているページだと、広告を並列に表示させるための
幅(左右の余白)が足りていないことが原因です。
左右の余白というのは、以下の画像の赤枠で囲った部分です。

僕の実際の記事投稿ページです。

対処法

縦に2個配置された広告を、並列に表示させるよう設定する際に、
以下のコードを「style.css」に追記する手順があるかと思います。

/* スポンサードリンクというラベルの部分 */
.ad-bottom-label {
text-align:center; /* ラベルを中央寄せ */
margin-top:15px; /* 上に余白 */
}
/* 横並び広告全体部分 */
.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;
}

この”広告左”と記載されている下の「margin-right:10px」の“10px”を”4px”に書き換えます。
僕の場合は4px以上にするとアウト(縦に2個表示されたまま)でした。

応急処置っぽいですが、これでダブルレクタングルができます。
(現在、左右の余白を調整する技術が僕にないため、このような内容になってしまいました。)

Xeory Baseでの左右の余白を調整する方法は、
自分で調整できるようになった際に書きたいと思います。

  • このエントリーをはてなブックマークに追加




コメントを残す

*