Stinger6で画像がブロック要素になっていた為、WP Quicklatexの表示が崩れていた

ブログ運営

私は、ブログのテーマにSimplicity2を使っておりますが、試験的にStinger6を入れてみたところ画像の表示がおかしくなってしまいました(´-﹏-`;)

特に崩れたのが、数式画像を使っているアクチュアリー採用問題(ソニー生命の試験問題)のページ。ここは以下で紹介したとおり、WP-QuickLaTeXというプラグインを入れて、MathJaXというものを使っているページになります。

http://yutorinote.com/wp-quicklatex/

Stinger6に変更したところ、MathJaXの出力が以下の様な見た目になっていまいました。

Stinger6でWP QuickLatexを表示
Stinger6でWP QuickLatexを表示

TeXの数式が全て改行されてしまっており、見難いことこのうえありません。

デベロッパーツールで原因を探ってみたところ、Stinger6のstyle.css(48-54行目)のこの記述が悪さをしていました。

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

ここの6行目を見ると、どうやらStingerではimgタグをブロック要素として表示しているみたいです。

これを無効にすればうまくいくはずなので、子テーマのstyle.cssに以下を記述しました。

img.ql-img-inline-formula{
    display:inline-block;
}

WP QuickLaTeXでは、インライン数式モードの画像にql-img-inline-formulaクラスを指定していましたのでこのクラスにだけ適用させました。

結果、以下のように正しい出力に戻りました。

Stinger6でWP-QuickLaTeXがちゃんと出力されている
Stinger6でWP-QuickLaTeXがちゃんと出力されている

Stinger6も、まさか画像をこんな風に使っている変態人間がこの世にいるとは思っていなかったのでしょうね…w とはいえ、imgタグは元々インライン的に使えるものですから、WP QuickLaTeXの作者も、まさかimgタグがblockで指定されているとは思わなかったのでしょうね笑

Stinger6では何故あえてblockで指定してあるのでしょう??  とりあえず解決してよかったです。