【Luxeritas】スマホ用の記事タイトルや見出しの文字サイズを設定する方法

2019年6月19日2021年7月17日HTML・CSS,Luxeritas

私はWordPressテーマ『Luxeritas(ルクセリタス)』を使っています。
使いはじめた頃からスマホで記事を表示させたときの記事タイトルと見出しの文字の大きさが気になっていました。

PCなどの大きな画面で表示された記事タイトル、見出しの大きさは問題ないのですが、スマホなどの小さい画面で表示すると小さい(^^;

私的にはもう少し大きくしてメリハリを付けてもっとわかりやすくしたいところです。

なぜスマホで表示したとき文字が小さくなるのかは私がまだまだ勉強不足なのでわかりませんが…スマホ表示用にCSSを追加して、PCなどの大きな画面用とスマホなどの小さな画面用の文字サイズを分けることにしました。

Contents

1. 文字サイズの変更
2. メディアクエリを使ってスマホ用の文字サイズを設定
- 2.1. メディアクエリとは
- 2.2. スマホ用の文字サイズの設定
3. 最後に

文字サイズの変更

Luxeritasでは記事タイトルや見出しの文字サイズを Luxeritas カスタマイズ(外観) 文字サイズで設定できます。

こちらの設定は大きな画面用として使います。

※見出しデザインのカスタマイズについてはこちらの記事を参考にしてください。

【Luxeritas】投稿・サイドバーの見出しをカスタマイズ

2019年10月16日『記事タイトル』のクラス名について説明を追記しました。 2019年6月18日『記事タイト ...

https://kirari-yums.net/post-7442/

メディアクエリを使ってスマホ用の文字サイズを設定

ではスマホ用の文字サイズを設定します。

※ここではスマホ(小さい画面)で表示する場合の時文字サイズを設定していきます。
見出しデザインが設定されていればデザインはそのまま反映されます。

メディアクエリとは

メディアクエリとは、簡単にいえば画面の環境などに合わせてCSSを設定できるものです。

例えば、「画面の横幅がこれ以上ならこのように表示する」とか「画面の横幅がこれ以下ならこのように表示させる」という設定ができるのです。

きらり

？よくわからない(^^;

結耶

だよねw簡単にいえば大きい画面と小さい画面で表示を変えられるってことだよ！

私の説明が下手なので分かりづらいかもしれませんが、とりあえずメディアクエリを使ってスマホ用の文字サイズを設定してみたいと思います。

スマホ用の文字サイズの設定

まずは記事タイトルの文字サイズを設定していきます。

/*スマホ用記事タイトルの文字サイズ*/
@media screen and (max-width:540px) {
	.post .entry-title {
		font-size:24px;    /*文字サイズ*/
	}
}

※2行目の@media screen and (max-width:540px)部分は画面サイズ(横幅)が540px以下の場合適用という意味です。
「@media screen and (max-width:540px) 」のあとに { } を付けてその中にCSSを記述していきます。

※3行目「.entry-title」はLuxeritasで指定されている記事タイトルのクラス名です。

※4行目「font-size」がスマホ用の文字サイズです。

きらり

これでスマホで表示させたとき文字サイズが24pxになるってことだね！

結耶

画面サイズが540px以下なら適用されるようにしたからそういうことだね。

記事タイトルと同じようにh2とh3の見出しの文字サイズも設定します。

/*スマホ用記事タイトルの文字サイズ*/
@media screen and (max-width:540px) {
	.post .entry-title {
		font-size:24px;    /*文字サイズ*/
	}

/*スマホ用 h2見出し*/
	.post h2 {
		font-size:22px;    /*文字サイズ*/
	}

/*スマホ用 h3見出し*/
	.post h3 {
		font-size:20px;    /*文字サイズ*/
	}
}

これでスマホ用の記事タイトルと見出しの文字サイズの設定が完了です。

きらり

文字サイズは結耶の好みなので、ご自分のサイトに合わせて変更してくださいね。

注意！

ここで紹介したコード(クラス名)はWordPressテーマ「Luxeritas(ルクセリタス)」のものです。
メディアクエリはLuxeritas以外のテーマやWordPress以外のWebサイトなどでも使えます。
Luxeritas以外のテーマやWordPress以外のWebサイトで使用する場合は「クラス名」などを確認してください。
またお使いのブログサービスによっては適用されないこともあります。