mk-mode BLOG

このブログは自作の自宅サーバに構築した Debian GNU/Linux で運用しています。
PC・サーバ構築等の話題を中心に公開しております。(クローンサイト: GitHub Pages

ブログ開設日2009-01-05
サーバ連続稼働時間
Reading...
Page View 合計
Reading...
今日
Reading...
昨日
Reading...

jQuery - 文字に影をつける!

[ webサイト, ブログ ] [ CSS, HTML, JavaScript, PHP, Rails ]

こんばんは。

通常、Webサイトで文字に影(ぼかし)を付ける際、CSSの"text-shadow"を使用すると簡単に実現できます。

しかし、この"text-shadow"は現在W3C勧告のCSS2.1では非推奨のため、W3Cチェックでエラーとなります。 (以前のCSS2.0や将来(ずいぶん先)勧告される予定のCSS3.0では大丈夫のようです)

そこで、CSSを使用せずにJavaScriptの「jQuery」ライブラリを使用して文字に影(ぼかし)を付ける方法を発見しましたので、記録として残しておきたいと思います。

作業記録

前提条件

  • WebサイトはRuby on Railsで作成されている。 (記述を変更することでRuby on Railsでなくても対応可能です)
  • 使用するのは「jQuery」ドロップシャドウプラグイン「Drop Shadow Effect」です。

1. Drop Shadow Effect の入手

Drop Shadow Examplesから「jquery.dropshadow.js」をダウンロードします。

2. jsファイルの配置

ダウンロードした「jquery.dropshadow.js」を適切な場所に配置します。 当方の場合、Ruby on Railsなので「public/javascripts」フォルダ配下に配置しました。

3. HTMLソース編集

HTMLソースの内に以下のように記述(「jquery.dropshadow.js」読み込み部分、ドロップシャドウ適用部分)を追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  --( 中略 )--

  <%= javascript_include_tag :defaults %>

  <%= javascript_include_tag "jquery.dropshadow.js" %>
  <script type="text/javascript">
  $(function(){
    $('#header h1').dropShadow({
      left : 2,
      top  : 2,
      blur : 2,
      color : "red"
    });
  })
  </script>

  --( 中略 )--

当方の場合、Ruby on Railsなので「app/views/layouts」フォルダ内の「application.html.erb」に記述を追加しました。 上記の例ではjQuery本体は <%= javascript_include_tag :defaults %> で読み込まれています。 通常のHTMLならjs読み込み部分を通常の読み込み方(

Comments