広告 WORDPRESS

AFFINGER6「箇条書きリスト」の作り方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド】

AFFINGER6「箇条書きリスト」の作り方&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド/第7章/No.10】

専業ブロガー7年目のあかね猫です

当ブログでも愛用中の人気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の「スタイル」を使った、箇条書きリストのカスタマイズ方法

ということで、さっそく見ていきましょー🐥

 

▼ ACTION AFFINGER6の「購入~導入手順」はこちらから ▼

【2024年3月】AFFINGER6の購入&導入手順を徹底解説。子テーマの設定方法まで初心者向けに完全ガイド【WordPressブログ】

AFFINGER6の購入&導入手順を1から徹底解説。子テーマの設定方法まで初心者向けに完全ガイド【WordPressブログ】
【2024年3月】AFFINGER6の購入&導入手順を徹底解説。子テーマの設定方法まで初心者向けに完全ガイド【WordPressブログ】

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

インフォトップ 2023年度 WordPressテーマ売上

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!

AFFINGER6「箇条書きリスト」の作り方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド】

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

WordPress ヘッダー c-01

注意

 

ご紹介する内容は、いずれもWordPressの編集エディタが…

クラシックエディタ

の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「クラシックエディタとグーテンベルグってなに…?」という場合や、「クラシックエディタに切り替える方法(一瞬です!)」はこちらをどうぞ ↓ ※重要です

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド【2023年】
WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド

続きを見る

 

補足

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

Advanced Editor Toolsのおすすめな設定方法&使い方を30枚超の画像付きで徹底解説【WordPressのエディタ拡張プラグイン/クラシックエディタ版】
Advanced Editor Toolsのおすすめな設定方法&使い方を30枚超の画像付きで徹底解説【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

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

「マイボックス」「見出し付きフリーボックス」はほんとに便利だから、とりあえず押さえておくとオススメ!
 
 

人気記事

 

各章のTOPページを【ブックマーク】などしておくと、迷わずスムーズに進められます

ワードプレスブログ「完全初心者」ガイド!

全8章の「総合TOP」ページです

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

 
プロフィールカード bg-01
プロフィールカードアイコン main-02

あかね猫

専業ブロガー7年目 / 元アパレル(歴10年)/ 2024年からYouTubeも本格的に始めました!(旅行系チャンネル)

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS