ワードプレス

【おすすめは3タイプ】AFFINGER5で「箇条書きボックス」を入れる手順【WordPressブログ】

affinger-bullet-point-20200311_ec



今回は、このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」における…

「箇条書きボックス」を使う手順

をご紹介していきたいと思います

まず「AFFINGER5」で作れる箇条書きボックスには、いくつかのパターンがあります

すべて紹介してたら長くなってしまうので、今回は僕が実際によく使ってる「3つ」のおすすめタイプについて解説していきますね

ズバリ、次の3つです

affinger-bullet-point-20200311_2-06

↑「ボックス×箇条書き」のパターン

affinger-bullet-point-20200311_3-07

↑「リスト×箇条書き」のパターン(チェックバージョン)

affinger-bullet-point-20200311_4-07

↑「リスト×箇条書き」のパターン(ナンバリングバージョン)

作り方は超簡単です

ちなみに、「テーマ固有」ではなく「WordPress標準」の箇条書きは ↓ をどうぞ♪

wp-bullet-point-20200312_ec
WordPressブログで、記事内に「箇条書き」を作る手順【番号なし/番号付きリストの作り方】

続きを見る

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

プラグインの種類によっては、導入済みのテーマや他のプラグインとの干渉などでWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめのバックアップをおすすめします

関連:WordPressプラグイン「BackWPup」の基本的な設定方法【ブログに必須なバックアップ】

このブログのWordPress環境

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

AFFINGER5における、WordPressブログで「箇条書きボックス」を作る手順【おすすめ3パターン】

はじめに:プラグイン「TinyMCE Advanced」を使う

pc-work-202001_01

まず、今回の「AFFINGER5における箇条書きボックス作成」の大前提として…

  • TinyMCE Advanced

というプラグインを導入します

WordPressにおける、機能アイコンのバリエーションを拡張できるツールです

affinger-bullet-point-20200311_1-01

WordPressとセットと言っても過言じゃないくらい有名なプラグイン!

ちなみに導入と設定の手順は ↓ から♪

wordpress-tinymce-advanced-202001-ec
WordPressプラグイン「TinyMCE Advanced」の基本的な設定方法と使い方【ブログのビジュアルエディタを拡張】

続きを見る

10分もかからないよ!

ということで、「TinyMCE Advanced」を入れたらさっそく本題に進みましょう🐥

【おすすめ①】ボックス×箇条書き

pc-work-202001_02

「AFFINGER5」で僕が愛用してる、おすすめな「箇条書きボックス」。 まずその1つ目は…

ボックス×箇条書き

のパターンです

いくつかのバリエーションがあって、特によく使うのが…

affinger-bullet-point-20200311_2-06

↑ この「黄色ボックス」と…

affinger-bullet-point-20200311_2-09

↑ この「薄赤ボックス」と…

affinger-bullet-point-20200311_2-10

↑ この「グレーボックス」です

まずは通常の「箇条書き」と同じように…

affinger-bullet-point-20200311_2-01

↑ 箇条書きにしたいテキストを、丸ごと選択しましょう

つづいて、画面上部の…

affinger-bullet-point-20200311_2-02

↑ スタイル > ボックス にカーソルを合わせます。 すると…

affinger-bullet-point-20200311_2-03

↑「黄色・薄赤・グレー…」といった選択肢が出てきます。 ここで、箇条書きボックスの「色パターン」を指定できます

試しに「黄色」を選んでみると…

affinger-bullet-point-20200311_2-04

↑ テキストが、「黄色いボックス」で囲われます

このままテキストが選択されてる状態で、今度は…

affinger-bullet-point-20200311_2-05

↑「番号なしリスト」アイコンをクリックしましょう。 すると…

affinger-bullet-point-20200311_2-06

↑ できました。 黄色いボックスのなかに、箇条書きが作れてます

ちなみに、さきほどの「番号なしリスト」のところで、代わりに…

affinger-bullet-point-20200311_2-07

↑「番号付きリスト」をクリックすると…

affinger-bullet-point-20200311_2-08

↑ ナンバリングバージョンに変わります

「ボックス×箇条書き」の使い方は、これでOK🐥

ご参考までに、「黄色・薄赤・グレー」の使い分けとしては…

  • 黄色 → 通常使い(柔らかい印象にしたいとき)
  • 薄赤 → 「注意」や「警告」など、特に大事なポイント
  • グレー → 通常使い(堅い印象にしたいとき)

こんな感じで僕は使い分けてます

つづいて、リスト×箇条書き!

【おすすめ②】リスト×箇条書き(チェックバージョン)

2つ目のおすすめ箇条書きボックスは…

リスト×箇条書き(チェックバージョン)

のパターンです

具体的には…

affinger-bullet-point-20200311_3-07

↑ こういうの

1つ目の「ボックス×箇条書き」よりも、チェックリスト感(←語彙力)をより強調したいときに便利です

まずは、さきほどと同じように…

affinger-bullet-point-20200311_3-01

↑ 箇条書きにしたいテキストを、丸ごと選択します。 つづいて、画面上部の…

affinger-bullet-point-20200311_3-02

↑ スタイル > リスト を選択しましょう。 すると…

affinger-bullet-point-20200311_3-03

↑ また選択肢がたくさん出てきます

ここは、「チェックリスト(番号なしリスト)」を選びましょう。 すると…

affinger-bullet-point-20200311_3-04

↑ テキストの周りが、「薄いグレーの点線」で囲われます

つづいて、このままテキストが選択されてる状態で…

affinger-bullet-point-20200311_3-05

↑ 画面上部の「番号なしリスト」をクリックすると…

affinger-bullet-point-20200311_3-06

↑ できました。 編集画面ではわかりづらいですが、プレビューで見てみると…

affinger-bullet-point-20200311_3-07

↑ チェックアイコンと枠線付きの、箇条書きボックスになりました

ちなみにチェックアイコンやボックス枠線の「色設定」は、自由に変えることもできます

具体的な手順は ↓ から♪

affinger-color-setting-bullet-point-20200225_ec
AFFINGER5で「箇条書きボックス」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

最後に、これのナンバリングバージョンを見ていきましょう🐥

基本の流れは同じだけど、1つだけ「大事な注意ポイント」があるよ!

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

【おすすめ③】リスト×箇条書き(ナンバリングバージョン)

3つ目のおすすめ箇条書きボックスは…

リスト×箇条書き(ナンバリングバージョン)

です

具体的には…

affinger-bullet-point-20200311_4-07

↑ これのこと

「~~~~を作る3つのステップ!」みたいな順番を付けたいときに、凄く便利です

まずは同じように…

affinger-bullet-point-20200311_4-01

↑ 箇条書きにしたいテキストを、丸ごと選択します。 つづいて、画面上部の…

affinger-bullet-point-20200311_4-02

↑ スタイル > リスト を選択しましょう

ここまでは、2つ目と一緒!

つづいて…

affinger-bullet-point-20200311_4-03

↑ 「ナンバリング(番号付きリスト)」を選びます

注意ポイント

ここで、「チェックリスト(番号なしリスト)」の方を選んでしまうと、最終的にエラー表示になるので気をつけましょう

affinger-bullet-point-20200311_4-04

↑ テキストが、また「薄いグレーの点線」で囲われました

このままテキストが選択されてる状態で…

affinger-bullet-point-20200311_4-05

↑ 画面上部の「番号付きリスト」をクリックすると…

affinger-bullet-point-20200311_4-06

↑ できました。 またプレビューでチェックしてみると…

affinger-bullet-point-20200311_4-07

↑ 通常の「番号付きリスト」よりも、キャッチーで強調された箇条書きになりました

ちなみにこのナンバリングやボックス枠線の「色設定」も、自由に変更できます

具体的な手順は ↓ から♪

affinger-color-setting-bullet-point-20200225_ec
AFFINGER5で「箇条書きボックス」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

今回の「AFFINGER5における箇条書きボックス作成」については、これで以上です

大変お疲れさまでした♪

あずき🐥

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。