THE THORで文字サイズを修正する手順

THE THORで文字のサイズを修正する手順

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

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

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

文字の大きさを修正

する手順について解説しています。

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

関連記事

現在、当サイトでは、WordPressテーマに「THE THOR」を使用しています。THE THORは標準で多くの機能を搭載している分、カスタマイズ項目が多いのが特徴です。そのため、THE THORをはじめて使う人やテーマの[…]

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;
}}

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

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

必要に応じて使います。

 

関連記事

現在、当サイトでは、WordPressテーマに「THE THOR」を使用しています。THE THORは標準で多くの機能を搭載している分、カスタマイズ項目が多いのが特徴です。そのため、THE THORをはじめて使う人やテーマの[…]

THE THORで施しているカスタマイズ一覧
関連記事

当サイトは現在、WordPressテーマにTHE THORを使用しています。ここでは、WordPressテーマ「THE THOR」を実際に半年ほど使ってみて、本音でレビューをしてみたいと思います。良い点だけでなくイマ[…]

THE THORを実際に使ってみてのレビュー