[JINカスタマイズ] 記事タイトル周辺の文字サイズを変更して、スマホでも読みやすく！

こんにちは、ニャンC (@nyaan_c) です！

愛用しているWordPressテーマ『JIN』
今回はスマホ表示の際の「記事タイトル周辺の文字サイズ」をカスタマイズします。

『追加CSSにコピペするだけ』の微調整ですが、グッと読みやすくなりますよ！

調整箇所は下記の2ヶ所。

では、それぞれ詳細をご説明しますね。

タイトル文字サイズを調整する

「Beforeはちょっと読みにくいかも」と思った方は、上の3点が原因です。

「行」が捉えにくいので、目線が「ほわほわ〜〜」とさまよってしまい、内容が頭に入りにくいんです。

見えているけれど『読めない』は結構ストレスがたまるポイント。

これって、もったいないですよね…！

Afterはより強く「行」つまり「読む方向」を認識してもらうために、『横方向の文字のかたまり』として見えるよう、上記の3点を調整しています。

今回は「読みやすくする」ために、あえて文字のサイズを小さくしました。

「文字は大きいほうが読みやすい」というのは一理ありますが、文字のかたちや太さ、行間の組み合わせで『大きな文字なのに読みにくい』状態になってしまうこともあります。

/**スマホ記事タイトル文字サイズ**/
@media screen and (max-width:767px) {
 .cps-post .cps-post-header .cps-post-title {
    font-size: 1.2rem; /*文字サイズ*/
    line-height: 1.8rem; /*行間*/
    font-weight: bold; /*太字*/
}
}

カテゴリー文字サイズを調整する

上記の画像でいうと『石垣島の旅』と書いてある、カテゴリー表示の文字サイズを大きく調整してみました。

やはり『文字が書いてあるのに「読めない」』はストレスのかかるポイント。

とくにわたしはグラデーションの上に文字をのせたかったので、なおさら読みづらい…！

ここは単純に「読めるサイズまで大きく」しましょう。

こちらはPC・スマホ両方に反映させています。

/*記事左上のカテゴリー文字サイズ*/
.cps-post .cps-post-header .cps-post-cat a {
    padding: 5px 10px; /*ワクのサイズ*/
    font-size: 0.8rem; /*文字サイズ*/
}

記事タイトルまわりの文字サイズ調整まとめ！

さて、2つのカスタマイズを反映させた様子を改めてチェックしてみると、こちらのとおり。

自分が見て『なんとなく…読みづらい…』と思ったものは、読者にとっても同じであることが多いです。

あなたの渾身の記事、せっかくなら読者に「気持ちよく」読んで欲しいですよね！

文字のサイズや行間はコピペでサクッと解決できますので、お悩みの方はぜひ挑戦してみてください。