角を丸くする拡張モジュールをインストールしました
かねてから要望が多かった要素の角を丸くする拡張モジュールをインストールしました。
あまり使いすぎると邪魔になりますが、ポイントで旨くつかうとアクセントとなって良い感じになります。
慣れてくると 以下の方法で同様のコンテンツを幾らでも設置可能ですが、最初の一つ、あるいは慣れるまでは弊社がお手伝いします。
使用方法は以下の通りです。
環境設定
普段は必要ありませんが、最初に使うとき、使用する角丸の内容を定義します。
- 管理セクション≫サイトの環境設定≫Round Cornersページを開きます。
- actbrain corners status:が「The actbrain corners javascript file is available.」となっている事を確認します。
異なる表示の場合は「Round Corners」モジュールが正常にインストールされていません。表示内容とともに弊社サポートにお知らせ下さい。
-
actbrain corners to apply on all pages:に使用する角丸を定義します。
各行に $('要素名').[c]corner('パラメータ');
というような形で定義します。
例えば：
こんな感じになります
というようにCSSで背景色を定義してある要素があるとします。
環境設定で＄(’.corner-wicked-tr’）.corner('wicked tr');と定義し、
要素のクラス名をcorner-wicked-trとすると、
こんな感じになります
環境設定で ＄('.corner-dog-tr'）.corner('dog tr');と定義し、
要素のクラス名をcorner-dog-trとすると、
こんな感じになります
環境設定で＄(’.corner-default’）.ccorner();と定義し、
要素のクラス名をとするとcorner-defaultとすると、
こんな感じになります
参考サイト：
Round Cornersモジュールはjquery.corner.jsとjquery.jquery.curvycorners.jsが同時に動作できるようにDrupal6用に作成したモジュールです。
jquery.corner.jsはcorner()。
jquery.curvycorners.jsは ccorner()に対応します。
環境設定が終了したら、あとはコンテンツの編集で適所にクラス名を振ります。
コンテンツ編集
環境設定が終了したら、あとはコンテンツの編集で適所にクラス名を振るだけです。
要素とかクラスとか幾分html/cssの言葉が出てきますが、html/cssそのものはDrupal-CMSが自動的に生成しますから、あまり深く考えなくとも結構です。
ここではDrupal-CMSが生成するhtmlに少し違う要素を加えるだけです。
上記効果は この機能のほんの一部です。角の一つ一つを違う形にしたり、角度を調整したりする事で多彩な効果を得られます。
記述方法の詳細は下記参考ページを見ていただければ大体わかるかと思います。
既知の問題
このモジュールを使用すると以下の問題が発生する可能性があります。
使用方法を間違えなければ殆ど大丈夫ですが、各ライブラリのバージョンアップで解消する可能性もあります。
- 2008/12/19現在、Opera最新バージョン9.61においてcorner()使用時、右上コーナーが正確に丸められない問題があります。
- corner() / ccorner() とも jQuery Functionを使用する生のJavaScriptが生成します。環境設定の定義 および 要素の指定に問題があった場合は JavaScriptエラーが発生します。
導入時はブラウザのJavaScriptエラー検出を有効にして確認後、公開して下さい。
- Round Corners拡張モジュールはJavaScriptで動作します。JavaScriptを無効にしているブラウザ、および携帯端末では効果はでません。
