WP画像の中央揃えができない。不具合の解決方法。

画像が中央に配置されない。

WPで中央に配置されない

ワードプレスで作ったホームページに画像を配置すると、管理画面では左右中央に配置されているのに、プレビュー表示すると左に寄っているという事例があった。

使っているテーマはBizVektorで、画像の配置は普通にできます。通常は問題なく中央に配置できるはずですが、何らかの原因があると思われますが、わかりません。それを探求するのも一つの解決方法ですが、今回は一番簡単な解決方法をご紹介します。

簡単な解決方法

  • テーマの機能から画像を配置するのをやめます。
  • 普通にHTMLで画像を配置することで解決します。

固定ページの管理画面から、

普通は「画像を配置」を追加してメディアから画像を選択またはPCからアップロードしますが、「カスタムHTML」を選択し、そこへHTMLを書き込みます。

画像中央配置

画像配置のHTML

画像中央配置

画像配置には以下のコードを書き込みました。

<a href=”リンク先URL“><div style=”text-align: center”><img src=”画像のアドレス” width=”150″ height=”150″></div></a>

青字の部分を追加することで、画像がセンター揃えになります。左揃えならcenterをleft、右ならrightに変えます。

画像中央配置

参考URL：https://designya.yokohama/

追記

上記は2023年に書いた記事ですが、最近ではホームページの崩れ等の解決にはAIを使うことが多くなっていますので、上記の場合の解決方法をgoogleのAI、Geminiに聞いて解決できるかやってみます。

ホームページでお困りの方はお問い合わせ下さい

ワードプレスのテーマはBizVektorです。

画像を配置して、配置→中央揃えを選択しています。

しかし、プレビューすると画像は左に配置され地ます。

Geminiに聞いた結果

早速Google Geminiににいてみた。以下は解答。

WordPressで「センター揃え」に設定しても画像が左に寄ってしまう場合、いくつかの原因が考えられます。特にテンプレート（テーマ）のCSS設定が優先されていることが多いです。

コードが苦手な方でも試しやすい方法を、簡単な順に3つご紹介します。

1. 「ブロック」をグループ化して配置する（おすすめ）

WordPressの編集画面（ブロックエディタ）で、その画像ブロックを選択し、ツールバーから「グループ」に変更してみてください。

  1. 画像をクリックして選択します。
  2. ツールバーの左端にある「画像アイコン」をクリックし、**「グループ」**を選択します。
  3. その「グループ」全体の配置設定で「中央揃え」に設定し直すと、中にある画像も強制的にセンターに配置されることが多いです。

1.の結果

ツールバーの左端にある「画像アイコン」は発見なかったが、グループ化はできた。しかしプレビューでも画像は中央に配置されていない。キャッシュを疑ったが、キャッシュを捨てても結果は同じだった。

2. 「追加CSS」で強制的にセンターにする

もし上記で直らない場合、テーマの基本設定が邪魔をしています。以下の手順で、その画像だけを狙ってセンターにする設定を追加できます。

  1. WordPressの管理画面で [外観] ＞ [カスタマイズ] を開きます。
  2. [追加CSS] という項目をクリックします。
  3. 一番下の行に、以下のコードをそのままコピーして貼り付けてください。

CSS

/* 特定の画像をセンターに配置する設定 */
img[src*="woman-yubi-001.png"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
  1. 「公開」ボタンを押して、実際のページを確認してください。

2.の結果

「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」というアラートが出てCSSの追加ができませんでした。CSSを追加できなかったというのは初めてです。CSSで解決というのが正解だと思っていましたので意外な結果でした。

3. 画像の「配置」設定を一旦解除して再設定

Classic Editor（昔の編集画面）に近いプラグインを使っている場合、画像に aligncenter というクラスが付いていても、CSSで float: left; が優先されていることがあります。

  • 画像を一度「配置なし（左揃えでも中央揃えでもない状態）」に戻してから、再度「中央揃え」ボタンを押してみてください。
  • また、画像にリンク（URL）が貼ってある場合、画像そのものではなく「リンクの枠線」が左に寄っているパターンがあります。その場合は「2」のCSSの方法が最も確実です。

3. の結果

画像を一度「配置なし（左揃えでも中央揃えでもない状態）」に戻してから、再度「中央揃え」ボタンを押してみてください。をやってみました。

結果は、中央に配置が成功しました。

２.のCSSはそのまま設定しています。ですから、CSSの影響だと思います。

結論

・上記に書いてあるCSSを追加

・配置した写真を一度配置なしにして再度中央揃えに設定。

カテゴリー
ブログ、ホームページ
タグ