WordPress初心者向け｜AFFINGER6でサイト全体の文字サイズと行間を設定する方法

AFFINGER6を使い始めてから、サイト全体のフォントサイズや行間を設定する必要があることを知りました。

どこで設定するのか調べながら、ほかのサイトを見て見よう見まねで入力していました。

AFFINGER6は設定項目が多く、当時の私には初期設定も難しく感じました。

そこで今回は、サイト全体のフォントサイズと行間の設定に絞ってまとめました。

※この記事ではAFFINGER6を使用しています。
テーマによって、フォントサイズの設定方法は異なります。

文字サイズと行間を設定する

AFFINGER6では、サイト全体の文字設定を変更できます。
文字の大きさや行間は、PC・タブレット・スマホで、それぞれ設定することもできます。
ここでは、設定画面を開いてフォントサイズと行間を設定します。

①　ダッシュボードの「AFFINGER管理」を開きます

②　「全体設定」を選びます

③　サイト全体の設定の「フォントのサイズ」を選びます

　

④　「フォントサイズ」を設定します
　　PC・タブレット・スマホのフォントサイズをそれぞれ設定していきます。
　　それぞれの画面幅に合わせて、「基本（Pタグ 他）」のサイズと行間を設定します

設定画面には、各項目の入力欄があります。
入力欄には、薄い文字で数値が表示されています。
この数値は、何も入力しなかった場合に使われるデフォルトの数値です。
変更したい場合は、数値を入力します。

フォントサイズや行間に決まった数値はありませんが、一般的な目安として、本文のフォントサイズは16px前後です。行間は文字サイズの1.5倍以上がひとつの目安とされています。
文字サイズや行間については、デジタル庁のデザインシステム「タイポグラフィ」でも紹介されています。

※　スクショの数値は、私のブログで現在設定しているものです。

　　📱　スマホ

　　📱　タブレット

　💻　PC

　💻　全体一括設定
　　　文字の間のスペースや、段落下の余白も設定できます。

⑤　「Save」をクリックして保存します

※見出しスタイルを設定している場合は、「フォントのサイズ」で設定した数値が見出しに反映されないことがあります。

ここで設定する文字サイズは、サイト全体に反映されます。
記事内の一部分だけ文字サイズを変えたい場合は、別の方法で設定できます。
→WordPress初心者向け｜文字の大きさを変える方法

設定後の表示を確認する

ブログの記事を表示して、フォントサイズや行間を確認します。

スマホは画面が小さいため、フォントサイズや行間によって見え方が変わります。
実際のスマホ表示を見ながら、自分のブログに合うように調整してみてください。

AFFINGER6には、フォントサイズや行間の設定のほかに、記事作成に使える「マイブロック」という機能もあります。
マイブロックの登録方法や記事への呼び出し方は、こちらの記事にまとめています。

WordPress初心者向け｜AFFINGER6のマイブロックを登録して記事に呼び出す方法

記事を作っていると、こんなことはありませんか？ ・記事作成時に、毎回同じ設定をするのがめんどくさいな。 ・よく使うブロックや装飾を、簡単に呼び出せたらいいな。 そんなときに便利なのが、AFFINGER ...

まとめ

AFFINGER6では、「全体設定」の「フォントのサイズ」から、PC・タブレット・スマホの文字サイズと行間を設定できます。　

フォントサイズや行間は、ブログのデザインや好みに合わせて設定できます。
設定してみて、もう少し大きくしたい、行間を広げたいと思ったときは、あとから変更できます。

記事の作成から公開までの基本操作を、シリーズにまとめています。

WordPress初心者向け｜記事投稿の基本操作まとめ

WordPressで記事を書くには、タイトル入力や画像の挿入、公開までにいくつかの基本操作があります。 この記事では、「WordPress初心者向け｜記事投稿シリーズ」で紹介した内容をまとめました。 ...