【WordPress】記事ページで画像が中央や右寄せにならない時の対処法

WordPressの記事ページで画像が中央や右寄せになってくれないんだけどどうしたらいい？

WordPressをオリジナルテーマで作成した場合、記事に入れた画像を中央寄せや右寄せにしても左寄せのままである場合があります。

今回はその時の対処方法について解説します。

投稿ページの画像の位置を変える方法

WordPressでは記事に画像の入れる時、位置を調整することが出来ます。

まずはその方法から見ていきます。

方法は2つあり、1つは挿入した画像をクリックして表示されるアイコンをクリックする。

もう1つは上記ペンのアイコンをクリックして画像詳細画面の配置で調整。

どちらも左から「左寄せ、中央寄せ、右寄せ、配置なし」という順番です。

位置によって自動でclass名が付く

そしてそれぞれにclass名が自動で付きます。

そしてWordPressをオリジナルテーマで作成していた場合、このclassに対してスタイルをあてないと全部左寄せという状態になると思います。

このような状態です。

この画像はテーマテストデータを使ったダミー記事になります。

テーマテストデータを使った投稿ページのレイアウトチェックに関しては以下の記事を参照下さい。

ダミー記事を使い投稿ページのレイアウトが崩れていないかチェックする方法

そして位置だけでなく、大きい画像ははみ出ていますね。

この辺をCSSで全て調整します。

/*画像の中央寄せ*/
.aligncenter {
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}
/*figureタグで囲まれた画像の中央寄せ*/
.aligncenter img {
  height: auto;
  max-width: 100%;
}
/*画像右寄せ*/
.alignright {
  height: auto;
  margin-left: auto;
  max-width: 100%;
}
/*figureタグで囲まれた画像右寄せ*/
.alignright img {
  height: auto;
  max-width: 100%;
}
/*位置指定のない画像*/
.alignnone {
  height: auto;
  max-width: 100%;
}
/*figureタグで囲まれた位置指定のない画像*/
.alignnone img {
  height: auto;
  max-width: 100%;
}

このコードをコピペして頂ければOKです。

すると先ほど全て左寄せで大きい画像もはみ出ていた記事はこのようになります。

以上になります。

オリジナルテーマで作成する場合は注意してみて下さい。