ブログ

Chromeの最小フォントサイズを変更する方法

普段見ているブログ書き用PCでは気づかなかったのですが、たまたま職場のデスクトップPCで自サイトを見た時にデザインが崩れているのに気づきました。CSSがおかしいのかと色々探った結果、そのPCのChromeの最小フォントの設定が表示しようとしているフォントサイズに対応していない事が分かったのでそのやり方です。

まずはchromeのアドレスバーに

chrome://settings/fonts

と入力してエンターキーを押すと以下のような画面が現れるので最小フォントサイズという項目があり、それを左にスライドするとデフォルトで10の最小フォントが6まで下げる事ができます。

最小フォントサイズを修正することによって下のようにデザイン崩れが改善しました。


 

上が最小フォントサイズの修正前、下が修正後です。本来目的としていたデザインになりすっきりしました。

気づいた理由

ブログ執筆用のWindowsPCで気づかなかったのは、「ディスプレイの設定」の「拡大縮小とレイアウト」の「テキスト、アプリ、その他の項目のサイズを変更する」でスケーリングの設定をしていたからでした。スケーリングしていると、指定のフォントサイズと実際描画しているフォントサイズにずれが生じているため崩れが少なく済んでいました。

「Window Resizer」というChrome拡張機能で色々な機種のウィンドウサイズが試せるのですが、最小設定のiPhone5でためした時にデザインの崩れに気づきました。最終的には実機でテストしますがそれ以前の段階でのテストにはとても便利です。

 

Chrome拡張の「Window Resizer」へのリンク

最大2.5%ポイント還元
Amazonで買い物をするならお得なギフト券チャージを!
  • コンビニ・銀行(ATM・ネットバンキング)でのお支払いで簡単すぐチャージ