ハピ活ライフ♬

デザインの世界で、もっとハッピーに♬

【はてなブログ】簡単コピペ!スマホやPCの文字サイズを変更する方法

 

こんにちわ❗
Roseberryです🙋‍♀️✨
本日のご訪問もありがとうございます✨

 

そんな本日の「ハピ活ライフ♬」は・・・

 

なんだかブログの文字サイズが小さくて、読みにくいから大きくしたいんだけど、どうしたらいいのかなぁ?素人でもできるの?

 
という方に、おススメの記事となっています。


こんな人におススメの記事です!

・ブログのフォントサイズが気になる人
・ブログの行間や段落が気になる人
・ブログのカスタマイズをやろうとしている人

はてなブログ】を使い始めて、最近の私が時々思うこと。
はてなブログ】の文字サイズって、全体的に小さめのものが多いですよね。

小さな文字は目を酷使させてしまいます。
メンタル次第では、ブログを読む気が失せてしまうことも。

そこで、コピペするだけで簡単に文字のサイズなどが変更できる方法をいくつか集めてみました。

とても簡単なので、是非やってみましょう!


以下サクッとどうぞ。

はてなブログ】簡単コピペ!スマホやPCの文字サイズを変更する方法

【はてなブログ】簡単コピペ!スマホやPCの文字サイズを変更する方法

Photo by Jantine Doornbos on Unsplash

 

読みやすいブログの文字サイズに変更する方法

 

読みやすい文字の大きさは14px ~ 17px、行の高さ1.7 ~ 2 倍、段落間1~2文字ぶんくらいが読みやすいと言われています。

文字の大きさだけに留まらず、行間などにも余白を入れると、文章がとても読みやすくなりますよ!

やり方は、簡単!
はてなブログの「デザインCSS」に、この後にあるコードをコピペするだけでOKです。


 はてなブログカスタマイズ画面



(※ブログのデザイン次第では、CSSがうまく反映されないこともあるので、いくつか試しながらやってみてください)

 

参考にさせて頂いたコードとブログ

文字サイズなどの変更方法

  1. 参考にさせて頂いたブログの上にあるコードを、「デザインCSS」にコピペ
  2. コード内の〇〇やpx□□部分で、ご自身が好みの文字の大きさや行間に変更

 
コードの意味は、下記の通りです。

コードの概要

font-size
文字の大きさ
color
文字の色
margin-bottom
改行の幅
line-height
行 間

 

さんログ

  1. p {
  2. font-size: 16px;
  3. color: #383c3c;
  4. margin-bottom: 2em;
  5. line-height: 1.7;
  6. }

sunrise033.com

 

マジPEACE。

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

maji-peace.com

 

BE A SLOWLIFE

  1. .entry-content p {font-size: 16px;}
  1. /* 記事中文字サイズ */
  2. .entry-content {
  3. font-size: 18px; /* 文字サイズ */
  4. line-height: 2.0; /* 行の高さ */
  5. }
  6. @media screen and (max-width: 480px){.entry-content p {font-size: 16px;}}
  1. /* タイトル文字サイズ */
  2. .entry-title {
  3. font-size: 18px; /* 文字サイズ */
  4. line-height: 1.4; /* 行の高さ */
  5. }
  6. @media screen and (max-width: 480px){.entry-title a {font-size: 16px;}}

www.slooowlife.com


詳しい内容などは、それぞれのブログに記載されています。

上記の中で、「これを使ってみようかな」というコードがあれば、参考させていただいたブログも読んでみましょう。

 

参考にさせて頂いたブログ先には、ブログの勉強にもなる意見が色々ありますよ♬

 

実際に試してみた


私のブログテンプレートは、レスポンシブデザイン(左右の幅が自動調整される)なので、こちらのブログにあるコードを使用することにしました。

  1. /* 記事中文字サイズ */
  2. .entry-content {
  3. font-size: 16.5px; /* 文字サイズ */
  4. line-height: 1.9; /* 行の高さ */
  5. }

www.slooowlife.com


文字サイズは16.5px(ピクセル)、行の高さは1.9にしてみました。

下の画像は、携帯閲覧時の画像です。ざっくりと読みやすくなったように思います。

変更画面

 

私のブログは、携帯で見られている方が多いので、携帯主体で変更してみました♬

 

 

 

おすすめ本

 


はてなブログ Perfect GuideBook

記事の投稿、アクセスアップ、デザインのカスタマイズから、アフィリエイト、集客、広告、SNS連携まで 知りたい機能、やりたい操作が一目でわかります。

 

読みやすいブログにしよう


「読みやすいブログ」について、要点は以下の3点です。

本日の記事まとめ

  • 文字の大きさ:14px ~ 17px
  • 行の高さ:1.7 ~ 2 倍
  • 段落間:1~2文字ぶんくらい

 
記事の文字サイズや行間などは非常に重要です。

どれだけ良い内容を書いていても、文字の小ささで読まれないなんて、残念すぎますよね。

少しでも読みやすいブログにして、沢山の人にどんどん読んでもらいましょう!

そして、貴方の文字一字一句を、日々楽しみにしている読者さんのためにも、是非読みやすいブログにしてみてくださいね。

 

ちなみに・・・文字の色は大体グレー(グレーがおススメ)になっていますが、濃さなどが気になるようでしたら、原色大辞典を参考にしてみてくださいませ♬

 
本日も「ハピ活ライフ♬」にお越し下さいまして、本当にありがとうございました。皆様の日々の営みが、明るく楽しいものとなりますように。
またお時間ある時にでも、どうぞ覗きに来てやってくださいませ。


 \ ポチッとお願いします♬ /

ブログランキング・にほんブログ村へにほんブログ村

20200205110537