TCDテーマのフォントが、軽くて細いと思ったとき試す3つのこと

WEBデザイン

TCD のテーマを使っていると、ほかのブログのフォントに比べて軽くて細いと感じたことはありませんか?細くて軽いフォントは、おしゃれでステキなのですが...読者にとって読みやすい太さに設定したいですよね。

フォントが細くなってしまう理由がいくつかあるので、3つのポイントにわけてわかりやすく説明していきますね。TCD のテーマを使っている方も、そうでない方もぜひチェックしてみてください。

というわけで今回は、TCD テーマのフォントが軽くて細いと思ったとき試してほしい3つのことを、ご紹介します。

TCDテーマのフォントが、軽くて細いと思ったとき試す3つのこと

TCD テーマのフォントが、軽くて細いと思ったら、次の3つのことを試してみてください。

試してほしい3つのこと
  • font-weight の数値をチェック
  • font-family でフォントの種類を変更する
  • font-smoothing のチェック
助手くん
助手くん
ほかのブログのフォントに比べて、すごく細いけど、治し方がわからないんです!
助手ちゃん
助手ちゃん
CSS とか、コードの意味がイマイチわからなくて...
そんなあなたのために、サクッと解決しましょう!!
サウンドオルビス
サウンドオルビス

ひとつずつわかりやすく解説していきますね。テーマによっては、今回ご紹介する方法以外にも、解決策があるかもしれません。そのときは、ぜひ教えていただけましたら幸いです。

それでは、さっそくいってみよ〜!

1.font-weight の数値をチェック

font-weight: 400;

ひとつめは、font-weight の数値をチェックすることです。

font-weight は、その名のとおり文字の太さを設定する CSS の項目です。数値が大きくなるほど、太くなっていきますよ。

  • ↑太くなる
  • 700
  • 600
  • 500
  • 400
  • 300
  • 200
  • 100
  • ↓細くなる

追加 CSS など。じぶんで font-weight を指定した場合に、過去の数値が残っている場合もあります。CSS のスタイルシートで font-weight と検索をかけて、細い数値になっていないかチェックしてみてください。

わたしは逆に、太くなっている箇所があったので、このやり方で問題点を修正しました。けっこう昔の CSS 記述がのこっていることっておおいので、ぜひ確認してみてくださいね。

2.font-family でフォントの種類を変更する

ふたつめは、font-family でフォントの種類を変更します。

もしかすると、フォントが軽くて細いと感じている原因が、フォントの可能性もあります。思い切って、body で指定されているフォントを変更してみましょう。

わたしの使っている TCD テーマ「Bloom」では、下記のフォントが指定されていました↓

body {
    font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

これを思い切って、下のフォントの種類、font-family に変更してみました↓

body {
"Helvetica Neue",Helvetica,Arial, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif
}

フォントが軽くて細いと感じている問題が、フォントの種類を変更するだけで、解決するかもしれません。

font-family の変更は、こだわりはじめると終わらなくなるので笑...あまりこだわりすぎず、読みやすいフォントに指定するぐらいでやめておきましょう。

3.font-smoothing のチェック

みっつめは、font-smoothing でフォントのアンチエイリスを変更します。

font-smoothing って値を、あまり聞かないですよね?これは、フォントのテキストレンダリングに関わる値です。かんたんにいうと、ギザギザしたフォントの角をなめらかにしてくれる値ですね。

ちなみに、TCD テーマ「Bloom」の body には、下記の font-smoothing があてられていました↓

body {
    -webkit-font-smoothing: antialiased;
}

-webkit- がついているので、Mac や iPhone の Safari で、動作するものみたいです。どうやら、Mac OS ではデフォルトで、フォントが太くなっているみたいなんです。それを、修正するコードだったんですね。

ちなみに font-smoothing には、以下の設定値を割り当てることが可能です↓

  • antialiased:アンチエイリアスあり(滑らかに見せる)
  • auto
  • inherit:親要素のプロパティを継承
  • initial:初期化
  • none:アンチエイリアスなし
  • subpixel-antialiased:強くアンチエイリアスあり(より滑らかに見せる)
  • unset:親からの継承値。または初期値
antialiased・subpixel-antialiased の比較
Antialiased01
画像:antialiased のフォントが細い状態

Subpixel antialiased01
画像:subpixel-antialiased のフォントが太い状態

わたしの環境では、アンチエイリアスの設定をかえることで、TCD テーマの軽くて細いフォントを修正することができました。

めずらしい font-smoothing という値について、参考にさせていただいた記事も掲載させていただきました。Chrome の検証ツールをなどを活用して、フォントが軽く細くなってしまう問題を解決してみてくださいね。

まとめ

TCDテーマのフォントが、軽くて細いと思ったとき試す3つのことをご紹介させていただきました。まとめると、こんな感じです↓

この記事のまとめ
  • font-weight の数値をチェック
  • font-family でフォントの種類を変更する
  • font-smoothing のチェック

この記事では、おもに TCD テーマを使っている人が遭遇しやすいポイントとして、解説させていただきました。ですが、ほかの WprdPress テーマをつかっていても、同様のフォントが軽く細くなってしまう問題を解決できる可能性もあります。

今回紹介した3つの方法を試していただき、理想のテキストになるためのフォント選びをしてみてください。それでは、今回はこの辺で!?

今回の記事が、あなたのブログのフォントカスタマイズのお役に立てていたら嬉しいです。そのほか、WordPress や ブログの悩みなどについてまとめた記事があります。あわせて、こちらの記事もどうぞ。

【関連】ブログ記事まとめ | サウンドテック・ラボ

サウンドオルビス

3,755,547 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事