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と置き換えて下さい。

注意点

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

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

仮想通貨取引所・販売所の関連記事

仮想通貨が気になっている方は、早めにZaifbitFlyerのアカウントを作成することをオススメします。

理由は、登録してから実際に使えるようになるまでに時間がかかるから。

作成方法は別記事で解説しているので、そちらを参考にしてください。

スポンサーリンク

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