LightningテーマのWordPressで固定ページが左寄せになる原因と中央寄せにする方法

ホームページ作成

WordPressにLightningテーマをインストールした後、固定ページ(固定ページの略としてPGと表記されることもあります)の本文が左寄せになってしまい、中央に配置したいというケースがあります。

Lightningは企業サイト制作でもよく利用される人気テーマですが、ページのレイアウト設定やブロック配置によって表示位置が変わることがあります。この記事では、Lightningテーマで固定ページを中央寄せにする方法や、左寄せになる原因について詳しく解説します。

Lightningテーマで固定ページが左寄せになる主な原因

Lightningで固定ページが左側に寄って表示される場合、WordPress本体の問題ではなく、ページのレイアウト設定や使用しているブロックの配置が原因であることが多いです。

特にLightningでは、ページごとに「1カラム」「サイドバーあり」「全幅レイアウト」などの設定ができるため、初期設定のままだと本文エリアが意図した位置にならない場合があります。

また、段落ブロックやグループブロックなどの幅設定によって、本文だけが左側に配置されているように見えることもあります。

固定ページのレイアウト設定を確認する

まず確認したいのが、固定ページごとのレイアウト設定です。

WordPress管理画面から「固定ページ」→対象ページを開き、右側の設定メニューを確認します。Lightningではページ属性やレイアウト関連の項目から表示形式を変更できます。

中央に本文を配置したい場合は、サイドバーなしの1カラム設定や全幅表示に変更すると改善することがあります。

例えば、会社案内ページやお問い合わせページなど、本文だけを見せたいページでは1カラム表示にすると自然な中央配置になります。

ブロックエディターで本文を中央寄せする方法

文章や画像などのコンテンツ単位で中央寄せしたい場合は、WordPressのブロックエディターから設定できます。

編集画面で中央寄せしたい段落ブロックを選択し、ツールバーにある「テキストを中央寄せ」をクリックします。

画像やボタンの場合も、それぞれのブロック設定から配置を中央に変更できます。

ただし、この方法は文字や個別ブロックの位置を変更するものなので、ページ全体のレイアウトを中央化したい場合はテーマ側の設定変更が必要です。

Lightningの全幅レイアウトを利用する方法

Lightningでは、ページ全体を広く表示できるレイアウト機能があります。

固定ページ編集画面で「ページ属性」やLightning専用設定を確認し、「1カラム」や「全幅」関連の設定を選択すると、コンテンツ領域を広く使うことができます。

例えば、トップページやランディングページのようなデザインでは、通常の本文幅よりも全幅レイアウトを使用したほうが見栄えが良くなります。

CSSで固定ページを中央寄せに調整する方法

テーマ設定やブロック設定で解決しない場合は、追加CSSを利用して中央寄せにする方法があります。

WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」からCSSを追加できます。

例えば本文エリアを中央配置にしたい場合は、以下のようなCSSで調整できます。

.site-content {text-align:center;}

ただし、この方法ではサイト全体の表示に影響する可能性があります。特定の固定ページだけ変更したい場合は、ページIDや専用クラスを指定して適用範囲を限定することをおすすめします。

中央寄せにするときの注意点

すべてのページを中央寄せにすれば見た目が良くなるとは限りません。

文章量が多いページでは中央揃えより左揃えのほうが読みやすく、ブログ記事や説明ページでは一般的に左寄せが適しています。

一方で、タイトルページ、会社案内、キャンペーンページなどでは中央寄せが効果的です。ページの目的に合わせて設定を変更すると、より見やすいサイトになります。

まとめ

Lightningテーマで固定ページが左寄せになる場合は、まずページごとのレイアウト設定やブロック設定を確認することが重要です。

中央寄せにしたい場合は、1カラム表示への変更、ブロックの配置変更、必要に応じて追加CSSを利用することで調整できます。

Lightningは設定項目が多く柔軟なテーマなので、ページの目的に合わせてレイアウトを変更することで、見やすく整ったWordPressサイトを作成できます。

コメント

タイトルとURLをコピーしました