Drupalの操作

ページ内で簡単にフォトギャラリー

ページ内で簡単にフォトギャラリーができるGalleriaモジュールを追加しました。

ここで ご紹介するフォトギャラリーはページ内で完結するタイプのフォトギャラリーです。複数のコンテンツ（ページ）にまたがる より応用性のあるフォトギャラリーはフォトギャラリー2でご紹介しています。

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

1. 管理セクション≫サイトの環境設定≫Galleriaページを開きます。 
   
2. 履歴を記録し戻るボタンで戻れるようにする： 戻るボタンを使用する場合はチェックします。
3. フェードイン時間(ミリ秒):フェイドインしない場合は「0」を設定して下さい。
4. メイン画像を表示する要素id：に要素idを入力します。通常変更の必要はありません。
5. サムネイルを表示するコンテナ：サムネイルを表示するコンテナを指定します。通常変更の必要はありません。

1. コンテンツ編集画面を開きます。
   
2. [ソース]状態にし、以下の内容をペーストします。
   <div class="actbrain_galleria"><div id="actbrain_galleria_mainimage"> </div><div class="actbrain_galleria_thumbnails"><div><ul id="x-actbrain_galleria-ul"><li class="active"><img title="Title1" src="" _fcksavedurl="" width="90" /> </li><li><img title="Title2" src="" _fcksavedurl="" width="90" /> </li><li><img title="Title3" src="" _fcksavedurl="" width="90" /> </li><li><img title="Title4" src="" _fcksavedurl="" width="90" /> </li></ul><div class="actbrain_galleria_stop"> </div></div></div></div>  
3. 編集画面が こんな感じになります。
   
   [×]や見た目は気にしないで下さい。
4. 次に[×]の画像部分をクリックし、[イメージ挿入/編集]ツールで表示したい画像をアップロード、またはサーバブラウザで選択します。
5. 幅 [90]にし、[OK]をクリックします。4つある[×]画像に対してそれぞれ行います。
6. 最後に[ソース]をクリックし、ソースWindowにします。
7. <ul id="x-actbrain_galleria-ul"> となっている所を探し、「x-」を削除し、再度[ソース]をクリックします。
8. すると、編集画面が
   
   のような感じになります。
9. [保存]して表示を確認して下さい。
    

 画像を入れ替えたりする場合は<ul id="actbrain_galleria-ul"> の部分を<ul id="x-actbrain_galleria-ul"> に戻します。

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

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に関してはこちら ⇒ 要素のコーナーを丸くする 

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

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

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

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

環境設定

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

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とすると、 

参考サイト：

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を無効にしているブラウザ、および携帯端末では効果はでません。

Drupalはオープンソースとして開発・配布がおこなわれている非常に洗練されたCMSです。

他のCMS(Movable TYpe、WordPress等)に比べ、より企業(商店)寄りのホームページが構築できると考えています。

理由としては大別して以下のようになります。

「入りやすさ」の面で

• 標準でブックという機能を持ち、おおまかなサイト構成を考える時に 想像しやすい。
• メニューナビゲーションの作成や変更が容易。
• お問い合わせなどのフォームに高度なものが簡単に追加できる。
• アンケート、フォーラムなど費用をかけずに追加できる。

「機能的な面」で

• カテゴリや新着など管理しやすい。
• 登録すれば 文章を打つだけで自動的にリンクが生成される。
• 同時に携帯端末に対応できる(閲覧のみ)
• 標準で複数ユーザの管理が可能。
  （共同作業等でユーザ別に制限等が かけられる）
• 自由度が高く お客さまの追加要求に答えられる。

「SEOの面」で

• コンテンツ更新に対する複数ヶ所への新着通知(Ping)が容易に行える。
• htmlを意識することなくSEO情報を出力できる。

が挙げられます。

勿論他のCMSと同様 ワープロ編集やRSS、その他遜色なく揃っています。

Drupal自身の詳しい情報としては弊社運用のDrupalブック。

その他当サイトの左メニュー下の新着情報経由で様々なサイトで説明されています。

日本語の説明が豊富です。

その他、何か気になる点がありましたら、またお問い合わせ下さい。