
WordPressテーマ「SWELL」でリストブロックを中央に配置する方法を解説します。
コード不要の簡単な方法から、カスタマイズ方法まで詳しくご紹介します。
センタリングしたサンプル
実際にリストブロックを中央揃えにすると、このような見た目になります。
- リスト項目1
- リスト項目2
- リスト項目3
センタリングされたリストは、ランディングページや商品紹介ページなどで効果的です。
方法1: グループ化して横並び・センタリング(推奨)
Swellの標準機能を使った最も簡単な方法です。コードを書く必要がありません。
手順
- リストブロックを選択
- ツールバーの「︙」(3点リーダー)→「グループ化」をクリック
- グループ化されたブロックを選択し、右側サイドバーのブロックタブを開く
- 「グループ」→「横並びに変換」を選択
- 「レイアウト」→「中央揃え」を選択
これだけで完成です!
この方法のメリット
- コード不要で直感的に操作できる
- SWELLの標準機能なので安定している
- レスポンシブ対応も自動
- キャプションボックスなど他のブロックにも応用可能
方法2: カスタムCSSを使用(コードで細かく調整したい方向け)
より細かくカスタマイズしたい場合は、CSSを使用する方法もあります。
手順
ステップ1:CSSを追加
「外観」→「カスタマイズ」→「追加CSS」に以下のコードを追加します。
css
.swell-center-list {
text-align: center;
}
.swell-center-list ul,
.swell-center-list ol {
display: inline-block;
text-align: left;
margin: 0 auto;
}
ステップ2:クラスを追加
- リストブロックを選択
- グループ化する(方法1と同様)
- 右サイドバーの「高度な設定」を開く
- 「追加CSSクラス」に
swell-center-list
と入力
これで完成です。
この方法のメリット
- リストの幅やマージンなど、細かい調整が可能
- 一度CSSを設定すれば、クラス名を追加するだけで使い回せる
方法3:特定ページのみで使用する場合
特定のページだけでリストを中央揃えにしたい場合は、SWELLのカスタムCSS機能が便利です。
手順
- 投稿編集画面の下部にある「カスタムCSS&JS」セクションを開く
- 「CSS用コード」エリアに以下のコードを入力
css
.page-center-list {
text-align: center;
}
.page-center-list ul,
.page-center-list ol {
display: inline-block;
text-align: left;
}
- リストブロックをグループ化し、追加CSSクラスに
page-center-list
と入力
この方法なら、そのページだけでスタイルが適用されるため、サイト全体に影響を与えません。
どの方法を選ぶべき?
初心者・コードを書きたくない方
→ 方法1(グループ化) がおすすめ
複数ページで使い回したい・細かく調整したい方
→ 方法2(カスタムCSS) がおすすめ
特定のページだけで使いたい方
→ 方法3(ページ別CSS) がおすすめ
応用:キャプションボックスも中央揃えに
この方法は、リストブロックだけでなく、キャプションボックスなど他のブロックにも応用できます。
手順は同じです
- キャプションボックスを選択
- グループ化
- 横並び → 中央揃え
様々なブロックで活用してみてください。
他のテーマでも使える汎用的な方法をお探しの方へ
SWELLに限らず、どのWordPressテーマでも使えるCSS方法については、【WordPress】リスト全体を中央寄せしつつ、左揃えにするCSSの記事で詳しく解説しています。

まとめ
SWELLでリストブロックを中央揃えにする方法を3つご紹介しました。
最も簡単なのは、グループ化機能を使った方法です。
コード不要で直感的に操作でき、初心者の方にもおすすめです。
より細かくカスタマイズしたい場合は、CSSを使用する方法も選択できます。
ぜひ、記事のデザインに合わせて活用してください!
WordPress個別サポート
- 自分でやってみたけれどうまくいかない
- やりたいことはあるけど方法がわからない
そんなときはお気軽にご相談ください。
マンツーマンでサポートいたします。