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

ページ内で簡単にフォトギャラリーができる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導入～運用までのおおまかな流れは以下のようになります。 

Drupal-CMS導入プロセス

1. Drupal-CMS導入のお問い合わせ（ お客様 ⇒ 弊社 ）  
2. お申し込み内容および条件の確認（ お客様 ＋ 弊社 ） 
   ※ ドメイン名を決定
   ※ 見込みコンテンツ量/トラフィックなどによるサーバーグレードの確認。
   ※ 基本セット（基本構成）導入内容の確認。
   ※ オプション追加内容の確認。
   ※ サイトイメージの確認。
3. お申し込み（ お客様 ⇒ 弊社 ）
4. 『プラン最終確認メール』（ 弊社 ⇒ お客様 ）
   ※ 2～3．で確認した内容が記載されています。
   ※ 月額費用のお支払方法が口座振替の場合は口座振替申込書を郵送いたします。
5. 初期費用お支払い（ お客様 ⇒ 弊社 ） 
   【初期費用】をPayPalまたは銀行振込でお支払い下さい。
   ※ メールで振り込んだ旨のご連絡を頂ければ確認が早くなります。
   【書類返送】
   ○ 口座振替申込書に必要事項記入＋捺印。
   の上、返信用封筒に入れて お送り下さい。
   （月次費用のお支払いを銀行振込またはPayPalで行う場合、口座振替申込書は不要です）
6. 初期費用の入金確認（ 弊社 ） 
7. TOPページの写真など固定的な画像のご提供（ お客様 ⇒ 弊社 ）
   ご提供いただく内容に関してはこちら ⇒ Drupal-CMS導入の流れ
8. Drupal-CMS導入（ 弊社 ）
   ○ ドメイン取得。
   ○ サーバー環境の設定。
   ○ 基本セット（基本構成）のインストール。
   ○ オプションのインストール（ご希望の場合）
   を行います。
   最大6営業日かかります。
   ※ オプションで「コンテンツの初期導入」をご選択いただいている場合は
    　量により もう少し時間を頂く場合があります。
9. 『サーバー設置終了報告』メール（ 弊社 ⇒ お客様 ） 
   この後、お客様によるコンテンツの投入が始まります。 
   コンテンツの投入方法は
   ⇒ Drupal-CMS導入の流れ
   ⇒ 主な操作方法
   などをご覧ください。

Drupal-CMS運用プロセス

導入のご依頼後、約6営業日で お客様専用のサイト導入・設置が完了します。

これからが本番です。

今までのホームページ制作サービスは ここまでで当面必要なコンテンツが全て業者により投入された形で終了します。
作業はここまで、更新が必要な場合は また業者に有料で頼む。繰り返しでした。

アクト・ブレインのサービスの本番はこれからです。初期導入後はホームページの器だけでコンテンツは空です。
（オプションでコンテンツの初期投入を選択された場合は別）

アクト・ブレインは運用を以下の内容でサポートします。

操作方法

基本的な操作方法は操作中の画面やオンラインドキュメントを見れば慣れに従って問題はないと思いますが、日々のホームページ更新は時間との勝負です。

不便を感じたら何時でもご相談頂けます。

管理者機能の調整

Drupal-CMS導入後はお客様の導入時現在のスキルにあわせて管理者機能を設定してあります。

お客様のご使用れる程に慣れたり、欲が出てきたりします。導入直後の状態は比較的安全に設定して在りますので、その分自由度に欠けたりします。

そのような状態に応じ、随時管理者権限を調整してゆきます。

拡張モジュールの導入・保守

世界中のDrupal-CMSから随時、有用な拡張モジュールがリリースされます。

お客様の日々のご要望にお答えできる拡張モジュールがリリースされた折には随時インストールします。

また、Drupal-CMS本体やDrupal-CMS導入時、および随時追加インストールした拡張モジュールのセキュリティパッチやバージョンアップを随時行います。

機能拡張

Drupal-CMS導入時もアクト・ブレイン独自の拡張が行われていますが、お客様の日々のご要望にお答えできる拡張モジュールが存在しない場合、アクト・ブレイン独自の拡張を随時行います。