【WordPress】リスト全体を中央寄せしつつ、左揃えにするCSS

WordPressでリスト(箇条書き)を使うときに、

  • リスト全体は中央寄せしたい
  • でも、各項目のテキストは左揃えにしたい

こんなレイアウトにしたいときがあります。

今回は、そのようなときに使えるCSSサンプルをご紹介します。
どのWordPressテーマでも使える汎用的な方法です。

目次

以下のいずれかの方法でCSSコードを追記します。

方法A:WordPressの管理画面から

  • 外観 → カスタマイズ → 追加CSS

方法B:子テーマを使用している場合

  • 子テーマの style.css に追記

方法C:特定のページのみで使用する場合

  • 投稿編集画面で、カスタムHTMLブロックに <style> タグで記述
  • または、テーマによってはページ別CSSエリアがある場合も

サイト全体で使用する場合は方法AまたはB、特定のページのみで使用する場合は方法Cがおすすめです。

以下のコードをコピーして、上記の場所に貼り付けてください。

/* リスト中央寄せ(全体) */
.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つのクラスを組み合わせることで、「全体は中央、テキストは左」というレイアウトが実現できます。

リストを囲んでいるブロック(カラムブロックやグループブロックなど)を選択し、以下の手順でクラスを追加します。

  1. 右サイドバーの「ブロック」タブを開く
  2. 「高度な設定」を展開
  3. 「追加CSSクラス」の入力欄に以下を入力
center-list-wrap

リストブロック本体を選択し、同様にクラスを追加します。

  1. リストブロックを選択
  2. 右サイドバーの「高度な設定」を展開
  3. 「追加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(番号付きリスト)の両方で使えます。
特に追加設定は不要です。

中央揃えにならない場合

以下を確認してください。

  1. 親要素に center-list-wrap クラスが正しく追加されているか
  2. 子要素(リストブロック)に center-list__item クラスが正しく追加されているか
  3. CSSコードが正しく追加されているか(スペルミスがないか)

テキストが左揃えにならない場合

center-list__itemtext-align: left; が効いていない可能性があります。
テーマのCSSで上書きされている場合は、以下のように !important を追加してみてください。

css

.center-list__item {
    text-align: left !important;
    display: inline-block;
}

この方法を使えば、リストを中央に配置しながらも、テキストの可読性を損なわないレイアウトが実現できます。

特に以下のような場面で効果的です。

  • ランディングページの箇条書き
  • 商品やサービスの特徴リスト
  • サイドバーのないシンプルなページデザイン
  • プレゼンテーション風のコンテンツ

ぜひお試しください!

SWELLテーマをお使いの方へ

SWELLには、より簡単にリストを中央揃えにできる方法があります。詳しくは【SWELL】リストブロックを中央揃えにする方法をご覧ください。

あわせて読みたい
【SWELL】リストブロックを中央揃えにする方法 WordPressテーマ「SWELL」でリストブロックを中央に配置する方法を解説します。コード不要の簡単な方法から、カスタマイズ方法まで詳しくご紹介します。 センタリングし...
  • 自分でやってみたけれどうまくいかない
  • やりたいことはあるけど方法がわからない

そんなときはお気軽にご相談ください。
マンツーマンでサポートいたします。

目次