Movable Type 備忘録

 JavaScriptでドロップシャドウ

  • Jan212007
  • Vote:
    http://bizcaz.com/archives/2007/01/21-235619.php
  • Categories: JavaScript
  • Tags:
  • Social Bookmark

こんにちわ^^
ここ最近、目新しいプラグインなどがないのでカスタマイズ記事をサボりまくりのbzbellです。

でも、チラホラと他のサイトでもご紹介されてますが、MovableType(ムーバブルタイプ) 3.4が英語版でリリースされたそうです。
後ほど、日本語版もでると思いますが、いち早く3.4をインストールしたい人は、小粋空間さんのところでMovable Type 3.31英語版を日本語環境で利用するを紹介されてますので、TRY してみてはどうでしょう。
言うまでもありませんが、その際には自己責任でお願い致します。

さて、いつもお世話になってるOpen MagicVox.netさんのところで、オモシロそうなスクリプトが紹介されてました。

わたしのサイトでは、ドロップシャドウ、グロー効果はCSSで対応しています。 でも、今回紹介するのは JavaScript です。
イメージにドロップシャドウ、グロー効果をカンタンに付けることができます。

グロー効果のサンプルコードは以下の通りです。

  1. <script type="text/javascript" src="http://●●●.com/js/makeGlow.js"></script>
  2. <span class="glow"><img src="http://●●●.com/images/image.jpg" alt="" /></span>
  3. <script type="text/javascript">
  4. <!--
  5. makeGlowClass('glow');
  6. //-->
  7. </script>

青い字の部分を<head>～</head>の間に追加しておきます。
そして、赤い字の部分でグロー効果を付けたい<img>タグを囲います。

最後に、</body>の上辺りに緑の字の部分を追加することで、ページ表示と同時にグロー効果をつけることができます。 その際、ピンクの字のクラス名を統一しておきます。
そうすると、クラス名glowで指定したイメージすべてにグロー効果を付けることができます。

さらに詳しいことはJavaScriptで作るグロー効果を参照してください。

ドロップシャドウ効果のサンプルコードは以下の通りです。

  1. <script type="text/javascript" src="http://●●●.com/js/makeShadow.js"></script>
  2. <span class="shadow"><img src="http://●●●.com/images/image.jpg" alt="" /></span>
  3. <script type="text/javascript">
  4. <!--
  5. makeShadowClass('shadow');
  6. //-->
  7. </script>

使い方はグロー効果と同様で、青い字の部分を<head>～</head>の間に追加しておきます。
そして、赤い字の部分でドロップシャドウ効果を付けたい<img>タグを囲います。

最後に、</body>の上辺りに緑の字の部分を追加することで、ページ表示と同時にドロップシャドウ効果をつけることができます。 その際、ピンクの字のクラス名を統一しておきます。
そうすると、クラス名shadowで指定したイメージすべてにドロップシャドウ効果を付けることができます。

さらに詳しいことはJavaScriptで作るドロップシャドー効果を参照してください。

- 2007.01.22 追記 -

わたしのサイトのエントリページにサンプルを表示しようとしたのですが、各効果が付けられませんでした。
原因は分かってませんが、もしかしたら他のJavaScriptとの干渉などがあるのかも、です。 または、眠いのを我慢してやってるので、些細なミスかも、です。
要調査ですの。

以上ざっと説明しましたが、2つとも使い方はカンタンですし、サンプルも付いてますのですぐに使えると思います。 ただし、IEでは動作できないとのことです。
では、SEE YOU

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード