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

【この記事を読むのに必要な時間は約 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」のホームページ
しかし、ホームページにはダウンロード先がない。

1shadow

こちらのページにある「DOWNLOAD」をクリックする。

2shadow
3shadow

するとGitHubのダウンロードページにジャンプするので、一番右下の「Download ZIP」をクリックする。これでやっとダウンロードできる。
ダウンロードファイル:jQuery-Shadow-master.zip

4shadow

必要ファイル

zipファイルを解凍すると次のようにフォルダが展開される。

5shadow

必要なファイルは次のふたつ。
「jquery.shadow」フォルダの中の
1.jquery.shadow.js(jsファイル)
2.jquery.shadow.css(cssファイル)

ライブドアサーバーへのアップロード

ライブドアブログの管理画面で画像/ファイルを選択する。

6shadow

ファイル管理のタブをクリック。

7shadow

「フォルダを作る」をクリックし、「shadow」と記入する。

8shadow
9shadow

「アップロード」をクリックし、作成した「shadow」フォルダの中にjquery.shadow.js(jsファイル)とjquery.shadow.css(cssファイル)をアップロードする。

10shadow

ヘッダー部分への記載

ヘッダー部分(<head>~</head>の間)に以下のとおり記載する。
なお、Jquery本体は、Google AJX APIのホスティングサービスを利用している。
また、jquery.shadow.jsファイルとjquery.shadow.cssファイルは、上記で説明したとおりの場所にアップロードした前提。

2ちゃんねる,2ch,まとめブログ,2ちゃんねるまとめ,アンテナサイト,ニュースまとめ,まとめ,痛いニュース,ニュース速報,芸スポ速報,芸能,スポーツ,事件,野球,サッカー,じゃんじゃん速報
は、私のライブドアブログの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である。
以上

Related Posts Plugin for WordPress, Blogger...