Please Sign In or Register

Rounded corners

jQuery のプラグインである jQuery corner を使って角丸を実現するためのモジュールです。

ブロック要素の角を丸くしたい場合には、それぞれのコーナー画像を準備した上で HTML + CSS で設定するのが一般的だと思いますが、これを id などの属性を利用してスタイルを呼び出すだけで簡単に実現することができます。
[ ダウンロード : http://drupal.org/project/rounded_corners ]

レビュー

[管理セクション] → [サイトの環境設定] → [Rounded corners] で、Rounded corners の設定を追加します。

Rounded corners の設定

すべてのテーマとページに適用する設定を以下のようなフォーマットで 1行に 1つずつ入力します。

$("this").corner("effect corners width");
  • this
    設定した内容を呼び出すための HTML タグの属性を指定します。以下が例です。
    $("div.rounded").corner();
    $("#slant").corner("bevel 4px")
  • effect
    roundbevel など、コーナーに適用するエフェクトのタイプを指定します。
    指定しない場合は round が適用されます。
  • corners
    エフェクトの対象とするコーナーを指定します。
    top(上), bottom(下), tr(右上), tl(左上), br(右下), bl(左下) が指定できます。
  • width
    エフェクトを適用する幅をピクセル(px)単位で指定します。

effectcorners を組み合わせることで、上下左右に異なる効果を適用することもできるようです。以下がそのサンプルコードです。

$("#corner-crazy").corner("jut tl 20px").corner("dog tr 20px").corner("bite bl 15px").corner("notch br");

※ 詳細については JQuery Corner Gallery のドキュメントで確認してください。

スクリーンショット

Rounded corners

JQuery Corner Demo で詳細なデモが確認できます。

注意事項など

このモジュールを利用するためには、jquery.corner.js をモジュールのルートディレクトリに追加しておく必要があります。
また、このモジュールはモジュールのアンインストール機能に対応しています。

日本語翻訳

Rounded corners 日本語翻訳 | DRUPAL*DRUPAL からダウンロードできます。

バグや問題点についての情報

トラックバック

トラックバックは承認後に表示されます。

URLから "-nospam" を削除してトラックバックを送信してください。