Mature 1.1.8.6 レクタングル広告の横並びが縦並びに表示

[香川]

テーマ：Mature 1.1.8.6
サーバ：エックスサーバー
参照サイト
→
→

お世話になります。

上記、参照サイト１、２のメインコンテンツエリア下部、記事エントリーの最後に300×250のレクタングル広告を横並びに2個設定しています。

参考にしたのは、

サイト１，２共に、オリジナルスタイルシートの内容、プラグインなどは同じ設定です。
ウィジェットのテキストに書き込んでいるのは下記の通りです。

<div class=”clearfix”>
<div class=”fl-l mg20px-r”>
<!–ここから1つ目の広告–>
<script type=”**************”></script>
<!–ここまで1つ目の広告–>
</div>

<div>
<!–ここから2つ目の広告–>
<script src=”**************”></script>
<!–ここまで2つ目の広告–>
</div>
</div>

サイト１では横並び2個になるのですが、サイト２では左側に縦2個で表示されてしまいます。

ヴァージョンを1.1.8.6 にしたからではなく、その前からなのですが、
どのように設定すれば、キレイに横に並べることができるでしょうか？

ご回答よろしくお願いいたします。

[香川]

リンク先が未掲載になってしまい失礼しました。

サイト１：http://xn--78j2bxcxb.com/
サイト２：http://xn--eck8a4c4a1f3e8bjb.com/

参考にしたサイト：http://bit.ly/1vg9A05

[DigiPress サポート]

添付画像の通り、掲載コンテンツには 1ピクセル四方の画像が混入しています。
これはCSSで非表示(display:none など)にしておいてください。

また、Matureテーマでは記事内の画像には枠用の装飾として4pxの余白(padding)と1pxのボーダー(border)が付きます。
つまり記事内に 300px幅の画像がある場合は、実際の表示幅は 310pxになります。

これら2つが原因で該当のCSSを指定しても表示幅を超えるため、回り込みができていません。

掲載されている広告自体に画像が含まれるため、掲載される広告の画像にはCSSで padding と border を 0 にしてください。

テーマ自体に関する要件ではないため、詳細のサポートは致しかねますが、広告タグの画像に専用のclassを付与し、「オリジナルスタイルシート設定」にその class(セレクタ)について

padding:0;
border:0;

を指定したCSSを追加するか、広告内の img タグに style 属性にて上記のCSSをインラインにて直接指定するなどしてください。

[DigiPress サポート]

添付が抜けておりました。

添付ファイル:

添付ファイルを開くにはログインしてください。

[香川]

お世話になります。
ご案内いただいた内容で作業をしてみましたが、
オリジナルスタイルシート設定に間違ったCSSを記載してしまったようで、
記載内容を削除しても、記事頁のレイアウトが崩れてしまいました。

サポート対象となるのか分かりませんが、
元の基本レイアウトに戻す方法があればお知らせください。

参照サイト：http://bit.ly/1ttuNmQ

大変申し訳ありませんが、よろしくお願いいたします。

[DigiPress サポート]

CSSの問題ではなく恐らくHTMLタグのとじ忘れによってレイアウトが崩れています。

掲載している広告のタグに手を加えた場合は、HTMLタグが不正な状態になっていないか再度よく見なおしてください。

トラブルシューティング

[香川]

お世話になっております。
ご指摘の通り、ウィジェットに設定した広告タグに余計な </div> の記載がありました。
削除したところ、表示の崩れは直りました。

テーマ自体とは別でこちらの単純ミスの話でしたが、返信いただきありがとうございました。

本題のレクタングルは縦並びではなく横並びにはなりましたが、高さにずれが生じています。
返信いただいた内容にそって作業してみたいと思います。

ありがとうございます。

[投稿者]

投稿