【THE THORのカスタマイズ】スマホのフォントサイズを小さくする方法

スマホサイズのイメージ

こんにちは。ごちゃんです。

今回は

悩む人のイメージ
ザ・トールのテーマをつかってるんだけど、スマホのフォント表示設定がわからない。。
なんか大きくて読みづらいんだよね。
こんな悩みを解決します。

 

デザインもスタイリッシュでSEO対策もばっちりのテーマ「THE THOR(ザ・トール)」はとってもお気に入りです。

 

フォントサイズの設定で個人的にはイマイチ点があったので修正していきます。それは・・

スマホの表示がなんかデカイぞ!

 

読みづらさは離脱率に直結するのでここは直しておきたいですね。

 

スマホの最適なフォントサイズは?

スマホの最適なフォントサイズは?
ではいったい最適なサイズはどれくらいでしょうか?
正直好みは分かれると思いますが・・
いろいろ調べてくれているサイトを見まくった結果、よくおすすめとがされていたのは
文字フォント:16px
文字行間          :1.5

 

一般的にこのサイズが好まれているようです。
フォントサイズもそうですが、行間のバランスも大事ですね。

 

基本設定[THE]からの変更

「外観」⇒「カスタム」をクリック

カスタマイズ画面

基本設定[THE]⇒基本スタイル設定をクリック

基本スタイル設定の画面

赤枠の中でそれぞれ、スマホ、PCのサイズ、字体の選択ができます。

ここで試してみて自分のサイトのイメージに合っていたら、それで終了です。

簡単ですね。

 

【CSS追加】でスマホのフォントサイズだけ一括変更(おすすめ)

より細かくスマホ表示の設定をしたい場合はこちらがおすすめです。
「外観」⇒「カスタム」をクリック
カスタマイズ画面
「追加CSS」をクリック
追加CSSの画面

 

そうしたら以下コードを <コピペ> してください

 

※カスタマイズはくれぐれも自己責任でお願いします。
@media screen and (max-width:750px) {
.content h2{
font-size:21px;
padding: 10px;
}
.content h3{
font-size:18px;
padding: 10px;
}
.content h4{
font-size: 17px;
padding: 10px;
}
ep-box, p, li{
font-size: 16px;
line-height: 1.5;
padding-left: 10px;
}
}

記事のフォントは「16px」を基準として各見出しを1ずつ上げています。

 

僕の場合、見出し2(h2)はやや大きめにしたくて「21」に設定しています。

行間は各サイトでおすすめされている「1.5」にしました。

 

記入が完了して、「公開する」をクリックしたら完了です。

【THE THORのカスタマイズ】スマホのフォントサイズを小さくする方法:まとめ

設定できたでしょうか?
サイズを少し変えるだけで、サイトの見た目は全然変わりますね。

 

フォントの数値は好みにあったサイズを試しながら変更してみましょう。

記事の作成はPCで行うことがほとんどですが、ユーザーの多くはモバイル端末からの閲覧がほとんどです。

Googleからの評価を上げるためにも、スマホの表示をより意識したいですね。

 

フォントがいい感じに設定できたら、これまで以上ライティングに集中できますね。

ブログの作業効率を上げる記事もぜひ参考にしてください。

関連記事

こんにちは。ごちゃんです。今回はブログ書いてるけど時間がめちゃくちゃかかるんだよね。効率アップできる方法とかあれば教えてほしいな。。 このような悩みを解決します。 自由[…]

ブログ 作業効率アップ

 

今回はここまでです。ありがとうございました。。

NO IMAGE