WordPressテーマSWELLには、チェックボックス（チェックリスト）機能が標準で備わっています。ブログ記事の箇条書きをそのまま使うと単調な印象になりがちですが、SWELLのリスト装飾を活用すると、読者が情報を整理しやすい見た目に変えられます。
この記事では、SWELLのチェックボックス機能の概要から、実際の設定手順、さらにグループ化や色のカスタマイズまで順を追って整理します。ブログを始めたばかりの方や、記事のデザインをもう少し工夫したいと感じている方にとって参考になる内容です。
WordPressの操作が初めてでも手順通りに進めれば設定できる内容ですので、ぜひ記事作成のときに活用してみてください。
SWELLのチェックボックスとはどんな機能か
SWELLのチェックボックスは、リスト装飾の一種として提供されているデザインスタイルです。通常の箇条書きと何が違うのか、どこに向いているのかを整理しておくと、使い場面が分かりやすくなります。
リスト装飾の一つとして用意されている
SWELLでは、リストブロックに対して複数のデザインスタイルを適用できます。スタイルの種類には、デフォルト・目次風・チェック・マル・三角・バツ・丸数字・注釈などがあります。このうち「チェック」スタイルを選ぶと、各リスト項目の先頭に黄緑色のチェックマークが表示されます。これがSWELLにおけるチェックボックスの正体です。
Markdownやショートコードを使わなくてもブロックエディター上で完結するため、HTMLやCSSの知識がなくても操作できます。操作はすべてサイドバーの「スタイル」パネルから行います。
チェックスタイルが向いている場面
チェックスタイルのリストは、「確認すべきポイント」「手順の一覧」「メリットの列挙」のような場面に向いています。読者が情報を一目でスキャンできるため、長い文章を読む前に要点をつかんでもらいたいときに役立ちます。
一方で、注意事項やデメリットを列挙する場合は「バツ」スタイルが向いており、場面に合ったスタイルを選ぶことで記事全体の読みやすさが高まります。スタイルの使い分けを意識するだけで、記事のクオリティが変わってきます。
クラシックエディターとブロックエディターの違い
SWELLはクラシックエディター・ブロックエディターの両方でリスト装飾を使えます。ブロックエディターでは、リストブロックを選択した状態でサイドバーの「スタイル」パネルからデザインを選ぶだけです。クラシックエディターでは、ツールバーの「スタイル」→「リスト装飾」から同様の操作が行えます。
現在のWordPressはブロックエディターが標準になっているため、これからブログを始める場合はブロックエディターでの操作を覚えておくとスムーズです。操作の流れは次の章で詳しく整理します。
・箇条書きに黄緑のチェックマークを付けられる
・コード不要、サイドバーから選ぶだけで適用できる
・クラシック・ブロックエディターの両方に対応している
- リスト装飾は「チェック」を含む8種類から選べる
- ブロックエディターではサイドバーの「スタイル」パネルで設定する
- チェックスタイルはポイント列挙・手順確認・メリット一覧に向いている
- 注意事項やデメリットには「バツ」スタイルが合わせやすい
SWELLでチェックリストを作る手順
ここでは、ブロックエディターでSWELLのチェックリストを作成する手順を整理します。大きく分けて「リストブロックを使う方法」と「リスト入りグループブロックを使う方法」の2つがあり、目的に合わせて選べます。
リストブロックにチェックスタイルを適用する方法
最も基本的な手順は次の通りです。まず編集画面の「+」ボタンからリストブロックを挿入し、テキストを入力します。入力が終わったら、右サイドバーの「スタイル」パネルを開き、「チェック」を選択します。これだけで、各リスト項目の先頭にチェックマークが付きます。
すでに入力済みのテキストをリスト化したい場合は、段落ブロックのテキストを選択した状態でツールバー左端のアイコンをクリックし、「リスト」を選ぶとリストブロックに変換できます。その後、同様にサイドバーでスタイルを設定します。
リスト入りグループブロックを使う方法
チェックリストを枠線で囲みたい場合は、「リスト入りグループ」ブロックを使うと効率的です。「+」ボタンから「リスト入りグループ」を選ぶと、最初から枠線付きのリストが挿入されます。グループ化された状態でブロック全体を選択すると、サイドバーから16種類のスタイルを選択でき、「チェック」スタイルも含まれています。
グループ全体を選択するには、サイドバーの「親のリストブロックを選択」ボタンをクリックするか、画面下部のナビゲーションで「グループ」をクリックします。この操作に慣れておくと、スタイル変更がスムーズになります。
汎用パターンから呼び出す方法
SWELLには、デザインがあらかじめ設定されたブロックパターンも用意されています。「+」ボタンをクリックして「パターン」タブを選び、「[SWELL]汎用パターン」の中からリストのパターンを選択します。「枠線付きのリスト」「薄い枠線と背景付きのリスト」「ポイントグループ」の3種類が利用でき、テキスト部分を書き換えるだけで使えます。
パターンを選んだあとでもスタイルは変更できるため、まずパターンを挿入してからチェックスタイルに切り替えるという流れでも問題ありません。時間を節約したいときに向いています。
| 方法 | 操作のしやすさ | 枠線の有無 | 向いている場面 |
|---|---|---|---|
| リストブロック | シンプル | なし（単体） | シンプルな箇条書き |
| リスト入りグループ | やや慣れが必要 | あり | 枠線付きリストを作りたいとき |
| 汎用パターン | 最も手軽 | あり | 素早くデザインを整えたいとき |
- リストブロックはサイドバーの「スタイル」でチェックを選ぶだけで設定できる
- 枠線付きにしたい場合はリスト入りグループブロックが便利
- 汎用パターンを使うとデザイン済みのリストをすぐに挿入できる
- 既存の段落テキストをリスト化してからスタイルを変えることもできる
チェックリストのデザインをカスタマイズする方法
SWELLのチェックリストはスタイル適用だけでなく、色・下線・横並びといった細かい設定も変えられます。記事の内容やテーマカラーに合わせてカスタマイズしておくと、ブログ全体の統一感が出やすくなります。
チェックアイコンの色を変える
チェックアイコンの色はSWELL設定から変更できます。WordPress管理画面の「SWELL設定」→「エディター設定」→「カラーセット」タブの中に「リスト設定」があり、チェック・マル・三角・バツ・丸数字の5種類のアイコンに対してそれぞれ色を設定できます。
ここで設定した色はサイト全体のリストに反映されます。ブログのテーマカラーに合わせて設定しておくと、記事ごとに色を変える手間がなくなります。変更後は「変更を保存」を押すのを忘れないようにしましょう。
下線付きスタイルと横並びの設定
サイドバーの「リストの追加スタイル」から「下線を付ける」を選ぶと、各リスト項目の下に区切り線が入り、視覚的な間隔が広がります。情報量が多いリストでも読み進めやすくなるため、長い項目が続く場面で効果的です。
「横並び」を選ぶとリスト項目が横に並ぶレイアウトになります。短いキーワードを並べる場合や、スペースを有効活用したい場面に向いています。ただし、テキストが長いと見切れることがあるため、横並びを使う際は項目の文字数を短めにしておくとよいでしょう。
背景色・テキストカラーの設定
リストブロック全体を選択した状態で、サイドバーの「スタイル」タブからテキスト色と背景色を個別に変えられます。リストブロック全体を選択するには、サイドバーの「親のリストブロックを選択」ボタンを使います。このボタンが表示されていない場合は、画面右上の歯車アイコンをクリックしてサイドバーを表示してください。
背景色を付けるとリストが視覚的に目立ち、注目してほしい情報を強調できます。ただし、色を多用するとかえって読みにくくなるため、強調したい箇所に絞って使うのが基本です。
・アイコン色：SWELL設定 → エディター設定 → カラーセット → リスト設定
・下線・横並び：サイドバーの「リストの追加スタイル」
・背景色・テキスト色：サイドバーの「スタイル」タブ（リスト全体を選択した状態）
- アイコン色はSWELL設定から事前に登録しておくとサイト全体に反映される
- 「下線を付ける」追加スタイルはリスト項目が多い場合に読みやすくなる
- 横並びレイアウトは短いキーワード一覧に向いている
- 背景色・テキスト色はリスト全体を選択してから設定する
リストをグループ化して装飾を加える方法
チェックリストを枠線で囲んだり、見出し付きのボックスにしたりしたい場合は、グループ化やキャプションボックスとの組み合わせが有効です。ここでは実践でよく使われる応用パターンを整理します。
リストをグループ化して枠線を付ける
リストブロック単体では枠線を付けられませんが、グループ化することで枠線スタイルの設定ができるようになります。手順はリストブロック全体を選択した状態でツールバーの縦三点リーダー（︙）をクリックし、「グループ化」を選ぶだけです。グループ化が完了すると、サイドバーの「ボーダー設定」から「線・二重線・点線・浮き出し」の4種類の枠線スタイルを選べるようになります。
さらに「スタイル設定」では、ストライプ・方眼・角に折り目・チェック・アラート・メモなど16種類のスタイルが利用できます。チェックリストにポイント・チェック・メモスタイルを組み合わせると、情報の種類を視覚的に区別しやすくなります。
キャプションボックスと組み合わせてタイトル付きリストを作る
SWELLのキャプションボックスブロックを使うと、タイトル付きの枠線リストを作れます。「+」ボタンから「キャプションボックス」を挿入し、その中でリストブロックを追加する手順です。キャプションボックスには7種類のスタイルがあり、タイトルの色や枠線のデザインを変えられます。
タイトル部分にセクションの主題を入れておくと、読者がリストの内容を事前に把握しやすくなります。特にチェックリストを「確認事項」「ポイント」といったラベルで囲む場合に効果的です。
メリット・デメリット表に応用する
リッチカラムブロックとキャプションボックスを組み合わせると、左右2列のメリット・デメリット表を作れます。左カラムにキャプションボックスを挿入してチェックスタイルのリストを入れ、右カラムにはバツスタイルのリストを入れると、視覚的に対比させたレイアウトが完成します。
この構成は商品レビュー記事やツール比較記事でよく使われます。チェックとバツのアイコン色をあらかじめ設定しておくと、記事ごとに色を調整する手間が省けます。
Q：グループ化後に元のリストブロックに戻せますか？
A：グループ化を解除するには、グループブロックを選択した状態でツールバーの縦三点リーダー（︙）から「グループ解除」を選択します。操作を間違えた場合はCtrl＋Zで元に戻せます。
Q：キャプションボックスの中でチェックスタイルが反映されないことはありますか？
A：キャプションボックス内のリストを選択した状態でサイドバーの「スタイル」が表示されていない場合は、画面右上の歯車アイコンを押してサイドバーを開いてから設定してください。
- グループ化するとボーダー設定・スタイル設定の両方が使えるようになる
- キャプションボックスを使うとタイトル付きの装飾リストを作れる
- リッチカラム＋キャプションボックスでメリット・デメリット表が作れる
- 操作ミスはCtrl＋Zで元に戻せる
初心者がつまずきやすいポイントと対処法
SWELLのリスト装飾はシンプルな操作で使えますが、慣れないうちはいくつかの場面で迷いやすいポイントがあります。よくある疑問をまとめておきます。
サイドバーのスタイルパネルが表示されない
リストブロックを選択してもサイドバーに「スタイル」パネルが表示されないことがあります。この場合は、まず画面右上の歯車アイコンをクリックしてサイドバーを表示させてください。サイドバーが表示されている場合でも、リストブロック全体ではなく個別の項目だけが選択されている可能性があります。
リスト全体を選択するには、サイドバーに表示される「親のリストブロックを選択」ボタンをクリックするか、画面下部のナビゲーションで「リスト」を選択します。この操作に慣れておくとスタイル設定がスムーズになります。
グループ化の操作が見つからない
グループ化オプションはブロックツールバーの縦三点リーダー（︙）の中にあります。このアイコンはブロックを選択した状態でツールバーの右端に表示されます。表示されない場合は、リストブロック全体が選択されていない可能性があるため、前述の方法でリスト全体を選択してから操作してください。
グループ化したあとに「スタイル」パネルが変わるのは正常な動作です。グループ全体を選択すると、リストブロック選択時とは異なるスタイルオプションが表示されます。
アイコン色の設定が反映されないとき
SWELL設定でアイコン色を変更したあとに「変更を保存」を押し忘れると、設定が反映されません。保存後もブラウザをリロードしてエディターを確認すると、変更が反映されているかどうかを確認できます。また、既存の記事に反映されるまでに少し時間がかかる場合もあります。
個別の記事だけ色を変えたい場合は、リストブロック全体を選択した状態でサイドバーの「スタイル」タブからテキスト色を直接設定する方法が使えます。サイト全体の設定と記事個別の設定を使い分けるとカスタマイズの柔軟性が高まります。
・スタイルが出ない → リスト全体が選択されているか確認
・グループ化が見つからない → ツールバーの︙（縦三点リーダー）を探す
・色変更が反映されない → 「変更を保存」を押したか確認してリロード
- スタイルパネルが表示されない場合はリスト全体が選択されているか確認する
- グループ化はツールバーの縦三点リーダー（︙）→「グループ化」から行う
- SWELL設定の色変更は保存後にリロードして確認する
- 記事個別の色設定はサイドバーのスタイルタブで上書きできる
まとめ
SWELLのチェックボックス（チェックリスト）は、リストブロックにチェックスタイルを適用するだけで使えるシンプルな機能です。コードの知識がなくても、サイドバーの操作だけで見た目を整えられます。
まず試してほしいのは、記事の中にある箇条書きにチェックスタイルを適用してみることです。リストブロックを選択してサイドバーの「スタイル」→「チェック」を選ぶだけで見た目が変わります。枠線を付けたい場合はグループ化かリスト入りグループブロックを使うと一歩進んだデザインになります。
操作に慣れてきたら、キャプションボックスやリッチカラムとの組み合わせも試してみてください。読者にとって読みやすい記事の積み重ねが、ブログの信頼につながっていきます。
当ブログの主な情報源
