小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

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

IT雑記
この記事は約3分で読めます。

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

スポンサーリンク
この記事を読む方へのオススメ

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

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

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

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

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

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

 

しかしLuxeritasでは、

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

質問者の写真

この字の大きさは何!
 

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

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

スポンサーリンク

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

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

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

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

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

スポンサーリンク

まとめ

解答者の写真
テーマのサイト表示がおかしかったらプラグインとの相性も疑ってみてね
 
アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
IT雑記
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました