Stinger5でリストが崩れる時の対処法

Stinger5でリストが崩れた様子

先日、WordPressのテーマをSTINGER5に変えたところ、盛大にリストが崩れる現象に遭遇しました。(上記画像)

Firefoxの開発ツール(要素を調査)で調べてみたら原因が分かったので、Stinger5でリストが崩れる時の対処法を紹介します。

Stinger5でリストが正常に表示された様子
上記画像は修正後の様子。

スポンサーリンク

発生条件

リスト(ul li,ol li)内に画像(img)があり、ブラウザがIE,Firefoxの場合。(Chromeでは正常)

リスト内にimgが無いテキストリンクは、正常に表示されます。

私の場合は、PC関連ショップのアフィリエイトリンク(テキストリンク)で遭遇。
どうやらバリューコマースのリンクと相性が悪かったようです。

テキストリンクなのに何故?と思うかもしれませんが、アフィリエイトリンクには計測用のimgが含まれていたりします。

原因

stinger5ver20141227>style.cssの40~46行目。
原因はその中のdisplay: block;部分。

img, video, object {
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: bottom;
	display: block;
}

対処法

下記コードをstyle.cssに追加します。

section li img{display:inline;}

.post li img{display:inline;}でも直ります。
ただ、指定範囲が狭い方が他に影響が出にくいので、今回は不採用としました。

補足

今回の対処法は、本文中のリストにのみ適用されます。

他の場所に適用させたい場合は、該当するidやclass等を探して、上のコードのsectionと置き換えて下さい。

注意点

キャッシュ系プラグインを使っている場合は、すぐに反映されない場合があります。

そういう時は、一度キャッシュを削除して、ブラウザの再読込を行って下さい。

Stinger5でリストが崩れた様子

お役に立ったら、シェアをお願いします

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)