見栄え見栄え

配色等、自分で決めてゆくと何となく変な感じになるのですが、、、

確かに その通りです。

初心者が自分でホームページを作ろうとしてつまずく原因の一つに、配色の難しさがあります。

思い通りの配色を行っているうちに、ドギツイ感じになったり、何となくイマイチ、、、になったり。

配色を勉強していたなら別ですが、普通の感覚で思い通りに色決めをしてゆくと何となく素人じみたページになってしまいます。

自由に決められる事が逆に なかなか自信をもてない事の良い例です。

弊社が提供する標準テンプレートも配色が変更可能ですが、全ての箇所の配色を個々に指定する訳ではありません。

幾つかのベース色を指定するだけで、中間色も含めて全体の配色を行うようになっています。Drupalのテンプレート(テーマ)の特徴でもあります。

ご自分の好みの色(系)が玄人の決定した色配分と融合する形になっています。

詳しくは→テンプレートによるレイアウト・デザイン

運用開始後のテンプレート画像差し替え

ヘッダ画像が間に合わなかった場合、後で差し替える事ができますヘッダ画像が間に合わなかった場合、後で差し替える事ができます

アクト・ブレインのオリジナル・テーマを利用する事により短期間でのサイト立ち上げが可能になります。

しかし、設置時、ヘッダ画像が間に合わなかった場合や、後で変更したくなった時、以下の手順で差し替える事ができます。

ページトップ画像(top.jpg)の場合。

  1. ワープロ編集画面を表示します。
    ※どのコンテンツの編集画面でも結構です。
  2. [イメージ挿入・編集]アイコンをクリックします。

    イメージプロパティWindowが表示されます。
  3. [サーバーブラウザー]ボタンをクリックします。
  4. [アップロード]リンクをクリックします。
     
  5. アップロードファイル選択ダイアログWindowがOpenします。
     
  6. 予め用意しておいた「top.jpg」を選択します。
     
  7. 「top.jpg」を選択します。
     

ここまでで画像「top.jpg」はサーバにアップロードされ、最新の「top.jpg」になりました。

イメージプロパティ・ダイアログWindowを[x]で抜けます。

 

同様の操作方法で各部画像の差し替えが可能です。

各画像の割り当てを以下の表に示します。 

意味 画像ファイル名
全ページ共通のページ最上位画像 top.jpg
トップページのみの画像 top-page.jpg
トップページへボタン go-site-top.gif
サイトマップページ表示ボタン go-site-map.gif
ページトップへボタン go-page-top.gif

標準テンプレート

各サイト向けに割り当てられたユーザ・スタイルシートでの変更が可能各サイト向けに割り当てられたユーザ・スタイルシートでの変更が可能

アクト・ブレインのオリジナル・テンプレート(テーマ)を利用する事により短期間でのサイト立ち上げが可能になります。

柔軟な標準テンプレート柔軟な標準テンプレート

テンプレートといっても弊社のテンプレートは一つのテンプレートから様々なページデザインが可能です。

有限会社アクト・ブレインのホームページフリーホームページソフト《actag》標準テンプレートサンプルサイト

例えば上記サイトは全て標準テンプレート:t4を使用しています。

画像を変更してトップページのイメージを替えるのは勿論、ページやサイドバーの表示幅、各表示要素の色合いなど、簡単に変更できますので、同じテンプレートを使用した他会員様のホームページとは全く見た目も異なってきます。

詳細はこちら→テンプレートによるレイアウト・デザイン

標準テンプレートの拡張標準テンプレートの拡張

更に、スタイルシートの知識があれば、標準テンプレートから自サイト向けに拡張する事もできます。

標準テンプレート(標準スタイルシート)は書き換えが出来ませんが、各サイト向けに割り当てられたユーザ・スタイルシートでの変更が可能になっています。

上記「柔軟な標準テンプレート」以上のオリジナリティを出す事もできるようになっています。

プロのデザイナーによるテンプレート

どうしてもデザインに凝りたい、オリジナリティを強調したい方どうしてもデザインに凝りたい、オリジナリティを強調したい方

アクト・ブレインのオリジナル・テーマを利用する事により短期間でのサイト立ち上げが可能になります。

しかし、どうしてもデザインに凝りたい、オリジナリティを強調したいというお客様にはプロのデザイナーによるテンプレートを採用する事もできます。

この場合は別途拡張(オプション)料金が必要です。

幾つかの選択肢がありますので選択していただきます。

  1. 標準テンプレートに幾つかの変更を加える。
    10ヶ所以下の小変更、しかも他会員様に当テンプレートの使用許可する場合、無料で対応いたします。
    それ以上の変更・拡張の場合は別途 時間単位の費用をいただきます。
  2. テンプレートモンスター(http://www.templatemonster.jp/)等のテンプレート販売サイトより購入したテンプレートを使用する。
    テンプレート販売サイトからの購入費+弊社による組み込み費用がかかります。
    テンプレート販売サイトからの購入費は
    ・ダウンロードで7,000~
    ・買取で90,000~
    程度です。
    弊社による組み込み費用は2種類あります。
    ①テンプレートがDrupal専用テンプレートの場合、10,000円
    ②テンプレートがDrupal専用テンプレート、しかも当テンプレートの使用を他会員様に許可する場合、無料
    ③テンプレートがDrupal専用テンプレートでない場合、50,000円
  3. プロのデザイナーにオリジナルデザイン作成を依頼する。
    この場合は、希望の詳細をお聞きして見積りいたします。

 

何れを選択した場合も最終的に弊社が責任を持って拡張+設置します。

テンプレートによるレイアウト・デザイン

運用開始後でも新気に入ったテーマがあれば、何時でも切り替え可能運用開始後でも新気に入ったテーマがあれば、何時でも切り替え可能

アクト・ブレインのオリジナル・テーマを利用する事により短期間でのサイト立ち上げが可能になります。

下記の操作は 初期お引渡し時には完了しています。

例えば、アクト・ブレイン無料標準テンプレート(t4)を利用した場合の操作を紹介します。

この操作は弊社によるDrupal-CMS標準構成設置(お引渡し)後、即座に行う事が出来ます。

  1. 管理セクション≫サイトの構築≫テーマをクリックします。
     管理セクション≫サイトの構築≫テーマ
  2. 標準テンプレート一覧の中から「t4」を選択(チェックボックスチェック&ラジオボタンチェック)します。
  3. [設定の保存]をクリックします。
     
  4. 「t4」行の[設定]をクリックします。
  5. ベースの色、リンクの色、ヘッダ上部、ヘッダ下部、テキストの色を選択します。
  6. テーマで表示するページ要素を選択します。
  7. ロゴを表示する場合、用意したロゴをアップロードします。
  8. オリジナルアイコンがある場合はアップロードします。
  9. 本テーマ固有(弊社拡張)の表示用を設定します。
  10. [設定の保存]をクリックします。
     

 

このような簡単な操作で一つの弊社標準テンプレートから様々な個性を持ったサイトが作成できます。

上記設定を行わなくともトップ部分のオリジナル写真を用意する事で個性がでますが、本設定を行うと

  • 写真の高さの定義(0にする事で写真を使わない事も可能)
  • 画面全体の表示色の一括変更
  • 全体幅・サイドバー幅の変更

など、短時間でサイトのオリジナル・デザインが完成します。

オリジナル・デザインのサイトを設置したいが、業者に頼むと費用がかかるし、自分でゼロから作るのは大変。テンプレートを変更したり、スタイルシートを変更したりも難しい。
と あきらめていた方に最適です。

標準無料テンプレート(テーマ)は随時追加されます。

運用開始後でも新たに気に入ったテンプレート(テーマ)があれば、何時でも切り替え可能です。

プロのデザイナーによるテンプレート(テーマ)に切り替えることもできます。

こちらは有料です。

会社案内のパンフレットをホームページにできますか?

はい。できます。

確かに会社案内のパンフレットを印刷して作る費用と比べホームページは割安です。

しかも部分修正が簡単にスピーディーにできますから修正時のコスト面 でも雲泥の差があります。

しかしホームページは会社案内のパンフレットなどの紙媒体と比べてもっとインタラクティブな事ができるのにそうしないのは機能が半減してしまいます。

ですから原稿として会社案内のパンフレットを利用することは反対はしませんが、そのままの状態をスキャニング等で画像にしたホームページはおすすめできません。

アクセスカウンターは見えないようにできますか?

はい。できます。

それ以外にも設定できるケースでは任意の番号からカウントさせることもできます。

ただ、弊社ではアクセスカウンターの視覚化はアクセスしたユーザへの配慮ともなっていると認識しています。

自分以外の人が見ているかどうか。それはアクセス者にとって大きな関心事です。

そういった情報を公開する事は 大変重要な事と思っています。

フォトギャラリー2

サイドバー+複数ページ連動型のフォトギャラリー2サイドバー+複数ページ連動型のフォトギャラリー2

以前ご紹介したフォトギャラリーはページ内で完結するサンプルhtml埋め込み型のものでした。

今回は、htmlを全く扱う事なく、しかもサイドバー+複数ページ連動型のフォトギャラリー2をご紹介します。

サイドバーに表示されたサムネイルをクリックするとメインページに該当する写真を含むコンテンツが表示されますサイドバーに表示されたサムネイルをクリックするとメインページに該当する写真を含むコンテンツが表示されます。

サイドバーに表示されるサムネイルのサイズや件数、並び方は自由に設定できます。

サムネイルをクリックして表示されるコンテンツの表示内容も自由に設定できます。

 

 

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

では 定義方法です。

画像サイズ等の設定画像サイズ等の設定

アップロードした画像から自動的に生成される サムネイルとページ用画像のサイズを設定します。

  1. 管理セクション≫サイトの構築≫画像キャッシュページを開き、[新しいプリセットを追加]タブをクリックします。
    アップロードした画像から自動的に生成される サムネイルとページ用画像のサイズを設定します
  2. プリセットの名前空間:にsmallと入力し、[新しいプリセットを作成]をクリックします。
  3. 新規に作成されたプリセットの定義画面に移ります。
    新規に作成されたプリセットの定義画面
  4. [Scaleを追加]をクリックします。
    [Scaleを追加]をクリック
  5. 自動的に調整すべき画像サイズ(この場合は90x90ピクセル)を入力し、[アクションを追加]をクリックします。
  6. 更にもう一つページ内表示用のプリセットを、追加します。(Ex.middle、500x500)

 

写真を格納するフィールド(カラム)を含んだ新コンテンツタイプを作成写真を格納するフィールド(カラム)を含んだ新コンテンツタイプを作成

  1. 管理セクション≫コンテンツの管理≫コンテンツタイプページで[コンテンツタイプの追加]タブをクリックします。
  2. 名前:Photos と入力します。
  3. タイプ:photos と入力します。
  4. 説明:Imagefieldを含んだコンテンツ と入力します。
    (2.~4.は 自分で解る言葉を入力して下さい。)
  5. [コンテンツタイプの保存]をクリックします。
  6. 管理セクション≫コンテンツの管理≫コンテンツタイプページに戻ります。
  7. 先ほど追加したPhtos行の [manage fields]をクリックします。
  8. New field:にphoto。
  9. field_name:にphoto。
  10. Select afield type-で画像を選択し、[保存]をクリックします。
    (8.~9.は別の名称でもOKです)
  11. [保存]するとフィールドの管理画面になります。以下の内容を設定します。
  12. Permitted upload file extentions.:
    アップロード可能なファイル拡張子をスペース区切りで入力します。
    デフォルトで「jpg jpeg png gif」が入っています。
  13. Minimum resolution for Images:
    アップロード可能な最小画像サイズを指定します。「200x200」位を指定します。
  14. Maximum resolution for Image:
    アップロード可能な最大画像サイズを指定します。「800x800」位を指定します。
  15. Path settings File path:
    アップロード先のサーバディレクトリの指定です。空欄にしておいて下さい。
  16. File size restrictions
    Maximum upload size per file:

    アップロードファイルの最大サイズです。「2M」にして下さい。
  17. Maximum upload size per node:
    ノードに付きの最大サイズです。「2M」にして下さい。
  18. ALT text settings
    Enable custom alternate text:

    画像アップロード時、画像のALT属性の変更を許可する場合はチェックします。
  19. Default ALT text:
    デフォルトのALT属性値を入力します。
  20. Title text settings
    Enable custom title text:

    画像アップロード時、画像のTitle属性の変更を許可する場合はチェックします。
  21. Default Title text:
    デフォルトのTitle属性値を入力します。
  22. 全般の設定
    必須:
    画像のアップロードを必須とする場合チェックします。
  23. 値の数:
    説明では「Maximum number of values users can enter for this field.'Unlimited' will provide an 'Add mode' button so the users can add as many values as they like.」となっています。アップロード可能な最大値を入力します。(1以外の値は未検証です。1が安全です)
  24. Default list value:
    ノードとして表示したときに 本文等と一緒に表示するかどうかのデフォルト設定を選択します。(リスト=表示、Hidden=非表示)
  25. [フィールド設定の保存]をクリックします。

 

表示形式を設定します表示形式を設定します

  1. 管理セクション≫サイトの構築≫ビューページで[追加]タブをクリックします。
  2. ビューの名前:を入力します。
  3. ビューの説明:、ビューのタグ:を必要に応じて入力します。特に必要はありません。
  4. ◎ノード を選択し[次へ]をクリックします。
  5. ビューの編集画面になります。
  6. デフォルトのままで フィールドの右にある[+]をクリックします。
  7. 画面下の方にデフォルト:フィールドの追加エリアが表示されます。
  8. ここに全ての表示可能な項目が表示されています。表示に必要な項目を選択し[追加]をクリックします。
    先ほど追加したフィールドphoto(field_photo)を[追加]します。
    他にタイトルや、本文など、表示したい項目を[追加]して下さい。
  9. フィルタの右にある[+]をクリックします。
  10. 画面下にデフォルト:フィルタの追加エリアが表示されます。
  11. ノード:タイプノード:掲載をチェックし[追加]をクリックします。
  12. ノード:タイプノード:掲載各々、Photo、掲載する。を選択します。
  13. 上記定義はこれから作成するページ用、ブロック(サイドバー)用のデフォルト設定になります。
    デフォルト ≫の下にあるプルダウンメニューで[ページ]を選択し[ディスプレイの追加]をクリックします。
  14. デフォルト値がコピーされページ用ビューの設定が右の方に展開します。
  15. 基本設定:
    名前:
    Photo Galleryページ。
    タイトル:なし。
    スタイル:フォーマットなし。
    行スタイル:フィールド。
    JAXの使用:いいえ。
    ページャの使用:いいえ。
    表示アイテム数:10。
    重複行の削除:いいえ。
    アクセス:無制限。
    ブロックへのフォーム表示:いいえ。
    ヘッダ:なし。
    フッタ:なし。
    結果が殻の場合のテキスト:なし。
    テーマ:インフォメーション。
  16. ページ設定:
    パス:
    photo-gallery。
    メニュー:メニューなし。
  17. リレーションシップ:未定義。
  18. アーギュメント:未定義。
  19. フィールド:
    photoにmiddle
    サイズ選択。
  20. ノード:タイトル表示。
  21. ノード:本文表示。
  22. 並べ替えの順:未定義。
  23. フィルタ:デフォルトのまま。
  24. デフォルト ≫の下にあるプルダウンメニューで[ブロック]を選択し[ディスプレイの追加]をクリックします。
  25. デフォルト値がコピーされブロック(サイドバー)用ビューの設定が右の方に展開します。
  26. 基本設定:
    名前:
    Photo Galleryブロック。
    タイトル:なし。
    スタイル:グリッド。
    行スタイル:フィールド。
    AJAXの使用:いいえ。
    ページャの使用:いいえ。
    表示アイテム数:6。
    続き...リンク:はい。
    重複行の削除:いいえ。
    アクセス:無制限。
    ブロックへのフォーム表示:いいえ。
    ヘッダ:なし。
    フッタ:なし。
    結果が殻の場合のテキスト:なし。
    テーマ:インフォメーション。
  27. ブロック設定:
    管理:
    Photo Gallery。
    リレーションシップ:未定義。
    アーギュメント:未定義。
  28. フィールド:
    photoにsmall
    サイズ選択。
  29. ノード:タイトルを非表示に設定。
  30. ノード:本文を非表示に設定。
  31. 並べ替えの順:未定義。
  32. フィルタ:デフォルトのまま。
  33. 画面下の方でライブプレビューで表示を確認し[保存]します。

 

ブロック表示位置の設定ブロック表示位置の設定

作成したブロックのサイドバー中の表示位置を設定します。

  1. 管理セクション≫サイトの構築≫ブロックページを表示します。
  2. 新規に作成したブロック(Photo Gallery)がありますので、表示したいバー配下に移動し[保存]します。

 

 

以上で、コンテンツの投稿準備ができました。

管理セクション≫コンテンツの作成≫Photosページより新コンテンツを追加して行く事で当サイトの左サイドバーにあるような「Photo Gallery」が完成します。

本サイトのように「投稿者や投稿日」を非表示にするには、管理セクション≫サイトの構築≫テーマページで[設定]タブをクリックし、投稿情報の表示中からPhotosのチェックを外す事で表示しなくなります。

フォトギャラリー

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

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

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

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

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

  1. 管理セクション≫サイトの環境設定≫Galleriaページを開きます。 
    ページ内で簡単にフォトギャラリーができるGalleriaモジュール
  2. 履歴を記録し戻るボタンで戻れるようにする: 戻るボタンを使用する場合はチェックします。
  3. フェードイン時間(ミリ秒):フェイドインしない場合は「0」を設定して下さい。
  4. メイン画像を表示する要素id:に要素idを入力します。通常変更の必要はありません。
  5. サムネイルを表示するコンテナ:サムネイルを表示するコンテナを指定します。通常変更の必要はありません。
 
次にコンテンツ入力で以下の手続きを行います。
 
  1. コンテンツ編集画面を開きます。
  2. [ソース]状態にし、以下の内容をペーストします。
      
  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"> に戻します。

外部リンクに逃がさない

2009/1/19現在、External linkモジュールにより、外部リンクは自動的に新Window表示に設定されています。
従って、機能的にGreyboxモジュールを使用する必要性は無くなりました。Greyboxモジュールの使用は視覚的効果のみとなります。

 

Greyboxモジュールを追加しました。

閲覧者を簡単に外部サイトに逃さない。対策としてGreyboxモジュールを追加しました。

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

  1. 管理セクション≫サイトの環境設定≫Greyboxページを開きます。
    閲覧者を簡単に外部サイトに逃さない。対策としてGreyboxモジュールを追加
  2. Class name:を入力します。デフォルトでgreyboxと入っています。
    特に変更する必要はありません。
  3. Window height(in pixels):にポップアップWindowの高さを設定します。
  4. Window width(in pixels):にポップアップWindowの幅を設定します。
 

例えば: 

http://www.act-brain.co.jp 

というようなリンクがあるとします。 

このリンクのクラス名を「greybox」とすると、

http://www.act-brain.co.jp 

となります。クリックしてみて下さい。

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