写真のキャプションにaltタグを使って表示するサンプルです
2025.07.23 update：デモの表示不具合を修正しました
画像にキャプションをつける+altにも同じ文字を入れる。よくありますよね。 更新の際にどちらかを更新し忘れてしまうことありませんか？ 無いようで有りますよね。 そこで、altに入れた文字をキャプションとして表示するサンプルを紹介します。 あ！決して手抜きをしたいわけではないですよ！
使用するclass名
.photoCaption：alt属性をキャプションとして表示します。 .alignL：キャプションを左揃えにします。 .alignC：キャプションを中央揃えにします。 .alignR：キャプションを右揃えにします。
デモ
デモはこちら
Source
HTML
<span class="photoCaption alignL"><img src="/common/img/sample.jpg" alt="左に画像の説明"></span>
<span class="photoCaption alignC"><img src="/common/img/sample.jpg" alt="中央に画像の説明"></span>
<span class="photoCaption alignR"><img src="/common/img/sample.jpg" alt="右に画像の説明"></span>
javascript
$('.photoCaption > img[alt]').each(function() {
var elem = $(this);
var altAttr = elem.attr('alt');
$(this).after('<span class="caption">'+ altAttr +'</span>');
$(this).addClass("test");
});CSS
.photoCaption {display:inline-block;}
.photoCaption .caption {display:block; font-size:11px;}
.photoCaption.alignL .caption {text-align:left;}
.photoCaption.alignC .caption {text-align:center;}
.photoCaption.alignR .caption {text-align:right;}
SCSS
.photoCaption {
.caption {
display:block;
font-size:11px;
}
&.alignL .caption {text-align:left;}
&.alignC .caption {text-align:center;}
&.alignR .caption {text-align:right;}
}
