リストブロックは見やすい記事を作成する上でとても効果的な機能です。
AFFINGER7では12種類のスタイルを利用してリストを作成することができます。
リスト自体は初心者でも直感操作で簡単に使いこなすことができますが、リストアンコンの色変更などは少し迷うかもしれません。
この記事では、初心者向けにリストブロックの基本から設定方法、使用時のコツまで詳しく解説していきます。
※ この記事はAFFINGER6時代に作成した内容をAFFINGER7対応版として更新しています。
AFFINGER7のリストブロック
リストブロックは、箇条書きや手順、ポイントを視覚的に分かりやすく表示できる機能です。
AFFINGER7では、
- アイコン付き
- 番号付き
- チェックマーク付き
- タイムライン風
など、デザイン性の高いリスト表示 ができます。
AFFINGER7でリストブロックを挿入する方法
リストを作成するにはブロックの「リスト」を選択するだけです。
「リストを選択」（下画像の矢印部分）をクリックすると画面右側にスタイル変更などができる設定画面が表示されます。
設定画面でリストのスタイル（デザイン）やテキスト色などを変更することができます。
AFFINGER7で可能なリストのデザイン（12種類）
AFFINGER7では12種類のスタイルから選んで簡単にリストデザインを変更することができます。
※ バージョンによってスタイルの種類に違いがあります。
- デフォルト
- サークル
- チェックB
- チェックL
- 連番C
- 連番S
- タイムラインL
- タイムラインC
- 階層
- 米印
- マル
- バツ
1．デフォルト
何もしない初期のリストです。
- ああああ
- いいいい
- うううう
2．サークル
マルを表示させることができるリストです。
マルの部分の色は変更することができますが、サイト全体で利用するリストに反映されるので個別で変更することはできません。
変更方法は記事の後半で解説しています。
- ああああ
- いいいい
- うううう
3．チェックB
チェックリスト表示です。
- ああああ
- いいいい
- うううう
4．チェックL
丸形のチェックリストです。
- ああああ
- いいいい
- うううう
5．連番C
丸形の連番リストです。
- ああああ
- いいいい
- うううう
6．連番S
四角型の連番リストです。
- ああああ
- いいいい
- うううう
7．タイムラインL
タイムライン風のリストです。
- ああああ
- いいいい
- うううう
8．タイムラインC
番号付きタイムライン風のリストです。
- ああああ
- いいいい
- うううう
9．階層
階層構造のリストを作成できます。
- ああああ
- いいいい
- うううう
- ええええ
- いいいい
10．米印
米印付のリストです。
- ああああ
- いいいい
- うううう
11．マル
マル付きのリストです。
- ああああ
- いいいい
- うううう
12．バツ
バツ付きのリストです。
- ああああ
- いいいい
- うううう
リストのボーダー設定
作成したリストに枠線（ボーダー）を設定することができます
設定できる種類は５種類になります。
- なし
- 基本
- 太め
- 点線
- 点線（太め）
- ボーダー設定「なし」だとこんな感じです。
- ボーダー設定「基本」だとこんな感じです。
- ボーダー設定「太め」だとこんな感じです。
- ボーダー設定「点線」だとこんな感じです。
- ボーダー設定「点線（太め）」だとこんな感じです。
リストの色設定
リストのテキスト色や背景色を変更できます。
- テキスト色を赤に変更するとこんな感じです。
- 背景色を変更するとこんな感じです。
リストのタイポグラフィ設定
タイポグラフィとは簡単に言えば、書かれた文字や文章を見やすくする技術のことです。
- サイズ「S」だとこんな感じです。
- サイズ「M」だとこんな感じです。
- サイズ「L」だとこんな感じです。
- サイズ「XL」だとこんな感じです。
リストアイコンの色変更方法
リストのマルやチェック部分の色を変更することができます。
初心者の方がわかりにくい・・・のは色変更の設定場所が違う点です。
色変更の設定場所は
「外観」→「カスタマイズ」→「オプション（その他）」→「リスト（数字・チェック/ボックスタイプ）から変更できます。
注意として、サイト全体での設定となるので作成した全てのリストに適用されます。
読まれる記事にするリスト作成のコツ
項目は短くまとめる
長い文章は読みにくくなります。
悪い例
- AFFINGER7はSEO対策機能が豊富で収益化もしやすくデザインも自由にカスタマイズできます
良い例
- SEO対策機能が豊富
- 収益化しやすい
- デザイン自由度が高い
重要な内容を先頭に置く
読者は上から順番に読みます。
最も伝えたい内容を先頭に配置しましょう。
項目数は多くしすぎない
一般的には5〜7項目程度が読みやすいと言われています。
情報を詰め込みすぎないことが大切です。
枠線・下線・他のボックスとの組み合わせ
視覚的に見やすいリストにする為に枠線や下線を利用することも効果的です。
また、AFFINGER7の他のボックス機能と組み合わせて利用しても見やすくなります。
例えば、
- マイボックス
- タイトル付きフリーボックス
との相性がいいです。
よくある質問
スタイルにあるアイコン以外に変更できる？
残念ながら12種類のスタイル以外でリスト先頭に別アイコンを設定することはできません。
スマホでもきれいに表示されますか？
問題ありません。
AFFINGER7はレスポンシブ対応しているため、スマホでも見やすく表示されます。
AFFINGER6のリストブロックとの違いはある？
AFFINGER7への移行でリストブロックに変更はありません。
まとめ｜AFFINGER7のリストブロックは記事改善の必須機能
AFFINGER7のリストブロックは、記事の読みやすさを大きく向上させる便利な機能です。
特に次のような場面で活躍します。
- メリット・デメリット紹介
- 手順解説
- 必要なもの一覧
- 注意点まとめ
文章だけでは伝わりにくい内容も、リストブロックを活用することで読者にわかりやすく伝えられます。
AFFINGER7を使っている方は、ぜひ積極的に活用して読みやすい記事作りに役立ててみてください。
\\ 収益化に強い圧倒的人気テーマ！//
AFFINGER7がついにリリース！
AFFINGER6から更に機能がパワーアップ！
※ AFFINGER6は現在、AFFINGER7へと移行となりました。