AFFINGER 副業ブログ関連

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

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

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

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

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

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

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

 

ブログ記事を読みやすくする方法

文字の大きさ・行間を変える

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

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

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

 

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

設定は簡単です。

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

 

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

文字の大きさを変えてブログを読みやすくする-02

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

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

 

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

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

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

文字の大きさについて

WEBでの基本となる文字の大きさ表示は、PC、スマホとも(本文で)16pxが一般的といわれています。

また行間は、1.5文字〜2文字分空けると読みやすいと言われています。

(※pxとは、web上の最小単位です。)

 

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

のんどりデザイン指定FONT大きさ

  • スマホ版→AFFINGER6の初期設定のままです。
  • タブレット版→文字の大きさは初期設定の「20px」です。ただ、もう少し行間を空けてもいいと感じたので、「30px」から「36px」にしています。
  • PC版→初期設定は15pxになっているので、自分は16pxまで大きくしています。行間はもう少し空けた方がいいと感じたので、「27px」から「30px」に設定をしています。

 

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

文字の大きさを変えてブログを読みやすくする-03

 

 

文字(フォント)の種類を変える

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

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

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

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

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

 

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

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

 

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

文字の大きさを変えてブログを読みやすくする-04

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

 

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

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

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

 

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

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

のんどりデザイン指定FONT

"游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif[/st-cmemo]

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

のんどりデザイン指定FONT


【指定FONTの意味の説明】

  • 游ゴシック体、YuGothic、游ゴシック、Yu Gothic→すべて同じFONTです。OSやバージョンによって名称が変わるので一応すべて書いています。新しいMAC、Winに入っているベストFONT。(ちなみにiOSには入っていません。)
  • Hiragino Sans→MACのOS X 10.11、iOS 9以降から入っている標準FONT指定。
  • Hiragino Kaku Gothic ProN →MACのOS X 10.11、iOS 9以前のバージョンの標準FONT指定。
  • メイリオ→少し古いWinには標準に入っているFONTです。
  • sans-serif→指定したすべてのFONTが入っていない場合は、媒体が指定するFONTにする指定です。(必ずこれは入れます。)

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

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

 

まとめ

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

記事のまとめ


ブログ記事を読みやすくするために、基本となる「文字の大きさ・行間をカスタマイズ」するのもあり!
関連記事
ブログ記事を読みやすくするコツは会話吹き出しも有効です。
ブログ記事を読みやすくするコツ1〜会話吹き出し[AFFINGER6]

続きを見る

アフィンガーを使った感想
「アフィンガー6はできることがおおい?」3年間使った感想のまとめ[特典付き]

続きを見る

-AFFINGER, 副業ブログ関連