ブログ運営

コピペでOK!JINのスマホ文字表示をグッと見やすくする方法&変更するメリット

Wordpressテーマ JIN
KOARA
KOARA
JIN最高ぉー!KOARA(@KOARAFE)です。

JINはかゆいところに手が届く最高のワードプレステンプレートだと思っています。

使うと分かるのですが、本当に至れり尽くせり。

本業でWeb制作をしている私が言うので間違いありません!笑

しかしただ1つだけ気になることが…

なんかスマホの記事タイトル小さくないですか!?

きっとJINのスマホ文字サイズが気になっているのは私だけではないはず。

ということで、スマホの文字サイズをピペするだけでいい感じに変更できちゃう方法を紹介していきます!

ユーカリくん
ユーカリくん
難しくない…?

HTMLとCSSなどの専門知識は一切不要なのでご安心ください!

こんな方に向けた記事です
  • ワードプレステンプレートのJINを使っている
  • JINのスマホでの文字サイズが小さいと思っているが変更方法がわからない

JINのスマホ文字サイズ変更用コードと手順

さっそくスマホの文字サイズの変更方法をみていきましょう!

まずはワードプレス管理画面の「外観」>「カスタマイズ」から

ワードプレス管理画面 外観 > カスタマイズ

 

サイドバーの下の方にある「追加CSS」を選択してください。

JIN 管理画面 追加CSS

 

CSSコードの編集ページがでてきます。

ワードプレス CSS編集画面

 

ここに下のコード(※枠内すべて)をコピペして貼り付けてください。

/*スマホ トップの文字調整*/
@media (max-width: 767px) {
.post-list.basicstyle .post-list-item .post-list-inner .post-list-meta .post-list-title {
font-size: 14px;
line-height: 1.4;
}
}

 

コピペするとこんな感じになります。

ワードプレス CSS編集画面

 

正しくコピペできたらサイドバーの一番上にある「公開」ボタンをポチッと。
公開したら変更が反映されているか、実際にスマホで確認してみましょう。

追加CSS 公開ボタン

 

左が変更前、右がコードを追記した後のもの。

jin スマホ文字サイズの変更前と後

圧倒的に見出しの文字が見やすくなっているのがわかりますよね。そう圧倒的に。

ユーカリくん
ユーカリくん
おーこれは見やすい!
KOARA
KOARA
印象が一気に変わります!(ドヤ

JINの文字に関するその他の設定方法

実は先程のコピペコードを少しいじるだけで、「文字サイズ」と「行間」を簡単に変更することができちゃいます。

自分好みのデザインに変更してみましょう!

文字サイズの変更方法

font-size: 14px;

英語表記をみるとfont-sizeとなっており、その名の通り文字サイズを変更する値。

14pxというのが文字サイズになるので、この数値を増やせば文字は大きくなり、減らせば文字は小さくなります。

行間の変更方法

line-height: 1.4;

こちらはline-heightと書いてあります。

つまり行の高さ = 行間ということ。

1.4というのが行間になるので、数値を増やせば行間が開き、数値を減らすと行間が狭くなります。

文字サイズを変更しただけ離脱率が30%も低下!?

文字サイズを大きくすると離脱率(サイトから離れてしまう確率)が下がるってご存知ですか?

文字サイズが12pxの記事と15pxのもので離脱率のテストを行ったところ、15pxの記事は12pxのものに比べ約30%も離脱率が低下したというデータもあるほど。

ユーカリくん
ユーカリくん
まじかよ!

もちろん15pxが絶対にいいというわけではありません。サイトのターゲットとしている人が1番読みやすい文字サイズにしただけなんです。

ターゲットが若者向けであれば小さい文字でもいいでしょうし、逆に高齢者向けであれば大きな文字にしなければいけないでしょう。

たかが文字サイズですが、サイトの離脱率に大きく影響しているということは覚えておきたいですね。

特にスマホからのアクセスは70%以上ともいわれており、その影響は相当なものですよ。

まとめ

2/20現在、コピペのコード以外ではJINの見た目(CSS)はいじっていません。

元々よく出来すぎなんです。笑

有名WordPressテンプレートだからといって油断していると、思わぬところで読者を逃してしまうかも…

たかが文字サイズですが、読者に気持ちよく読んでもらうためには決して手を抜かないことが大切ですね。

今後変更した箇所があれば随時お伝えしていきたいと思います!

それでは!