ブログ記事を読みやすくするコツ2〜文字の大きさ・行間を変える［AFFINGER6］

ブログ記事を日々副業としてコツコツ作業しているnondoriです。

ブログを書き始めると分かるのですが、読みやすい記事ってなかなか難しい。。

あれこれ考えて記事を作成していますが、自分もまだまだです。

ところで記事は、そもそもの記事の文章の「文字（フォント）大きさ」「行間」で読みやすくなります。

自分も「文字（フォント）サイズ、行間」でブログ記事が読みやすくなる！と気づいた時は“目からウロコ”でした。

まずはアレコレ設定する前に、ブログ記事のベースともなる「文字大きさ」「行間」を設定する事をお薦めします。

文字（フォント）の大きさ、行間を変える

AFFINGER6は賢いので、何もしなくてもすでに設定がされています。

そのため設定はしなくても問題は無いのですが、自分で自分のサイトを見ていて何だか読みづらいと思われたなら、カスタマイズしていきましょう。

文字の大きさ・行間を変える設定方法

設定は簡単です。

PC、スマホ、（あればタブレット）を自分で確認しながら設定すると読みやすい設定ができるのでお薦めです。

step
1「AFFINGER管理」→「全体設定」で設定

ワードプレス左メニューの「AFFINGER管理」→「全体設定」をクリック。

「フォントサイズ」項目までスクロール（もしくは、上の「フォントサイズ」リンクをクリック。）

step
2実際のPC、スマホで確認しながらの設定がお薦め

実際のPC、スマホ、（あれば）タブレットを確認しながら、見やすい文字の大きさ・行間を設定していきます。

枠内にグレーで書かれている数字が、AFFINGER6が初期設定をしている大きさです。

ちなみに自分が管理している「のんどりデザイン」では、下記のような設定をしています。

設定後は『Save』ボタンをクリックで更新をします。

文字（フォント）の種類を変える

文字（フォント）の種類も変えられます。

ウェブフォント（Google font）を使うと格好いい文字が選択できますが、日本語は種類がおおいためウェブフォントを使うとサイトの読み込みが遅くなります。（サイトの読み込みが遅くなると、記事に興味をもってクリックしてくれたユーザーが別のサイトに移る可能性がでてきます。）

そのため、ウェブフォントは格好いいFONTですが、一部の文字のみに限定（サイト名、タイトルなど）で使う事をお薦めします。

そのためデバイスフォントで読み込むように設定していきます。（※デバイスフォントとは･･･記事を読む方のPC・スマホ・タブレットの中に入っているフォントで読み込む事です。）

自分は速度重視のため、デバイスFONTで設定しています。

文字の種類を変える設定方法

文字の種類を変える設定も簡単です。

step
1「AFFINGER管理」→「全体設定」で設定

フォントサイズの下の項目に「フォントの種類」があります。

【ワードプレス左メニューから設定する場合】

ワードプレス左メニューの「AFFINGER管理」→「全体設定」をクリック。

「フォントの種類」項目までスクロール（もしくは、上の「フォントの種類」リンクをクリック。）

先にいいましたが、WEBフォントは格好いいFONTですが、サイトの読み込みが若干遅くなるので、自分はデバイスフォントを使用しています。

参考までに、のんどりデザイン使用のFONTを下記に書きました。

ちなみに｢のんどりデザイン｣で指定したFONTの意味を下記に書きました。参考までにどうぞ。

のんどりデザインでは上記の指定をしています。のんどりデザインを見て頂いて｢同じでいいや｣と思われたのなら、｢のんどりデザイン指定FONT｣をコピペして使用してください。

簡単なので、設定してみてください。

まとめ

今回、ご紹介した「ブログ記事を読みやすくするコツ2〜文字の大きさ・行間を変える」の記事内容のおさらい

関連記事