【この記事を読むのに必要な時間は約 6 分です。】
前回、Lightbox風に画像をモーダルウィンドウで表示するJqueryプラグイン「Colorbox」をライブドアブログのカスタマイズ-画像をLightbox風に表示するJqueryプラグインColorboxの設置で紹介した。
今回は、そんな画像に影（ドロップシャドウ効果）を付けて際立たせるJqueryプラグイン「jQuery Shadow」を紹介する。
本来は、指定したボックス要素（div要素）に影（ドロップシャドウ効果）をつけてくれるのだが、一部はimg属性に対しても有効だったので説明したい。もちろん、ボックス要素に対しては全て有効だった。
目次
設置方法
jQuery Shadow
今回は、ライブドアブログに特化して説明しているが、基本的に普通のブログやサイトでも同じようにすれば設置できる。
先でも説明したが、「jQuery Shadow」は正確には、画像に影（ドロップシャドウ効果）をつけるのではなく、div属性に対して、ドロップダウン効果を付ける。
しかし、divタグでaタグやimgタグを囲んでやれば、同じ効果が得られるし、一部のクラスは、imgタグに直接指定しても、同様の効果が得られた。
なお、WordPressについては、同じような効果を付与する専用のプラグイン「shadows」があるので、そちらを利用した方が、簡単だ。
事実、このブログではこちらの「shadows」を利用している。
「jQuery Shadows」プラグインと「Shadows」WordPress専用プラグインは違うものなので、利用属性やクラスは違う。しかしながら、どちらも使い方は簡単なので、是非試して欲しい。
プラグインのダウンロード
さて、こちらが、「jQuery Shadow」のホームページ。
しかし、ホームページにはダウンロード先がない。
こちらのページにある「DOWNLOAD」をクリックする。
するとGitHubのダウンロードページにジャンプするので、一番右下の「Download ZIP」をクリックする。これでやっとダウンロードできる。
ダウンロードファイル：jQuery-Shadow-master.zip
必要ファイル
zipファイルを解凍すると次のようにフォルダが展開される。
必要なファイルは次のふたつ。
「jquery.shadow」フォルダの中の
1.jquery.shadow.js（jsファイル）
2.jquery.shadow.css（cssファイル）
ライブドアサーバーへのアップロード
ライブドアブログの管理画面で画像/ファイルを選択する。
ファイル管理のタブをクリック。
「フォルダを作る」をクリックし、「shadow」と記入する。
「アップロード」をクリックし、作成した「shadow」フォルダの中にjquery.shadow.js（jsファイル）とjquery.shadow.css（cssファイル）をアップロードする。
ヘッダー部分への記載
ヘッダー部分（<head>～</head>の間）に以下のとおり記載する。
なお、Jquery本体は、Google AJX APIのホスティングサービスを利用している。
また、jquery.shadow.jsファイルとjquery.shadow.cssファイルは、上記で説明したとおりの場所にアップロードした前提。
は、私のライブドアブログのURLなので、当然だが、自分のライブドアブログのURLを記載すること。
<!-- Jquery本体ホスティングここから -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Jquery本体ホスティングここまで -->
<!-- shadow -->
<link rel="stylesheet" href="http://2chan-matome.publog.jp/shadow/jquery.shadow.css" />
<script src="http://2chan-matome.publog.jp/shadow/jquery.shadow.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.box.standard').shadow();
$('.box.lifted').shadow('lifted');
$('.box.perspective').shadow('perspective');
$('.box.raised').shadow('raised');
$('.box.sides-vt-1').shadow({type:'sides',sides:'vt-1'});
$('.box.sides-vt-2').shadow({type:'sides',sides:'vt-2'});
$('.box.sides-hz-1').shadow({type:'sides',sides:'hz-1'});
$('.box.sides-hz-2').shadow({type:'sides',sides:'hz-2'});
$('.box.rotated').shadow({type:'rotated',rotate:'-5deg'});
});
</script>
<!-- /shadow -->利用方法
divタグへクラス指定
divタグへクラス指定する。
クラス指定は、基本がbox standardでこれは、いわゆる角丸効果のみで影はなし。
その他に、
box raised/box lifted/box rotated/box perspective
box sides-vt-1/box sides-vt-2
box sides-hz-1/box sides-hz-2 等があり、
またbox rotatedはその他と組み合わせることもできる。
下のフレームを見て欲しい。
imgタグへクラス指定
box raised/box rotatedはimgタグにクラス指定できる。その他は試してみて欲しい。
例）<img class=”box raised”>
お勧めは、box raisedである。
以上
