
WordPressでリスト(箇条書き)を使うときに、
- リスト全体は中央寄せしたい
- でも、各項目のテキストは左揃えにしたい
こんなレイアウトにしたいときがあります。
今回は、そのようなときに使えるCSSサンプルをご紹介します。
どのWordPressテーマでも使える汎用的な方法です。
CSSを追記する場所
以下のいずれかの方法でCSSコードを追記します。
方法A:WordPressの管理画面から
- 外観 → カスタマイズ → 追加CSS
方法B:子テーマを使用している場合
- 子テーマの
style.css
に追記
方法C:特定のページのみで使用する場合
- 投稿編集画面で、カスタムHTMLブロックに
<style>
タグで記述 - または、テーマによってはページ別CSSエリアがある場合も
CSSコード
以下のコードをコピーして、上記の場所に貼り付けてください。
/* リスト中央寄せ(全体) */
.center-list-wrap {
text-align: center;
}
/* リスト項目(左揃え) */
.center-list__item {
text-align: left;
display: inline-block;
}
コードの解説
.center-list-wrap
(親要素)
text-align: center;
で子要素を中央寄せにします
.center-list__item
(子要素)
display: inline-block;
でリストをインラインブロック要素に変更text-align: left;
でリスト項目内のテキストを左揃えに維持
この2つのクラスを組み合わせることで、「全体は中央、テキストは左」というレイアウトが実現できます。
親要素にクラスを追加
リストを囲んでいるブロック(カラムブロックやグループブロックなど)を選択し、以下の手順でクラスを追加します。
- 右サイドバーの「ブロック」タブを開く
- 「高度な設定」を展開
- 「追加CSSクラス」の入力欄に以下を入力
center-list-wrap
子要素にクラスを追加
リストブロック本体を選択し、同様にクラスを追加します。
- リストブロックを選択
- 右サイドバーの「高度な設定」を展開
- 「追加CSSクラス」の入力欄に以下を入力
center-list__item
完成イメージ
設定後は、以下のようなレイアウトになります。
完成イメージ
設定後は、以下のようなレイアウトになります。
- リスト項目1
- リスト項目2
- リスト項目3
このように設定すると、
- リスト全体は中央寄せ
- 各項目のテキストは左揃え
という、バランスの取れた見やすいレイアウトが完成します。
カスタマイズ例
リストの幅を制限したい場合
リストの幅を制限したい場合は、以下のようにCSSを調整します。
css
.center-list__item {
text-align: left;
display: inline-block;
max-width: 300px; /* お好みの幅に調整 */
}
マージンを調整したい場合
リストの上下マージンを調整したい場合:
css
.center-list__item {
text-align: left;
display: inline-block;
margin: 20px auto; /* 上下のマージンを調整 */
}
番号付きリストにも対応させる場合
上記のコードは ul
(箇条書き)と ol
(番号付きリスト)の両方で使えます。
特に追加設定は不要です。
トラブルシューティング
中央揃えにならない場合
以下を確認してください。
- 親要素に
center-list-wrap
クラスが正しく追加されているか - 子要素(リストブロック)に
center-list__item
クラスが正しく追加されているか - CSSコードが正しく追加されているか(スペルミスがないか)
テキストが左揃えにならない場合
center-list__item
の text-align: left;
が効いていない可能性があります。
テーマのCSSで上書きされている場合は、以下のように !important
を追加してみてください。
css
.center-list__item {
text-align: left !important;
display: inline-block;
}
まとめ
この方法を使えば、リストを中央に配置しながらも、テキストの可読性を損なわないレイアウトが実現できます。
特に以下のような場面で効果的です。
- ランディングページの箇条書き
- 商品やサービスの特徴リスト
- サイドバーのないシンプルなページデザイン
- プレゼンテーション風のコンテンツ
ぜひお試しください!
SWELLには、より簡単にリストを中央揃えにできる方法があります。詳しくは【SWELL】リストブロックを中央揃えにする方法をご覧ください。

WordPress個別サポート
- 自分でやってみたけれどうまくいかない
- やりたいことはあるけど方法がわからない
そんなときはお気軽にご相談ください。
マンツーマンでサポートいたします。