【SWELL】リストブロックを中央揃えにする方法

WordPressテーマ「SWELL」でリストブロックを中央に配置する方法を解説します。
コード不要の簡単な方法から、カスタマイズ方法まで詳しくご紹介します。

目次

実際にリストブロックを中央揃えにすると、このような見た目になります。

  • リスト項目1
  • リスト項目2
  • リスト項目3

センタリングされたリストは、ランディングページや商品紹介ページなどで効果的です。

Swellの標準機能を使った最も簡単な方法です。コードを書く必要がありません。

手順

  1. リストブロックを選択
  2. ツールバーの「︙」(3点リーダー)→「グループ化」をクリック
  3. グループ化されたブロックを選択し、右側サイドバーのブロックタブを開く
  4. 「グループ」→「横並びに変換」を選択
  5. 「レイアウト」→「中央揃え」を選択

これだけで完成です!

この方法のメリット

  • コード不要で直感的に操作できる
  • SWELLの標準機能なので安定している
  • レスポンシブ対応も自動
  • キャプションボックスなど他のブロックにも応用可能

より細かくカスタマイズしたい場合は、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. リストブロックを選択
  2. グループ化する(方法1と同様)
  3. 右サイドバーの「高度な設定」を開く
  4. 「追加CSSクラス」に swell-center-list と入力

これで完成です。

この方法のメリット

  • リストの幅やマージンなど、細かい調整が可能
  • 一度CSSを設定すれば、クラス名を追加するだけで使い回せる

特定のページだけでリストを中央揃えにしたい場合は、SWELLのカスタムCSS機能が便利です。

手順

  1. 投稿編集画面の下部にある「カスタムCSS&JS」セクションを開く
  2. 「CSS用コード」エリアに以下のコードを入力

css

.page-center-list {
  text-align: center;
}

.page-center-list ul,
.page-center-list ol {
  display: inline-block;
  text-align: left;
}
  1. リストブロックをグループ化し、追加CSSクラスに page-center-list と入力

この方法なら、そのページだけでスタイルが適用されるため、サイト全体に影響を与えません。

初心者・コードを書きたくない方

方法1(グループ化) がおすすめ

複数ページで使い回したい・細かく調整したい方

方法2(カスタムCSS) がおすすめ

特定のページだけで使いたい方

方法3(ページ別CSS) がおすすめ

この方法は、リストブロックだけでなく、キャプションボックスなど他のブロックにも応用できます。

手順は同じです

  1. キャプションボックスを選択
  2. グループ化
  3. 横並び → 中央揃え

様々なブロックで活用してみてください。

SWELLに限らず、どのWordPressテーマでも使えるCSS方法については、【WordPress】リスト全体を中央寄せしつつ、左揃えにするCSSの記事で詳しく解説しています。

あわせて読みたい
【WordPress】リスト全体を中央寄せしつつ、左揃えにするCSS WordPressでリスト(箇条書き)を使うときに、 リスト全体は中央寄せしたい でも、各項目のテキストは左揃えにしたい こんなレイアウトにしたいときがあります。 今回は...

SWELLでリストブロックを中央揃えにする方法を3つご紹介しました。

最も簡単なのは、グループ化機能を使った方法です。
コード不要で直感的に操作でき、初心者の方にもおすすめです。

より細かくカスタマイズしたい場合は、CSSを使用する方法も選択できます。

ぜひ、記事のデザインに合わせて活用してください!

  • 自分でやってみたけれどうまくいかない
  • やりたいことはあるけど方法がわからない

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

目次