画像の下にキャプションを載せる方法

Webサイト立ち上げ

画像の下に、やさしくきもちを添えたいとき

ブログに写真を載せたとき、「ちょっと一言だけ、この写真のこと書きたいなあ」って思うこと、ありませんか?

たとえば、家族の笑顔の写真や、お気に入りの景色、子供のしたいたずらや遊びの痕跡。

そんなときにぴったりなのが、“キャプション”という機能。


キャプションってなに?

キャプションとは、写真のすぐ下に表示される、ちいさな説明文のことです。

ほんの一言、「風がそよそよきもちよかった」なんて書き添えるだけで、読み手に伝わる空気がふんわり変わります。


やり方①:かんたんにキャプションをつける方法(ブロックエディタ)

  1. 「+」ボタンで画像ブロックを追加
  2. 画像を選ぶ or アップロード
  3. 写真の下に「キャプションを追加」と出てくるので、そこに説明文を入力

これだけでOK◎

たとえばこんなふうに▼

あっついなか並んだ列

やり方②:HTMLでキャプションをつける方法(カスタム派さん向け)

もっと自由に見せ方を調整したいときは、こんな書き方も◎

<figure>
  <img src="画像URL" alt="写真の説明" width="100%">
  <figcaption>キャプションに入れたい言葉をここに</figcaption>
</figure>

必要に応じて、style属性で文字サイズや色も調整できます:

<figcaption style="font-size:0.9em; color:#888;">
ほんのり淡い文字にしたいとき
</figcaption>

しおりのつづき的おすすめポイント

  • 写真の雰囲気に合わせて、気持ちをそっと添えられる
  • 主張しすぎないから、ブログ全体の雰囲気を壊さない
  • 読む人の“想像”がふくらむ

何より、自分の記録としても、あとから見返したときにじんわり思い出せるのがすきです。


おわりに

ブログの、写真と言葉が重なることでうまれるあたたかさを大事にしたい。

キャプションはその「ちょうどいい重なり方」をつくってくれる気がします。

そんなことを考えて調べた方法を記しておきたいなと思っています。

コメント

タイトルとURLをコピーしました