見た目がクリーンで整理されたウェブページは、ユーザー体験を向上させ、サイトのプロフェッショナルな印象を強化します。
WordPressのブロックエディタ（Gutenberg）を活用することで、テキスト、画像、ボタンなどの要素を簡単に中央揃えに設定できます。
この記事では、WordPressで様々なブロックを中央揃えにする具体的な方法と、カスタムCSSを用いた高度なカスタマイゼーション方法を紹介します。
ブロック別の中央揃え方法
ブロックエディタでは、ほとんどのブロックにアライメントオプションが用意されています。
以下は、主要なブロックタイプごとの中央揃え手順です。
テキストブロック（段落、見出し）
- 段落ブロックや見出しブロックでテキストを選択した状態で、ブロックツールバーのアライメントオプションから「中央揃え」をクリックします。
- この操作でテキストは容易に中央に配置され、見た目がすっきりとします。
画像ブロック
- 画像ブロックを選択すると表示されるツールバーで、「中央揃え」アイコンをクリックします。
- これにより画像がページの中央に配置され、バランスの取れたデザインが実現します。
ボタンブロック
- ボタンブロックは、ツールバーのアライメントオプションを使って簡単に中央揃えに設定できます。
- このオプションを活用すると、CTA（Call To Action）ボタンなどの重要な要素を強調しやすくなります。
カスタムCSSを使用した中央揃え
標準の設定では対応できない場合や、さらに細かい調整をしたい場合は、カスタムCSSを利用する方法が有効です。
以下に、CSSを用いてブロックを中央揃えにする基本的なコードを示します。
.custom-center-align {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}このCSSクラスを、ブロックの「詳細設定」にある「追加のCSSクラス」欄に入力します。
この方法では、フレキシブルボックス（Flexbox）を使用して、要素を容器の中央に配置します。
さらなるカスタマイゼーション
場合によっては、ブロックのマージンやパディングも調整する必要があります。
これらのスタイルは、サイト全体のデザインに一貫性を持たせるために重要です。
以下のCSSは、ブロックの外側の余白を調整し、より洗練されたデザインを実現するための例です。
.custom-center-align {
margin: 20px auto;
padding: 10px;
}まとめ
WordPressのブロックエディタを使用すると、プロのようなページデザインを自分で簡単に作成することができます。
中央揃えはその一例であり、ブロック毎の簡単な操作やカスタムCSSの適用により、見た目に美しいウェブページを実現することが可能です。
適切なデザインの適用は、訪問者のエンゲージメントを高めるためにも重要ですので、ぜひこれらのテクニックを活用してみてください。
以上、WordPressでコンテンツを中央揃えする方法についてでした。
最後までお読みいただき、ありがとうございました。
