Rounded corners
jQuery のプラグインである jQuery corner を使って角丸を実現するためのモジュールです。
ブロック要素の角を丸くしたい場合には、それぞれのコーナー画像を準備した上で HTML + CSS で設定するのが一般的だと思いますが、これを id などの属性を利用してスタイルを呼び出すだけで簡単に実現することができます。
[ ダウンロード : http://drupal.org/project/rounded_corners ]
レビュー
[管理セクション] → [サイトの環境設定] → [Rounded corners] で、Rounded corners の設定を追加します。
すべてのテーマとページに適用する設定を以下のようなフォーマットで 1行に 1つずつ入力します。
$("this").corner("effect corners width");- this
設定した内容を呼び出すための HTML タグの属性を指定します。以下が例です。
$("div.rounded").corner();
$("#slant").corner("bevel 4px") - effect
round や bevel など、コーナーに適用するエフェクトのタイプを指定します。
指定しない場合は round が適用されます。 - corners
エフェクトの対象とするコーナーを指定します。
top(上), bottom(下), tr(右上), tl(左上), br(右下), bl(左下) が指定できます。 - width
エフェクトを適用する幅をピクセル(px)単位で指定します。
effect と corners を組み合わせることで、上下左右に異なる効果を適用することもできるようです。以下がそのサンプルコードです。
$("#corner-crazy").corner("jut tl 20px").corner("dog tr 20px").corner("bite bl 15px").corner("notch br");※ 詳細については JQuery Corner Gallery のドキュメントで確認してください。
スクリーンショット
JQuery Corner Demo で詳細なデモが確認できます。
注意事項など
このモジュールを利用するためには、jquery.corner.js をモジュールのルートディレクトリに追加しておく必要があります。
また、このモジュールはモジュールのアンインストール機能に対応しています。
日本語翻訳
Rounded corners 日本語翻訳 | DRUPAL*DRUPAL からダウンロードできます。
バグや問題点についての情報
トラックバック
トラックバックは承認後に表示されます。
URLから "-nospam" を削除してトラックバックを送信してください。

