jQuery - 文字に影をつける！

通常、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」読み込み部分、ドロップシャドウ適用部分）を追加します。

  --( 中略 )--

  <%= 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読み込み部分を通常の読み込み方（

• ‘#header h1’ ドロップシャドウを適用させたい場所をセレクタで指定する。
• left : integer (default = 4) left方向への移動
• top : integer (default = 4) top方向への移動
• blur : integer (default = 2) ぼかし
• opacity : decimal (default = 0.5) 不透明度
• color : string (default = “black”) 色(カラーコードでの指定も可)
• swap : boolean (default = false) zindexを入れ替え

---

通常の場合、上記の方法で対応可能ですが、WordPressで同じことを実現するには少し細工が必要になります。

※ WordPressの場合

WordPressでデフォルトで読み込まれてるjQueryは、他のJavaScriptライブラリと干渉して不具合が起こるのを避ける為にnoConflict()が使われているようです。 それに対応するには上記の例での”$”部分を”jQuery”にする。そしてドロップシャドウ適用部分は”wp_head”以降に記述する。 以下のようになります。

  --( 中略 )--

  <?php wp_enqueue_script( 'jquery.dropshadow', '/wp-includes/js/jquery.dropshadow.js', array( 'jquery' )); ?>

  <?php wp_head(); ?>

  <script type="text/javascript">
  jQuery(function(){
    jQuery('#header #td-header-l1 .h1-header-l1 a').dropShadow({
      left : 2,
      top  : 2,
      blur : 1,
      color : "#FF0000"
    });
  })
  </script>

---

作業は以上です。 これで当WordPressブログページ、Ruby on Rails製のWebサイトのヘッダ部のタイトルに影（ぼかし）が付きました。（実際には白・黒・赤の３つの影（ぼかし）を少しずつずらしながら重ねています） そして、W3C(CSS2.1)でもエラーとはなりません。 W3CでCSS3.0が勧告されればそちらで対応しようとは思っていますが、CSS2.1が勧告候補になってから2011年6月に正式勧告されるのにかかった期間の約4年を考えるとCSS3.0の正式勧告はまだまだ先になりそうです。

以上。