WORDPRESS

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法
 

あずきです🐥

 

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

「箇条書きリスト」の作り方とカスタマイズ方法

について、ブログ初心者さん向けに1からわかりやすく解説していきます

 

まずACTION AFFINGER6における「箇条書きリスト」というのは、実際の画面上で見ると…

 

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 top-01-a

↓(カスタマイズ後の一例)

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 top-01-b

 

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 top-02-a

↓(カスタマイズ後の一例)

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 top-02-b

 

↑ このようなもの

 

こうした「箇条書きリスト」は、ブログを訪れたユーザーに記事内容を整理してわかりやすく伝えるのに極めて便利です

文中の「区切り」の役割にもなって、視覚的にも読みやすくなるよ!
 

そんな「箇条書きリスト」について、3つのステップで丁寧に解説していきます

  1. WordPressにおける、「通常」の箇条書きリストの作り方
  2. ACTION AFFINGER6の「スタイル」を使った、箇条書きリストの作り方
  3. ACTION AFFINGER6の「スタイル」を使った、箇条書きリストのカスタマイズ方法

さっそく見ていきましょー🐥

 

 

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

ステップ1:WordPressにおける、「通常」の箇条書きリストの作り方

WordPress ヘッダー c-01

 

補足

ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「そもそもクラシックエディタとグーテンベルグってなに…?」という場合はこちらをどうぞ ↓(重要です)

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

補足

ご紹介する内容は、WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」を導入していることが前提となります ↓

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法
【2021年】Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法を初心者向けに解説【WordPressプラグイン/クラシックエディタ版】

続きを見る

 

まずはWordPressテーマ関係なく使用できる、「通常」の箇条書きの作り方について

 

WordPress管理画面から「投稿」もしくは「固定ページ」の編集画面を開き…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-1-01-a

↑「箇条書きリスト」にしたい、任意のテキストを入力します

編集エディタは、「テキスト」じゃなく「ビジュアル」のままでOK!
 
 

入力できたら…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-1-01-b

↑ このように、対象テキストを丸ごと「選択」した状態で、画面上部にある「番号なしリスト」アイコンをクリックするだけ

 

これで、選択していたテキストが…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-1-01-c

↑ このように「箇条書きリスト」へ変更されました

 

ちなみに!

 

対象テキストをすべて選択した状態で、さきほどの「番号なしリスト」アイコンではなく、その右隣に表示されている…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-1-02-a

↑ こちらの ▼ ボタンを開くと…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-1-02-b

↑ このように、箇条書きリストの「デザイン」を指定することができます

ここでは例として、「白丸」っていうのを選んでみるよ!
 

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-1-02-c

↑「白丸」の箇条書きリストが作れました

 

また、上記はいずれも「番号なしリスト」というデザインタイプでしたが、まったく同じ要領で対象テキストをすべて「選択」してから…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-1-03-a

↑ 、こちらの「番号付きリスト」というアイコンをクリックすると…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-1-03-b

↑ このように、「数字(ナンバリング)付き」の箇条書きリストを作ることもできます

この「番号付きリスト」も、右隣の ▼ ボタンからデザインを選べるよ!
 

補足

上記の方法で「箇条書きリスト」にしたテキストを…

元の通常テキストに戻したい場合

は…

  1. 箇条書きリストの状態になっている「対象テキスト」を、すべて選択!
  2. 画面上部から、「番号なしリスト」 or「番号ありリスト」アイコンの該当する方を選択!

という手順を行うことで、元の状態に戻すことができます

 

これでWordPressにおける「通常」の箇条書きリストの作り方はOKですが、上記のシンプルなデザインだけだと「やや味気ないかも」ですよね

 

ということで、今度はACTION AFFINGER6の【スタイルを使った箇条書きリスト】の作成方法について見ていきましょう🐥

 

ステップ2:ACTION AFFINGER6の「スタイル」を使った、箇条書きリストの作り方

WordPress ヘッダー c-02

 

まずはさきほどの【ステップ1】と同様に、「箇条書きリスト」にしたい任意のテキストを入力します

 

入力できたら、同じように対象テキストをすべて「選択」した状態で、画面上部から…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-2-01-a

↑ このように…

スタイル > リスト

の順に開きましょう

 

すると…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-2-01-b

↑ ACTION AFFINGER6で作成できる箇条書きリストの「デザインパターン」が一覧表示されるので、このなかから任意のデザインを選択します

例として、「マル(リスト)」っていうのを選んでみるよ!
 

任意のデザインを選択すると、対象のテキスト全体が「点線」で囲われた状態になるので…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-2-01-c

↑ そのまま「対象テキストが丸ごと選択されている状態」で、あとは【ステップ1】と同じように、画面上部の「番号なしリスト」アイコンをクリックするだけ

 

これで…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-2-01-d

↑ カラフルな「箇条書きリスト」に変更されました

 

これと同じ要領で、画面上部の「スタイル > リスト」から…

簡易チェック(リスト)

というデザインパターンを選び、「番号なしリスト」アイコンをクリックしてみると…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-2-02

↑ このような、「チェック」デザインの箇条書きリストになります

 

ちなみに、上記の方法で指定できる「デザインパターン」のうち…

  • ナンバリング(番号付きリスト)
  • ナンバリング四角(リスト)
  • ナンバリング四角+ドット下線(リスト)

↑ という3種類については、まず上記の手順で「デザインパターン」を選択してから…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-2-03-a

↑ こちらの「番号付きリスト」側を選択する必要があるので、ご注意ください

「番号なしリスト」アイコンと間違えないように気をつけよう!
 

「ナンバリング四角(リスト)」の一例 ↓

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-2-03-b

 

「ナンバリング四角+ドット下線(リスト)」の一例 ↓

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-2-03-c

 

そしてもう1点、ここで指定できる「デザインパターン」のうち…

  • チェックリスト(番号なしリスト)
  • ナンバリング(番号付きリスト)

↑ 上記の2種類については、箇条書きリストに「網掛け」が加わったデザインになります

 

「チェックリスト(番号なしリスト)」の一例 ↓

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-2-04-a

 

「ナンバリング(番号付きリスト)」の一例 ↓

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-2-04-b

 

あとはちょっとした応用として、「網掛け」が元々ないタイプの箇条書きリストでも…

ボックスデザイン

というACTION AFFINGER6の機能を使うことで、「網掛け」や「枠線」付きの箇条書きリストにすることが可能です(超おすすめ!)

これについては、次の【ステップ2】の最後で紹介してるよ!
 

補足

上記の「スタイル」を使った方法で「箇条書きリスト」にしたテキストを…

元の通常テキストに戻したい場合

は…

  1. 箇条書きリストの状態になっている「対象テキスト」を、すべて選択!
  2. 画面上部から「番号なしリスト」 or「番号ありリスト」アイコンの、該当する方を選択!
  3. 画面上部から「スタイル > リスト」を開き、該当の「デザインパターン」を選択!

という手順を行うことで、元の状態に戻すことができます

 

最後に、このACTION AFFINGER6における「スタイル」を使った箇条書きリストの【カスタマイズ方法】について見ていきましょう🐥

 

ステップ3:ACTION AFFINGER6の「スタイル」を使った、箇条書きリストのカスタマイズ方法

WordPress ヘッダー c-03

 

まずは、WordPress管理画面の左側一覧から…

外観 > カスタマイズ

を開き、さらにそのなかの左側一覧から…

オプション(その他) > リスト(数字・チェック / ボックスタイプ)

というタブを開きます

 

「リスト(数字・チェック / ボックスタイプ)」のタブを開くと…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-3-01

↑ このようなカスタマイズ項目が…

  • 数字リスト
  • チェック(マル)リスト
  • チェック(簡易 / ボックスタイプ)

という箇条書きリストの「デザインパターン」ごとに用意されているので、ここで任意の色・デザインをそれぞれ指定していけばOKです

 

今回は例として、「数字リスト」の箇条書きデザインを…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-3-02-a

↑ このような設定に変更してみます(具体的なカラーコードなどは、下記の通り)

  • 「ナンバー色」 → #ffffff
  • 「ナンバー背景色」 → #523634
  • 「囲いボーダー色」 → #523634
  • 「囲い背景色」 → #ffffff
  • 「背景色の角を丸くする」 → なし

設定を変更したら、最後に左上の「公開」ボタンをクリックしてカスタマイズは完了です

 

実際のブログ画面上で確認してみると…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-3-02-b

↑ このような箇条書きリストの色・デザインになりました🐥

「網掛け」の箇条書きリストから、「枠線」の箇条書きリストに変わったね!
 

参考までに、「数字リスト」以外の設定例は下記の通りです

 

「チェック(マル)リスト」の一例 ↓

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-3-03

  • 「チェック色」 → #ffffff
  • 「チェック(マル)背景色」 → #523634
  • 「囲いボーダー色」 → #523634
  • 「囲い背景色」 → #ffffff
  • 「背景色の角を丸くする」 → なし

「チェック(簡易 / ボックスタイプ」の一例 ↓

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-3-04-a

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-3-04-b

  • 「チェック色」 → #523634
  • 「チェックの枠色」 → #523634
  • 「チェック(ボックスタイプ)のデザインをチェックのみにする」 → あり
  • 「チェックのみサイズ」 → デフォルトの「120%」から「100%」に変更
デザインパターンごとで色を変えすぎるとガチャガチャして見えるから、テーマカラーを決めて「統一感」を出すことが大事だと思うよ!
 

あと最後にちょっとした応用技として、「網掛け」がないタイプの箇条書きリストでも…

  • マイボックス
  • 見出し付きフリーボックス

といったACTION AFFINGER6の各種「ボックスデザイン」と組み合わせることで…

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-3-05-a

AFFINGER6「箇条書きリスト」の作り方と、色&デザイン設定のカスタマイズ方法 1-3-05-b

↑ このような「枠線」や「網掛け」付きの箇条書きリストを作ることも可能となります🐥

「マイボックス」「見出し付きフリーボックス」は本当に便利だから、必ず押さえておくことをオススメするよ!
 
 

今回の記事はこちらの章に属しています

 第7章 記事投稿 編          

次の章はこちらからどうぞ

 第8章 収益化 編           

全9章のTOPページです

あずきのワードプレスブログ「完全初心者」ガイド

 

-WORDPRESS