マジPEACE。

A「ほんと日本は平和だよね〜。」→B「マジPEACE。」から誕生。

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

この記事をシェアする

おすすめ記事▼【未経験からエンジニアへ】プログラミング教室9選を徹底比較!!初心者目線からレビュー!
【厳選!】無料おすすめ漫画アプリ6選とアプリ毎の人気マンガを紹介!

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

 

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

 

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

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

 

でも、探しても

  • PCの設定はこう変える!
  • スマホの設定はこう変える!

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

 

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

 

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

 

はてなブログのレスポンシブでスマホの文字の大きさを変える方法

  

文字の大きさと行間を変えるコード

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

はてなブログ版 スマホのフォントサイズも自由自在にカスタマイズ

【コピペ+α】はてなブログで文章を読みやすくするカスタマイズ集 - いつ俺〜いつから俺ができないと錯覚していた?〜

 

  • 文字の大きさと行間を変えるコード

  /* 文字サイズと行間 */
@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は、改行の行間を表すコードです。

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

 

はてなブログの設定のデザインを編集

f:id:sakusaku57:20180406144908p:plain

 

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

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

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

 

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

 

スマホの文字の大きさ表示

  • 通常の状態

f:id:sakusaku57:20180406151811p:image

 

  • 変更後

f:id:sakusaku57:20180406151846p:image

 

こんな感じになります。

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

 

結構、読みやすくなったよね!?

 

    • HTML・CSSを学ぶなら

 

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)