everything

気になることなんでも調べちゃいます♪

はてなブログ 『スマホの文字サイズを大きく』初心者でも簡単に変更する方法

はてなブログを使っていると、かゆいところに手が届くようなカスタマイズがしにくくて、ワードプレスに移行しようかな?て考えてたんですが。

調べてみるとCSS』で文字を大きく出来るということがわかりました。

まったくPCをわからない私でも出来た、はてなブログの記事の文字を大きくする方法をご紹介します。

 

 

 

スマホで見る文字サイズはどれくらいが最適?

いろんなサイトを見ていると、文字の大きさが違うことと、それによって読みやすさが違うんだなーって思ってました。

このごろ小さな字が読みづらく。世間でいう『老眼』というやつのせいでしょうか。この『老眼』が30才代から始まったんですよね。視力は今も良いので目が悪くなったわけじゃなく近くの小さい字が見えないんです。

自宅や仕事では眼鏡をかければいいんですが、困るのは電車内の暇つぶしにスマホであれこれ見る時です。いちいち眼鏡を出すのもめんどうで、裸眼で見るんですが、小さいなフォントのサイトは見れないんですよね。

そんな人って私だけじゃなくと思うんです。スマホを使える世代が増えるのと同時に、老眼世代も増えていくと思いますし。

 

文字が見えづらいと、 

小さな字のサイトは見た瞬間閉じちゃう

ということになってしまいます。

 

で、私がこうして記事を書いているはてなブログは文字が小さいんですよね。

自分のブログが、自分のスマホで見づらいなんて。

書き始める前にチェックすべきでした。

 

では、一般的なスマホに表示されている文字サイズはどれくらいかというと。

 

16px

あたりが多いようです。

 

これから、私のような老眼世代も、スマホを使うわけですし。

会社でも、おじさんたちがスマホ片手に、

「これなんて書いてる?小さくて読めない」

って言いながらウロウロしてますから。

 

ちょっと大きめかなーって思うくらいの方が、多くの人にに読んでもらえるブログになるかも?

というわけで、文字サイズを大きくすることにしました。

 

目標は

ちょっと一般的なサイズよりちょっと大きめの 

17pxにすることです。

はてなブログスマホの文字を大きくする方法

HTMLもCSSもわからないのでネットで調べました。

 

ネットで参考にさせていただいた記事はこちらです。

intermax.hatenablog.com

 

いくつか紹介されている記事をみつけたのですが、こちらのサイトがいちばんわかりやすかったです。

 

こちらの手順です。

 

ダッシュボードの「デザイン」

「マートフォン」

「ヘッダー」

「タイトル下」

 

と進んで「タイトル下」に下の赤字のコードをコピーして貼り付けます。

 

<style type="text/css">
.entry-content {
font-size:17px;
}
</style>

 

青字部分はフォントサイズです。

私は このブログのフォントサイズを17pxに変更したので青字部分を「17」にしました。こちらはお好みのサイズを入力してくださいね。

 

はてなブログスマホの文字サイズ変更したら

それでどう変わったかと言うと。

ビフォーアフターを見てみましょう♪

 

f:id:orangering:20181110222519p:plain

 

 

並べてみると、変化がよくわかります。

 

これくらいの大きさだと、電車の中でも読めそうです。

個人的にはもっと大きくてもいいんですけど、らくらくフォンみたいになっちゃうかな?

 

変更する時ドキドキするんですが、貼り付けた場所を確認しておいて元の状態に戻せるように気をつけておけば、失敗しても大丈夫かなって思ってます。

 

記事の内容については、個人の実践記録&忘備録ですので、これを行う時はくれぐれも自己責任で行ってくださいね。