【はてなブログ】文字サイズを大きくする方法を、PCとスマホ両方紹介！

こんにちは、YUMAです。

1年くらい、はてなブログで記事を書いています。

はてなブログって、何も設定しないと文字サイズが小さめなんですよね。特にスマホ！

一般的に、文字サイズは16px(pxは、ピクセルという単位)以上が良いと言われています。

今回は、はてなブログの文字サイズを大きくする方法について、PCとスマホ両方紹介していきます。

はてなブログの文字サイズを大きくする方法

では、解説していきます。一応言っておくと、変更されるのは記事本文の中の文字サイズです。

内容としては、以下の流れです。

1. デザインCSSに文字サイズをいじるための文を追加
2. 文をいじって文字サイズを変更

こんな感じで、めっちゃ簡単です。

PC

 まず、 PCの解説です。

CSSを貼り付ける場所

ダッシュボードからデザインをクリックします。

真ん中のスパナマークをクリックします。

一番下のデザインCSSをクリックします。

これで、CSSを記述できるようになります。ここにコードを貼っていきます。

CSSを貼り付ける

先ほど開いた場所に、下記のCSSをコピペします。

.entry-content {
  font-size:16px;
}

文字サイズをいじる

貼り付けたCSSの、「16px」と書いてある部分の、「16」の値を変えると、文字サイズを変更できます。

数字を小さくすれば文字サイズをが小さく、大きくすれば大きくなります。

あんまりデカすぎたり、ちっさすぎても読みづらいので、16pxか17pxくらいが良いかと思います。

スマホ

続いて、スマホです。

ちなみに、レスポンシブデザインにしている方はこちらの設定はしなくて大丈夫です。

CSSを貼り付ける場所

ダッシュボードからデザインをクリックします。

一番右のスマホマークをクリックします。

ヘッダをクリックします。

「スマートフォン用にHTMLを設定する」にチェックを入れ、以下の欄にコードを貼っていきます。

コードを貼り付ける

ここに、以下のコードを貼り付けます。

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

 PCと違うのは、文がstyleタグで囲まれてることです。ちょっと小難しいことを言うと、はてなブログのスマホカスタマイズにはCSSを記述する欄がないので、こう書くことでHTML中にCSSを書くことができるんです。何言ってるかわからない人は、理解しなくてもとりあえず大丈夫です。

 PCと同じように文字サイズを変える

あとは、 PCと同じように文字サイズをいじってください！

ユーザーに優しい見やすいブログを作ろう

ユーザーが見やすいブログを作るのって大事です。例えば、以下みたいな感じ。

• 文字サイズを適度に大きく
• 行間をちょうどよく空ける
• 見出しのデザインを変える

こういった細かいことを意識すると、読んでいる側も心地良いブログになります。

はてなブログの行間の空け方については、以下の記事で紹介してるので参考にしてみてください。

【はてなブログ】空白行を使うとSEOに不利になる！CSSで調整しよう。 - YUMA OFFICIAL BLOG

それでは、以上です！