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

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

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

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

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

 

スポンサーリンク

 

文字サイズの変更

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

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

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

 

 

 

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

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

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

メディアクエリとは

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

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

きらり

きらり

?よくわからない(^^;
結耶

結耶

だよねwとりあえず今回でいえば大きい画面と小さい画面で表示を変えられるってことだよ!

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

 

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

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

 
※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の見出しの文字サイズも設定します。

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

きらり

きらり

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

 

 注意!ここで紹介したコードは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を設定してみてください。

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトをはじめた駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。