KUSANAGI MAGAZINEで「きもおたわーどぷれす。」が紹介されました! クリックで公式サイトが開きます。

フォントサイズが大きくなる問題と対処法 ~テーマとプラグインの相性

この記事は約3分で読めます。
記事内に広告が含まれています。

本記事は、私がテーマ「Luxeritas」で文字のフォントサイズが不自然に大きくなるというトラブルに見舞われ、その対処法を見つけるまでの道のりです。

スポンサーリンク

フォントが大きすぎるんですけど!

Luxeritasは、2016/11/18に出たばかりの国産無料テーマ(詳しくは別記事で書く予定です)。

Luxeritas Theme | SEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料の WordPress テーマ
Luxeritas はSEO最適化済み、レスポンシブデザイン、高カスタマイズ性にも関わらず、Webページを高速に表示するための仕組みを満載した、無料の Word...

国産無料テーマWPTHKの作者様が作ったものです。
今回ちょっと試してみたくなりインストールしたのですが……。

本来はこんな感じで表示されるはず。

通常表示されるはずのフォントサイズ

 

しかしLuxeritasでは、

トラブルにより、不自然に大きくなったフォント

この字の大きさは何!

フキダシのフォントサイズがおかしくなったサイズを再現したもの。
推定24ptくらいでしょうか。
本文内の文字(14pt)と比較すると、おかしさが瞭然かと。
他のブラウザ(Microsoft Edge)でもスマートフォンでも同じでした。

何とかしようとカスタマイザーをいじっても、通常の数字より大きいまま反映されるだけ。
というわけで色々と検索してみました。

スポンサーリンク

基準値が反映されていない?

行き着いたのが、こちらのページ

Chromeでfont-sizeにremを使った時に、フォントサイズが大きくなる問題 - Web関連あれこれ
「rem」は、CSS3のfon-size 単位。 親要素に継承されず、ルート(html)からの相対サイズが指定出来るので、 とても便利なのですが、Chromeで...

症状としては同じ感じなんだけど、私の環境ではChromeが原因というわけではない。
Microsoft Edgeでも同じなんですよね。
ただ理由は同じっぽいので、とりあえず書かれていた方法を試します。

body {
font-size: 1.4em;
}

上のコードををCSSに入力……変わらない。
!importantを付けてみる……小さくなった!

原因自体は、rem指定した際に基準値が反映されていないということで合っているっぽい。
しかし全部が直ったわけでもないらしく、レイアウトが一部おかしい。
何より根本的な部分が!importantまで打ち込んで強制適用しないといけないっておかしくない?

参考サイトで紹介していたスクリプトで対処する方法でも変わらず。
というわけで、別の対処法を考えることにしました。

スポンサーリンク

真の原因判明

プラグインを外してみる

トラブルが起きたら、有力な原因として考えるべきなのはプラグイン。
1つずつ外してはプレビューを確認する……
あっ!

表示がきれいになった!

原因は、プラグイン「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で元々使っていたくらいなので。
個別テーマとプラグインの相性の問題としていいでしょう。
ただ他のテーマでも、あるいは別のプラグインとでも、類似の問題は発生しうるものと考えて記しておきました。

もちろん、私の環境だけである可能性も付記させていただきます。

スポンサーリンク

まとめ

テーマのサイト表示がおかしかったらプラグインとの相性も疑ってみてね

サイトを始めたい・引っ越したい方へ

おすすめレンタルサーバー「ConoHa WING」
Webサーバー処理速度 国内最速!
サイト管理・カスタマイズのタイパも抜群!
自動化AIのWEXALによって他社より負担を減らせます
各種キャンペーン施策によりコスパも抜群!
ConoHaに初めて入会かつ12か月以上のWINGパックなら
下のボタン経由で契約すると最大5000円の割引が受けられます

この記事を書いた人

素人の備忘録です。
素人がゆえにトラブルにぶつかりまくってきたので、同じように困った方の役に立てたらいいなと思ってます。
8年来のKUSANAGI推し。

元公安調査庁職員、発達障害(ADHD)

天満川 鈴をフォローする
IT雑記
タイトルとURLをコピーしました