THE THORで文字サイズを修正するカスタマイズ

THE THORで文字のサイズを修正するカスタマイズ

当サイトでは、WordPressテーマにTHE THOR(ザ・トール)を使用しています。

THE THORを使用していると、特定の箇所の文字のサイズを調整したいと思っている人も少なくないはず。

ここでは、当サイトで施しているカスタマイズのうち、

文字の大きさを修正するカスタマイズ

について解説しています。

その他のカスタマイズについては、下記ページを参照して下さい。

関連記事

現在、当サイトでは、WordPressテーマに「THE THOR」を使用しています。THE THORは標準で多くの機能を搭載している分、設定項目が多いのが特徴です。設定によって自在にデザインや表[…]

WordPressテーマ「THE THOR」でカスタマイズしている点

文字のザイズを修正するカスタマイズ

メインビジュアルのタイトルの文字サイズを変更

THE THORを標準のまま使用していると、PCやスマホにおいて文字の大きさでバランス的に気になる箇所が何箇所かあります。

その一つがTOPページのメインビジュアルに添えるタイトルの文字(下図赤枠の部分)です。

デフォルトのままだと文字数との絡みで大きく感じましたので少し小さくしました。

TOPページのメインビジュアルのタイトル文字

メインビジュアルのタイトルの文字の大きさは、THE THOR CHILD(子テーマ)の、style-user.cssに以下のコードを追加することで指定が可能です。

h2.heading.heading-slider {
font-size: 1.5rem;
}
@media only screen and (min-width: 768px){
h2.heading.heading-slider {
font-size: 2.5rem;
}}

PCとモバイルで大きさを変えたかったので、見ている幅が768pxより小さくない間は、フォントサイズ2.5remで表示させ、そうでなければ(小さければ)1.5remで表示させています。

記事一覧の文字サイズを変更

同じく、カテゴリーやタグのページで表示される記事一覧のタイトルの文字サイズにも少し違和感を感じます。

記事一覧の文字サイズ

特にスマホで見た時には文字が大きく感じます。

記事一覧の文字サイズは、以下のコードで変更できます。

h2.heading.heading-secondary {
font-size: 1.4rem;
}
@media only screen and (min-width: 768px){
h2.heading.heading-secondary {
font-size: 1.7rem;
}}

このやり方で、記事の見出しの文字のサイズなども好みのサイズに変更することが可能です。

子テーマを使いますので、テーマがバージョンアップしても有効です。

必要に応じて使います。