今度は「jQuery Drop Shadow」の設置方法です。
・・・最初に言っておきますと、自分の環境だけかもしれませんが「IE」では綺麗に表示されません。
設定方法
まずはこちらから「Drop Shadow plugin」 「jquery.dimensions.js」 「jquery.js」 をダウンロードそして、いつものように、すべてのファイルを適当なフォルダ（ここでは、jquery-dropshadow）に入れFTPで任意の場所（ここではwp-admin等と同じ最上層にします）にアップロード。
※ちなみに、「jquery.js」を設置済みの場合は使い回しができるようです。
関連ファイルの外部リンク設定
次にJavaScriptとスタイルシートを、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。
自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="http://example.com/jquery-dropshadow/jquery.js"></script>
<scripttype="text/javascript"src="http://example.com/jquery-dropshadow/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://example.com/jquery-dropshadow/jquery.dropshadow.js"></script>
<script type="text/javascript">
window.onload = function(){
$("p.クラス名").dropShadow({
left: 8, // 左からの距離
top: 5, // 上からの距離
opacity: 0.8, // 透明度
blur: 1, // ぼかし
color: "red" // 影の色
});
}
</script>
黄色の部分を自分の設定にあわせ書き込んでください。<scripttype="text/javascript"src="http://example.com/jquery-dropshadow/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://example.com/jquery-dropshadow/jquery.dropshadow.js"></script>
<script type="text/javascript">
window.onload = function(){
$("p.クラス名").dropShadow({
left: 8, // 左からの距離
top: 5, // 上からの距離
opacity: 0.8, // 透明度
blur: 1, // ぼかし
color: "red" // 影の色
});
}
</script>
上記の赤文字の設定を変えて自分好みの設定にしてください。
使用方法
上記の緑の文字を「"p.test"」とした時の例※もちろん「p」タグじゃなく、「span.クラス名」 「img.クラス名」などなど、他のタグでもOKです。
<p class="test">
この場合は、文字に影がつきますが<br />
画像でもなんでもOKです。・・・・・(⌒^⌒)ｂ うん
</p>
※付けすぎると非常に重いようです・・・・(T^T)・・・・って言うか自分の場合、色々付けすぎてるからだと思うけど・・・・・・・(゜＿゜i)タラー・・・この場合は、文字に影がつきますが<br />
画像でもなんでもOKです。・・・・・(⌒^⌒)ｂ うん
</p>
※IEだとさらに重い・・・そして、影がみんな赤くかすれたのが出るだけになってしまう・・・自分だけ？？
サンプル
残念なことに、現在は取り外されてしまったため、こちらになります。 (T^T)
「IE」ユーザーで、上記サンプルがうまく表示されない場合は、これで我慢してください・・・σ(^◇^;)ヒヤアセ※ ← この画像の影は「css」で付けているので違います。紛らわしくてすいません。
ペコリ(o_ _)ｏ))
人気度 : 27 %
(1 投票, 平均値/最大値: 5 / 5)
最上階
1階
関係のある記事
No user の書き込みがあります
コメントほしぃ～よぉ～ σ(^◇^;)