ライブドアブログのカスタマイズ-画像に影を付けるJqueryプラグイン「jQuery Shadow」

【この記事を読むのに必要な時間は約 6 分です。】

前回、Lightbox風に画像をモーダルウィンドウで表示するJqueryプラグイン「Colorbox」をライブドアブログのカスタマイズ-画像をLightbox風に表示するJqueryプラグインColorboxの設置で紹介した。
今回は、そんな画像に影（ドロップシャドウ効果）を付けて際立たせるJqueryプラグイン「jQuery Shadow」を紹介する。
本来は、指定したボックス要素（div要素）に影（ドロップシャドウ効果）をつけてくれるのだが、一部はimg属性に対しても有効だったので説明したい。もちろん、ボックス要素に対しては全て有効だった。

1 設置方法
2 利用方法
- 2.1 divタグへクラス指定
- 2.2 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ファイルは、上記で説明したとおりの場所にアップロードした前提。

２ちゃんねるじゃんじゃん速報
２ちゃんねる,2ch,まとめブログ,２ちゃんねるまとめ,アンテナサイト,ニュースまとめ,まとめ,痛いニュース,ニュース速報,芸スポ速報,芸能,スポーツ,事件,野球,サッカー,じゃんじゃん速報
2chan-matome.publog.jp
は、私のライブドアブログの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はその他と組み合わせることもできる。
下のフレームを見て欲しい。