こんにちは、リキマルです!
今回のテーマは、**「スマホやタブレットでも見やすく、画像の下に説明文をきれいに配置する方法」**についてです。
読者さんからこんな声をいただきました。
「スマホだと画像と説明のレイアウトが崩れて見づらくなってしまうんです。どうしたらいいですか?」
すごくいい質問ですね!
画面の幅が異なるスマホ・タブレットでは、画像とテキストの配置を丁寧に整えておくことがとても大切です。
そこで今回は、WordPressの「ブロックエディター」を使って、画像の下に説明文を配置する3つの方法をご紹介します。
どれもかんたんで、すぐに試せますよ!
【方法①】画像の下にそのままテキストを追加する(シンプルで手軽)
一番ベーシックなやり方です。
画像のすぐ下に段落(テキスト)を追加して、説明を書くだけ。
こんな時におすすめ:
- 「とにかく早く・簡単に説明を入れたい」
- 「1枚ずつ画像を見せたい」
やり方:
- WordPressの編集画面を開く(「固定ページ」や「投稿」など)
- 画像ブロックを選ぶ
- 画像の下にカーソルを合わせて「+」ボタンをタップ
- 「段落(テキスト)」ブロックを追加して、説明文を入力
- 必要に応じて「中央揃え」で見た目を整える
- 「更新」を押して保存!
ポイント:
この方法はとても手軽ですが、画面幅によって改行位置がずれやすいこともあります。そんなときは次の方法が便利です。
【方法②】画像と説明を「カラム(列)」で配置する(バランス重視)
画像とテキストを左右や上下で分けて配置できる、ちょっと本格的な方法です。
スマホでもレイアウトが崩れにくくなります。
こんな時におすすめ:
- 「スマホやタブレットでもバランスよく見せたい」
- 「画像の横に説明文を入れたい」
やり方:
- 「+」ボタンを押して「カラム」ブロックを追加
- 「50 / 50」など比率を選ぶ(例:左に画像・右に説明なら50/50)
- 左側に画像、右側に段落ブロック(説明文)を入れる
- 見た目を整えるために「中央揃え」や「余白(マージン)」を調整
- 「更新」ボタンで保存!
ポイント:
この方法なら、デバイスの画面サイズに応じて自動的に縦並びや横並びに調整されるので、とってもスマート!
【方法③】3枚の画像+説明を「ギャラリーブロック」でまとめる(統一デザイン)
複数の画像を一つのブロックでスッキリまとめたいときにおすすめです。
それぞれの画像の下に説明文(キャプション)をつけられるので便利!
こんな時におすすめ:
- 「3枚の画像を並べて見せたい」
- 「それぞれに説明をつけたい」
やり方:
- 「+」ボタン → 「ギャラリー」ブロックを選択
- 画像を3枚アップロードまたはメディアライブラリから選択
- 各画像をクリックして、下に説明(キャプション)を入力
- カラム数を「3列」に設定するときれいに並びます
- 「更新」ボタンを押して保存!
ポイント:
ギャラリーブロックなら、スマホでは縦並び、タブレットでは横並びになりやすく、自然な見え方になります。
【どの方法がいい?】
🌟 リキマル – 市民の声を届ける情報発信者
「City Voice」を運営し、政策提案型のプラットフォームを立ち上げ。
市民の声を行政に届けるための情報発信を続ける。
ブログでは「情報発信力を高めるためのノウハウ」や「政策提言の実践記録」を発信中。
情報通信会社勤務の後、農業分野に転身。農業未経験の新規参入事業者ながら、総工費4億円超規模の「強い農業づくり交付金事業」認定を国から受ける。高糖度フルーツトマト栽培を行う中、ブランディングに取り組む。この経験が日本の農業政策に関心を深めるきっかけとなった。農業生産法人代表退任後、現場の声が政策に反映される仕組みづくりに取り組み、暮らしの声を政策にするプラットフォーム 「City Voice」 を立ち上げる。現在 City Voice代表 を務める。
📌 興味のあるテーマ
✅ 市民の声を政策に反映させるには?
✅ 情報発信力を高める方法
✅ 政策の裏側をわかりやすく解説
📌 活動
✅ 政策提案プラットフォーム「City Voice」運営
✅ ブログ「制作日記」で情報発信のノウハウを公開
✅ SNSで市民の声を広げる活動
コメントを残す