テキストの行間が詰まっていて文章が読みにくい・・・。アフィンガー6で行間(余白)を調整して読みやすくしたい。
webサイトの記事では、テキストの行間や要素間の余白が文章の読みやすさに直結するのでとても重要です。また、余白の取り方で見た目の印象にも影響します。
「読みにくい・・・、見た目が悪い・・・」は、大切な読者が途中で読む気をなくして離脱してしまうかもしれません。
とはいえ、一度記事を書いた後に余白を調整するのは結構労力がかかります。できるだけ初期設定で調整しておくのがベストです。
この記事では、『アフィンガー6(AFFINGER6)で行間や余白の設定をする方法』を画像を使ってわかりやすく解説します。
記事の後半ではアフィンガー6に適切な余白の取り方についても解説しするよ。
AFFINGER利用者は使わなきゃ損！
2023年7月をもってアクセス解析に便利なGoogleアナリティクスの仕様がGA4になりました。しかし、GA4は機能が凝りすぎてて使いこなすのがかなり難しい。そこでGA4に代わるオススメツールが『AFFINGERタグ管理マネージャー』です。シンプルで使いやすくアクセス解析も簡単にできます。AFFINGER利用者の特権なのでチェックしておきましょう。
＼当ブログ限定特典付き！／
【特大！全44ページ】AffiliateRun〜なぜ売れないか？がもらえる
AFFINGER6を検討中の方
AFFINGER6の導入を検討中の方は「AFFINGER6を4年使用した感想・レビュー」も読んでみてください。
実際にAFFINGERを4年利用した経験をもとに、本音でレビューしました。メリット・デメリットを包み隠さず感想を書きましたので、きっと役に立つと思います。
アフィンガー6で行間と余白を調整する4つの方法
アフィンガー6(AFFINGER6)で行間と余白を設定する方法は以下の4つです。
- 行間と余白の初期設定
- Shift + Enterで改行
- スペーサーブロック
- ブロックごとのマージン設定
それぞれの設定方法と特徴について解説していきます。
余白の調整方法①行間と余白の初期設定
アフィンガーでは以下の2箇所から、行間と段落ブロック下の余白を簡単に変更できます。
テキストの行間設定
テキストの行間設定は以下から設定できます。
スマホ、タブレット、PCのデバイス別でフォントサイズと行間設定が可能です。
行間設定は基本的に初期設定のままでも見やすい設定になっています。当ブログでは、初期設定で少し圧迫感を感じたPCの行間を27pxから36pxに変更しています。
段落ブロック下の余白を一括設定する
ブロックエディターで最もよく使う『段落ブロック下の余白』を一括設定できます。
デフォルト設定は20pxになっており、段落間の余白が詰まっていて圧迫感があるため、初期値より大きくすることをおすすめします。
ブロックエディタの変更設定
アフィンガーでは投稿画面でも段落ブロック単位で下の余白を変更することができます。
段落ブロックの下の余白設定は5段階
- -大 ・・・初期値：-20px
- -小 ・・・初期値：-10px
- 0 ・・・余白なし
- 固 ・・・デフォルト値(一括設定で設定した値)
- 大 ・・・初期値：40px
「固」が基準となる余白で、ブロック追加時のデフォルト設定は「固」設定になっています。「-大、–小、大」は任意の余白に変更可能です。
余白の調整方法②Shift + Enterで改行
とても簡単な方法として、「Shift + Enter」で同じ段落ブロックの中で改行する方法があります。
この方法は簡単に余白の設定ができるところがメリットです。
一方でデメリットは、この方法で余白を作ると「brタグが付与」されること。brタグを使って複数行連続で改行する方法はHTMLの記述ルール上あまり良くありません。
段落間の間隔を広げるために連続した
mdn web docs
要素を使用することは、読み上げ技術の支援の下で操作をしている人にとっては問題になります。
例えば、段落内で「Shift+Enter」を3回行い、余白を作る(改行)すると・・・
<br>
<br>
<br>
こんな感じで、テキストがない行にも内部的にはbrタグが挿入され3行分の余白ができます。
〒105-0011<br>
東京都港区<br>
芝公園<br>
４丁目２−８
Shift+Enterは便利な方法。でも装飾のために使用するのはHTMLのルール上推奨されていないので、極力使用は避けましょう
余白の調整方法③スペーサーブロック
ブロックエディターでは、「スペーサーブロック」を使うことでテキストや画像などの要素間の余白を調整することができます。
- ピクセル(px)単位で細かい余白調整ができる
- 後から移動が簡単
- ブロックを呼び出す手間がかかる
- 多用すると無駄なdiv要素が増える
汎用性が高く使いやすいブロックなので余白の調整にとても便利です。
ただ、HTMLの観点では「空のdiv要素」を追加することになり、多用しすぎるのはソース上あまり美しくありません。行間や余白設定で調整できないブロックだけスペーサーで調整するとHTML的にもスッキリしたサイトになります。
余白の調整方法④ブロックのマージン設定
アフィンガーには、個別にマージン(余白)を設定できるブロックがあります。
マージン設定できるブロック
- マイボックス
- バナー風ボックス
マイボックス
マイボックス
マイボックスは「上・下・左・右」のマージン(余白)設定が可能
バナー風ボックス
バーナー風ボックス
バナー風ボックス下のマージン(余白)設定が可能
アフィンガー6におすすめの余白の設定方法
上記で解説したように、装飾目的の中身がないHTMLタグ要素はなるべく減らしたほうがソースコード的にも綺麗です。
中身のないHTMLタグの使用例
- Shift+Enter(brタグ)の連続使用
- スペーサーブロック(divタグ)
特にbrタグの連続使用はHTML仕様として推奨されていないので、使用しない方が無難です。
アフィンガーでは以下の設定機能を使うことで、中身のないHTML要素を減らすことができるので積極的に使っていきましょう。
アフィンガーにおすすめの余白設定
- テーマ管理の行間/余白の初期設定
- ブロックのマージン設定機能(マイブロック、バナー風ボックスのみ)
余白(マージン)設定できないブロックや画像の下に余白を設けたい場合のみスペーサーブロックを使うのが、記事作成の効率的にもソースコード的にもおすすめです。