AFFINGER

アフィンガー5でマル付き・番号付きリストを作成&カスタマイズする方法

ライオンの図

悩む学生
AFFIINGER5でチェックマークを使ったボックスを使いたい。どうすればいいのかな。

 

今回はこうした悩みを解決します。

 

本記事の内容

  • リストボックスの使い方
  • リストボックスのデザイン変更

 

今回はAFFINGER5で以下のようなチェックマーク付きなどのボックスの作る方法について解説します。

  • サンプル
  • サンプル
  • サンプル

 

実を言うと、ぼくはこのボックスの作り方がまったく分かりませんでした。
リットン

 

また、デザインについて紹介している記事も全然なくてカスタマイズにもすごく苦労しました。

 

そこで、ぼくと同じように悩む方に向けて、このようなボックス(リスト付きボックスという)の使い方とカスタマイズ方法を細かいところまで徹底的に解説します。

 

この記事を見れば、リストボックスの使い方が分かり、単なる箇条書きのときよりあなたのブログがおしゃれになる方法が分かりますよ

 

記事はサクッと読めますので安心してください。

 

AFFINGER5リストボックス(チェックマークの箇条書き)の作り方

ロケットの絵を描く青年

丸付きチェックマークの正体なのですが、スタイルリストという機能のなかの1つです。

 

どんな感じか分かりやすくするため、すべて表示しておきます。

  • ドット下線(リスト)
  • ドット下線(リスト)
  • マル(リスト)
  • マル(リスト)
  • マル+ドット下線
  • マル+ドット下線
  • 簡易チェックリスト
  • 簡易チェックリスト
  • 簡易チェック+ドット下線リスト
  • 簡易チェック+ドット下線リスト
  • チェックボックス(番号なしリスト)
  • チェックボックス(番号なしリスト)
  • チェックリスト(番号なし)
  • チェックリスト(番号なし)
  1. ナンバリング(番号付きリスト)
  2. ナンバリング(番号付きリスト)
  1. ナンバリング四角(番号付きリスト)
  2. ナンバリング四角(番号付きリスト)
  1. ナンバリング四角(番号付きリスト)+ドット下線
  2. ナンバリング四角(番号付きリスト)+ドット下線

表示は違いますが、作り方は基本的にどれも一緒なので、安心してください。

 

では、さっそく作り方の説明に入っていきます。

 

まず全体の流れを押さえておくとこんな感じです。

 

AFFINGER5リストボックス作成手順

  1. 箇条書きにしたい部分を指定する
  2. スタイルから好みのリストを選ぶ
  3. 番号なし・ありのリストをクリック

まずは箇条書きにしたい部分を選択します。

 

そのあと、青に表示されたままの状態でスタイルボックス好みのリストをクリック。

リストの選択

 

すると先ほど青で表示された部分が薄い点線でこのように囲まれるはずです。

ドット線で囲まれた図

 

このあと、好みで選んだリストが

  • 番号なしの場合→箇条書きの番号なしリストをクリック
  • 番号ありの場合→箇条書きの番号付きリストをクリック

というように進めてください。

トップのリストを選択する

 

プレビューモードで見るときちんとこのように反映されているはずです。

  1. サンプル
  2. サンプル

リストボックスの作成方法は以上となります。

 

ちなみに、下記のようなリストを作りたい場合は、今の手順の前に箇条書きしたい部分を先にボックスで囲めばできます。

AFFINGER5リストボックス作成手順

  1. 箇条書きにしたい部分を指定する
  2. スタイルから好みのリストを選ぶ
  3. 番号なし・ありのリストをクリック

 

このリストの場合、複合メモで囲む→箇条書き部分を指定する→数字リストで作成してます。
リットン

 

AFFINGER5のリストボックスのカスタマイズ方法

 

箇条書きの図

上記で紹介したリストボックスのカスタマイズについて説明します。

 

外観カスタマイズをクリック。オプションカラーリストをクリック。

 

リストのカスタマイズ

 

すると、

  • 数字リスト
  • チェック(マル)リスト
  • チェック(ボックスタイプ)
  • こんな方におすすめ

がでてきます。

 

今回のリストに関する設定でいえば主に上2つが絡んできますので、こちらを紹介します。

 

  • ナンバー・チェック色→数字やチェックマークの色が変わります。
  • ナンバー・チェック(マル)背景色→数字やチェックマークの背景が変わります。
  • 囲いボーダー色→ボックスの枠線の色が変わります。
  • 囲い背景色→ボックスの背景色が変わります。
  • 背景色の角を丸くする→チェックすることでリストの角が丸くなります。

AFFINGER5を使ったサイトを何十サイトも見てきた感覚としては、ナンバー・チェック(マル)背景色と囲いボーダー色は同系統もしくは同色にしている人が圧倒的。

 

また、角を丸くするかどうかについては男性のサイトは四角にしている人が多いです。

 

この辺は自分の感覚と、おしゃれだなと思った人のデザインを見て決めるのがいいかと思います。

 

AFFINGER5のリストボックスを使いこなしてブログを見やすくしよう

見やすいブログを見る

今回はAFFINGER5でのリストボックスの表示方法について紹介しました。

 

このリストボックスの作成は、単なる箇条書きより見やすく読者にとってもプラス評価につながる可能性があります。

 

AFFINGER5は機能が大変多く、初心者のころはすごく扱いにくい部分もあると思います。

 

しかし、こうした細かい部分も設定していけば、自分好みのサイトができあがり、モチベーションも上がるので少しずつカスタマイズしていきましょう。

 

今回は以上です。ありがとうございました。

関連記事【AFFNGER5のレビュー】メリットとデメリットを使用者が解説

関連記事【完全版】ブログを見やすくするコツ【あなたは意識してますか?】

-AFFINGER

Copyright © Lytton Blog