はてなブログの画像キャプション位置変更方法

はてなブログの画像のキャプションの位置を変えたい…備忘録です。

画像のキャプションとは
キャプションの位置を変更する
おまけ・キャプションの行間を調整したいとき

画像のキャプションとは

キャプションとは説明文のこと。

はてなブログで「写真を投稿」するときに「キャプション」に文字を入力すると、画像の下に表示されます。

デフォルトだと、キャプションを追加すると画像と文字が自動的に中央に表示されるんですよね。

でも、左右どちらかに表示させたいこともあると思います。

今回はその方法について。

キャプションの位置を変更する

まず、上の場合のHTMLの構造がどうなっているかというと…

シンプルにするとこんな感じ。

<figure class="figure-image figure-image-fotolife mceNonEditable" title="寝るうさぎ">
<img src="https://●●.jpg"/>
<figcaption class="mceEditable">寝るうさぎ</figcaption>
</figure>

文字だけを右に寄せたいとき

style="text-align: ●●;"　を使います。これを<figcaption>のタグに入れます。

<figure class="figure-image figure-image-fotolife mceNonEditable" title="寝るうさぎ">
<img src="https://●●.jpg"/>
<figcaption class="mceEditable" style="text-align: right;">寝るうさぎ</figcaption>
</figure>

文字が右に寄りました。左に寄せたい時は「style="text-align: left;"」です。

画像だけを右に寄せたいとき

あまりそんなシチュエーションはないと思いますが…(´-｀*)

そんなときは、画像のタグに「align="right"」を追記します。

<figure class="figure-image figure-image-fotolife mceNonEditable" title="寝るうさぎ">
<img src="https://●●.jpg"/>
<figcaption class="mceEditable">寝るうさぎ</figcaption>
</figure>

文字と画像を右に寄せたいとき

画像と文字両方を左右どちらかに寄せたいときは、少々面倒ですが2か所に以下の記載をします。

これ<div>タグで動かせないかなと思ったのですが、<figure>タグそのものが全幅とってあるっぽくて、できませんでした。

おまけ・キャプションの行間を調整したいとき

style="text-align: left; line-height: ●%;"　を使います。これを<figcaption>のタグに入れます。こんな感じ。

<figure class="figure-image figure-image-fotolife mceNonEditable" title="寝るうさぎ">
<img src="https://●●.jpg"/>
<figcaption class="mceEditable" style="line-height: 300%;">寝るうさぎ</figcaption>
</figure>

参考までに少し長めの文章にしてみます。