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

WordPress

こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！

今回は、

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

 

 

といった方に対する記事となります。

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

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

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

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

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

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

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

 

 

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

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

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

  • 左寄せ：class=”alignleft”
  • 中央寄せ：class=”aligncenter“
  • 右寄せ：class=”alignright“
  • 配置なし：class=”alignnone“

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

このような状態です。

 

 

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

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

じゅんぺいブログ
ダミー記事を使い投稿ページのレイアウトが崩れていないかチェックする方法
https://junpei-sugiyama.com/theme-test-data
こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！今回は、WordPressのオリジナルテーマで投稿ページのレイアウトが崩れていないかチェックしたいけどどうすればいい？  といった方に対する記事となります。投稿ページのレイアウトをチェックするには、 超長いタイトルでも大丈夫か？ 画像が大きくても大丈夫か？ アイキャッチが縦長でも大丈夫か？など、チェックポイントがたくさんあります。これを1つ1つ手作業で投稿するのは人間のする事ではないので、便利なデータを使ってダミー記事...

 

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

この辺を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です。

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

 

 

 

以上になります。

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