本記事は、私がテーマ「Luxeritas」で文字のフォントサイズが不自然に大きくなるというトラブルに見舞われ、その対処法を見つけるまでの道のりです。
フォントが大きすぎるんですけど！
Luxeritasは、2016/11/18に出たばかりの国産無料テーマ（詳しくは別記事で書く予定です）。
国産無料テーマWPTHKの作者様が作ったものです。
今回ちょっと試してみたくなりインストールしたのですが……。
本来はこんな感じで表示されるはず。
しかしLuxeritasでは、
フキダシのフォントサイズがおかしくなったサイズを再現したもの。
推定24ptくらいでしょうか。
本文内の文字（14pt）と比較すると、おかしさが瞭然かと。
他のブラウザ（Microsoft Edge）でもスマートフォンでも同じでした。
何とかしようとカスタマイザーをいじっても、通常の数字より大きいまま反映されるだけ。
というわけで色々と検索してみました。
基準値が反映されていない？
行き着いたのが、こちらのページ
症状としては同じ感じなんだけど、私の環境ではChromeが原因というわけではない。
Microsoft Edgeでも同じなんですよね。
ただ理由は同じっぽいので、とりあえず書かれていた方法を試します。
body {
font-size: 1.4em;
}上のコードををCSSに入力……変わらない。
!importantを付けてみる……小さくなった！
原因自体は、rem指定した際に基準値が反映されていないということで合っているっぽい。
しかし全部が直ったわけでもないらしく、レイアウトが一部おかしい。
何より根本的な部分が!importantまで打ち込んで強制適用しないといけないっておかしくない？
参考サイトで紹介していたスクリプトで対処する方法でも変わらず。
というわけで、別の対処法を考えることにしました。
真の原因判明
プラグインを外してみる
トラブルが起きたら、有力な原因として考えるべきなのはプラグイン。
１つずつ外してはプレビューを確認する……
あっ！
原因は、プラグイン「VK All in One Expansion Unit」との相性
VK All in One Expansion Unitは色んな機能が大量に詰め込まれた統合型プラグイン。
テーマLightningを使うなら必須、そうでなくとも入れておけば色々と役立ちます。
しかしLuxeritasとの相性は悪かったようで、無効にしたら表示が直りました。
これは特定の機能が干渉して……というわけでもないようです。
VK All in One Expansion Unitの機能をBootstrap含めて全てオフにしましたが、フォントはおかしいまま。
つまり無効化しないと直りませんでした。
もっともLuxeritas自体が多機能な上にbootstrapまで積んでいる。
だったら自分で対処ができそう……ということで外すことにしました。
今のところ、他のテーマでは確認できていません。
VK All in One Expansion UnitはSimplicityで元々使っていたくらいなので。
個別テーマとプラグインの相性の問題としていいでしょう。
ただ他のテーマでも、あるいは別のプラグインとでも、類似の問題は発生しうるものと考えて記しておきました。
もちろん、私の環境だけである可能性も付記させていただきます。
まとめ
コメント