【はてなブログ】レスポンシブデザインでもスマホの文字の大きさを変える方法|コピペで簡単！

はてなブログの標準だと、スマホの文字サイズと行間が読みづらくないですか！？

私はもう半年くらいはてなブログ使ってるんですが、パソコンで書いてたんでほとんど意識してなかったんですよね・・・

たまたまスマホで自分のブログを開いたときに、読みづらっ！

と気づき、すぐに変えました笑

でも、探しても

しか出てこなかったんです、

レスポンシブデザインにチェック入れてるやつはどうすんねん！！と。

でも色々試したらすぐできました。

コードは「初心者に嬉しいブログの心絵」さんの記事と「いつ俺」さんのを参考にさせていただきました。

/*　文字サイズと行間　*/
@media screen and (max-width: 768px) {
/*　画面サイズ 768pxから適用　*/
.entry-content p {
font-size:□□px;
line-height:〇〇em;
margin: 0.3em 0;
}

font-sizeは、文字の大きさを表すコードです。□□に、大きさを入れてください。

このブログは、16に設定しています。

line-heightは行間を表すコードです。

〇〇に、行間の広さを入れてください。

このブログでは、1.5に設定しています。

marginは、改行の行間を表すコードです。

通常のスマホだと広くないですか？なので変えてます！

「デザイン→カスタマイズ→デザインCSS」

に移動して、上記の赤丸箇所にコピペしてください。

※他のコードを消したり、他のコードの中に入れたりしないようにしてください。最初か最後に入れるのが無難です。

なぜこれでスマホデザインが変わるかというと、レスポンシブデザイン対応させているので、PCとスマホのコードが同じになるんですね。(厳密に言えば、画面の大きさによって適応させるコードを変えています)

こんな感じになります。

※パソコンの文字の大きさは変わりません。

結構、読みやすくなったよね！？