見栄え見栄え

タイトルにドロップシャドー効果を加える

ポイントで旨くつかうとアクセントとなって良い感じポイントで旨くつかうとアクセントとなって良い感じ

Round Cornersモジュールにドロップシャドーの機能を追加しました。

あまり使いすぎると邪魔になりますが、ポイントで旨くつかうとアクセントとなって良い感じになります。

慣れてくると 以下の方法で同様のコンテンツを幾らでも設置可能ですが、最初の一つ、あるいは慣れるまでは弊社がお手伝いします。

使用方法は以下の通りです。

  1. 管理セクション≫サイトの環境設定≫Round Cornersページを開きます。
    タイトルにドロップシャドー効果を加える
  2. actbrain corners status:が「The actbrain corners javascript file is available.」となっている事を確認します。
    異なる表示の場合は「Round Corners」モジュールが正常にインストールされていません。表示内容とともに弊社サポートにお知らせ下さい。
  3. actbrain corners to apply on all pages:に使用する要素名とグラデーションを定義します。
    各行に $('要素名').function('パラメータ');
    というような形で定義します。
 

例えば: 

こんな感じになります

 

というようにCSSで背景色を定義してある要素があるとします。 

環境設定で
$('.dropshadow').removeShadow();
$('.dropshadow').dropShadow({swap: true});

と定義し、要素のクラス名をdropshadowとすると、 

こんな感じになります。

 

背景色を与えず文字だけでやった場合は

こんな感じになります。

 

参考サイト:

http://allabout.co.jp/internet/javascript/closeup/CU20080325A/index2.htm 

Round Cornersに関してはこちら ⇒ 要素のコーナーを丸くする 

要素にグラデーション効果を与える

Round Cornersモジュールに要素グラデーションの機能を追加しました。

あまり使いすぎると邪魔になりますが、ポイントで旨くつかうとアクセントとなって良い感じになります。

慣れてくると 以下の方法で同様のコンテンツを幾らでも設置可能ですが、最初の一つ、あるいは慣れるまでは弊社がお手伝いします。

使用方法は以下の通りです。

  1. 管理セクション≫サイトの環境設定≫Round Cornersページを開きます。
    Round Cornersモジュールに要素グラデーションの機能を追加
  2. actbrain corners status:が「The actbrain corners javascript file is available.」となっている事を確認します。
    異なる表示の場合は「Round Corners」モジュールが正常にインストールされていません。表示内容とともに弊社サポートにお知らせ下さい。
  3. actbrain corners to apply on all pages:に使用する要素名とグラデーションを定義します。
    各行に $('要素名').gradient('パラメータ');
    というような形で定義します。
 

例えば: 

こんな感じになります

 

というようにCSSで背景色を定義してある要素があるとします。 

環境設定で
$(’.gradient’).gradient({
from: 'A8EAFF', to: '1C00D0', direction: 'horizontal'
});
と定義し、
要素のクラス名をgradientとすると、 

こんな感じになります。

 

参考サイト:

http://allabout.co.jp/internet/javascript/closeup/CU20071225A/

Round Cornersに関してはこちら ⇒ 要素のコーナーを丸くする 

要素のコーナーを丸くする

角を丸くする拡張モジュールをインストールしました角を丸くする拡張モジュールをインストールしました

かねてから要望が多かった要素の角を丸くする拡張モジュールをインストールしました。

あまり使いすぎると邪魔になりますが、ポイントで旨くつかうとアクセントとなって良い感じになります。

慣れてくると 以下の方法で同様のコンテンツを幾らでも設置可能ですが、最初の一つ、あるいは慣れるまでは弊社がお手伝いします。

使用方法は以下の通りです。

環境設定環境設定

普段は必要ありませんが、最初に使うとき、使用する角丸の内容を定義します。

  1. 管理セクション≫サイトの環境設定≫Round Cornersページを開きます。
    要素の角を丸くする拡張モジュールをインストール
  2. actbrain corners status:が「The actbrain corners javascript file is available.」となっている事を確認します。
    異なる表示の場合は「Round Corners」モジュールが正常にインストールされていません。表示内容とともに弊社サポートにお知らせ下さい。
  3. 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とすると、 

こんな感じになります

 

参考サイト:

corner()に関してはこちら
 ⇒ http://methvin.com/jquery/jq-corner.html
ccorner()に関してはこちら
 ⇒ http://drupal.0829.info/module/curvycorners 

参考になるかと思います。

Round Cornersモジュールはjquery.corner.jsjquery.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を無効にしているブラウザ、および携帯端末では効果はでません。

 

ワープロ編集

入力に気持ちの良い環境が必要入力に気持ちの良い環境が必要

ホームページの更新をスムーズに、しかも快適に行うには 入力に気持ちの良い環境が必要です。

ただ単に文字を入力しているだけでは表現力も劣り入力作業が覇気がないものになってしまいます。

アクト・ブレインは標準でDrupalに高機能エディタをインストールします。

このページ の ページTOPDrupalサイト構築 の サイトマップDrupalサイト構築 の TOPページ