制作日記 33:画像表示

こんにちは、リキマルです!

今回のテーマは、**「スマホやタブレットでも見やすく、画像の下に説明文をきれいに配置する方法」**についてです。

読者さんからこんな声をいただきました。

「スマホだと画像と説明のレイアウトが崩れて見づらくなってしまうんです。どうしたらいいですか?」

すごくいい質問ですね!

画面の幅が異なるスマホ・タブレットでは、画像とテキストの配置を丁寧に整えておくことがとても大切です。

そこで今回は、WordPressの「ブロックエディター」を使って、画像の下に説明文を配置する3つの方法をご紹介します。

どれもかんたんで、すぐに試せますよ!

【方法①】画像の下にそのままテキストを追加する(シンプルで手軽)

一番ベーシックなやり方です。

画像のすぐ下に段落(テキスト)を追加して、説明を書くだけ。

こんな時におすすめ:

  • 「とにかく早く・簡単に説明を入れたい」
  • 「1枚ずつ画像を見せたい」

やり方:

  1. WordPressの編集画面を開く(「固定ページ」や「投稿」など)
  2. 画像ブロックを選ぶ
  3. 画像の下にカーソルを合わせて「+」ボタンをタップ
  4. 「段落(テキスト)」ブロックを追加して、説明文を入力
  5. 必要に応じて「中央揃え」で見た目を整える
  6. 「更新」を押して保存!

ポイント:

この方法はとても手軽ですが、画面幅によって改行位置がずれやすいこともあります。そんなときは次の方法が便利です。

【方法②】画像と説明を「カラム(列)」で配置する(バランス重視)

画像とテキストを左右や上下で分けて配置できる、ちょっと本格的な方法です。

スマホでもレイアウトが崩れにくくなります。

こんな時におすすめ:

  • 「スマホやタブレットでもバランスよく見せたい」
  • 「画像の横に説明文を入れたい」

やり方:

  1. 「+」ボタンを押して「カラム」ブロックを追加
  2. 「50 / 50」など比率を選ぶ(例:左に画像・右に説明なら50/50)
  3. 左側に画像、右側に段落ブロック(説明文)を入れる
  4. 見た目を整えるために「中央揃え」や「余白(マージン)」を調整
  5. 「更新」ボタンで保存!

ポイント:

この方法なら、デバイスの画面サイズに応じて自動的に縦並びや横並びに調整されるので、とってもスマート!

【方法③】3枚の画像+説明を「ギャラリーブロック」でまとめる(統一デザイン)

複数の画像を一つのブロックでスッキリまとめたいときにおすすめです。

それぞれの画像の下に説明文(キャプション)をつけられるので便利!

こんな時におすすめ:

  • 「3枚の画像を並べて見せたい」
  • 「それぞれに説明をつけたい」

やり方:

  1. 「+」ボタン → 「ギャラリー」ブロックを選択
  2. 画像を3枚アップロードまたはメディアライブラリから選択
  3. 各画像をクリックして、下に説明(キャプション)を入力
  4. カラム数を「3列」に設定するときれいに並びます
  5. 「更新」ボタンを押して保存!

ポイント:

ギャラリーブロックなら、スマホでは縦並び、タブレットでは横並びになりやすく、自然な見え方になります。

【どの方法がいい?】

Comments

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です