超簡単に画像にオシャレなキャプションを付けられるプラグイン

photo credit: kgrz

http://farm4.static.flickr.com/3314/3473683696_80f1d7f6d2_s.jpg

左サイドバーにある「Ads」の部分に掲載している広告の画像にマウスを乗せてみてください。
注釈（キャプション）が現れたでしょ？

このように、画像にオシャレなキャプションを付けられるプラグインがありましたので、紹介したいと思います。

madtag

STEP1 ダウンロードしてサーバーにアップ

配布サイトはCatch My Fameというサイトです。

Downloadからプラグイン本体をダウンロードし、サーバーにアップします。


この矢印の場所で右クリックし、「リンク先を保存」でダウンロードできます！
ダウンロードできたのが「jquery.dropcaptions.js」というファイルだったら成功です。
このファイルを好きな場所にアップロードし、URLをメモしておいてください。

STEP2 画像のタグを変更する

まず、キャプションを付けたい画像にクラスを定義します。
クラスの定義の仕方を説明します。

画像のタグは、<img src="ameblo.jpg"/>←こんな感じだと思います。
このタグの中に、class="好きなクラス名"←コレを書き加えます。
つまり、↓こうなります。
<img class="好きなクラス名" src="ameblo.jpg"/>
※クラス名は半角英数で

↓こうでもOK
<img src="ameblo.jpg" class="好きなクラス名"/>

次に、キャプションに表示したい文字列を定義します。
これもimgタグの中に書きます。次のように書き加えてください。
title="表示したい文章"

つまり、↓こんな感じになります。
<img class="好きなクラス名" title="表示したい文章" src="ameblo.jpg"/>

これで画像タグの準備はOKです！

STEP3 フリープラグインに書き加える

最後にフリープラグイン。
以下のコードを下記加えてください。

<script type="text/javascript" src="STEP1でメモしたURL"></script>
<script type="text/javascript">
$(function(){
$('.画像に定義したクラス名').dropCaptions();
//※見づらいですが、画像に定義したクラス名の前に.(ドット)が必要ですので注意してください。
});
</script>

たったこれだけ！わかりやすい～。
ただ、これだと背景も無く、ちょっと寂しい感じです。

ではおまけに、キャプション部分の装飾をしてみましょう。
CSSで自由にカスタマイズできます。

STEP4 CSSでカスタマイズ！

配布先のデモページのようにするには、CSSで装飾しなければいけません。

.caption {
ここに自由にCSSを記述
}

これでカスタマイズできます。
ちなみにデモページのものは

.caption {
background: #333;
border-bottom: 1px solid #666;
border-bottom-left-radius: 6px 6px;
border-bottom-right-radius: 6px 6px;
border-left: 1px solid #666;
border-right: 1px solid #666;
border-top: 1px solid #666;
color: #EEE;
font-family: Verdana;
font-size: 11px;
padding: 4px;
}

こんな感じですので、これをCSSに加えれば完成です。

めちゃめちゃ簡単なので、是非トライしてください！