ブログ運営

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

JIN記事タイトルの文字サイズを調整

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

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

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

←Before:After→
JINタイトル文字サイズデフォルトJINタイトル文字サイズとカテゴリ文字サイズ変更

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

  • 記事タイトルの文字サイズ
  • カテゴリー表示の文字サイズ

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

本カスタマイズは「追加CSS」にコピペするだけでできますが、カスタマイズは自己責任でお願いいたします。

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

Before

JINタイトル文字サイズデフォルト

After

JINタイトル文字サイズ調整後

Beforeの特徴
  • 文字が細い
  • 文字が大きく、行数が多い
  • 行間が狭い

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

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

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

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

Afterの特徴
  • 文字が太い
  • 文字が小さく、行数が少ない
  • 行間を広くし「横に読む」流れを強く

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

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

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

記事タイトル文字サイズ変更CSS
/**スマホ記事タイトル文字サイズ**/
@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; /*太字*/
}
}
コピペする場所は「追加CSS」です。
他の設定やカスタマイズと干渉して反映されない場合があります。

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

Before

JINタイトル文字サイズ調整後

After

JINタイトル文字サイズとカテゴリ文字サイズ変更

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

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

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

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

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

記事上カテゴリーの文字サイズ変更CSS
/*記事左上のカテゴリー文字サイズ*/
.cps-post .cps-post-header .cps-post-cat a {
    padding: 5px 10px; /*ワクのサイズ*/
    font-size: 0.8rem; /*文字サイズ*/
}
コピペする場所は「追加CSS」です。
他の設定やカスタマイズと干渉して反映されない場合があります。

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

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

←Before:After→
JINタイトル文字サイズデフォルトJINタイトル文字サイズとカテゴリ文字サイズ変更

ニャンC
ニャンC
読める!読めるぞ!!

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

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

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