スポンサーリンク

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

2019年6月19日HTML・CSS,Luxeritas

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

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

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

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

スポンサーリンク

文字サイズの変更

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

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

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

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

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

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

メディアクエリとは

メディアクエリとは、簡単にいえば画面の環境などに合わせて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サイトで使用する場合は「クラス名」などを確認してください。
またお使いのブログサービスによっては適用されないこともあります。

「min-width」にすると

今回は「@media screen and (max-width:540px)」でmax-widthを使用しています。

max-widthを@media screen and (min-width:540px)とmin-widthにすると…画面の横幅が540px以上で適用と言う意味になります。

最後に

きらり

きらり

メディアクエリを使うとPC用とスマホ用にデザインが変えられる?
結耶

結耶

そういうことになるね。私は文字サイズを変えたかったから文字サイズしか指定してないけど…いろいろ設定すればデザインも変えられるよ。

今回はLuxeritasの場合で説明しましたが、その他のテーマでも「スマホで記事を表示すると記事タイトルがデカい!」なんて声も聞きます。
そういう場合はメディアクエリを使ってスマホ用のCSSを設定してみてください。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM