マンガでわかるホームページ作成

WordPress・htmlで画像を横並びにして下に文字を置く方法

ホームページに画像を載せるとき横に空白ができるのがもったいないから画像を横並べにしたいですよね。

そのうえで画像の下に文字も書きたい。しかも中央寄せにしたい。

どうやるんだろう?

ということでWordPress・htmlで画像を横並びにして下に文字を置く方法を説明します。

なお、画像の数は2つでも3つでも大丈夫です。

結論

table(表)を使ってtd(セル)内に画像を置き、改行して画像を置く。

具体的な方法

1.表を用意

3つ横に並べたいときは3列にしてくださいね。

  

WordPressなら「テーブルブロック」を使います。

2.表に画像を置く

WordPressなら以下の図を参考に画像を追加できます。

インライン画像は小さめに設定されているので、画像をクリックしいいサイズに変更してください。

左右とも同じサイズにしましょう。

3.Enterで改行して文字を入力


きれいな桜の木

美しい川と滝

3.(任意)中央寄せにする


きれいな桜の木

美しい川と滝

WordPressの場合は以下の画像を参考に中央配置してください。

htmlならtdに<td align="center">と指定すると画像と文字が中央寄せになります。

まとめ

WordPress・htmlで画像を横並びにして下に文字を置くにはtable(表)を使ってtd(セル)内に画像を置き、改行して画像を置く。

  1. 表を用意
  2. 表に画像を置く
  3. Enterで改行して文字を入力
  4. 中央寄せ

以上、WordPress・htmlで画像を横並びにして下に文字を置く方法でした。

関連記事