Web サイト・スタイルの編集

Web サイト・スタイルは、「プロジェクトの作成」ウィザードの「Web スタイルの選択」ページで「Web Site Designer で使用可能」を選択した場合に、プロジェクト作成中に選択することができます。Web Site スタイルを選択すると、Web Site Designer ツールを使用した選択で使用可能なテンプレートと一貫性の あるサンプル・テンプレートが、WebFacing ページに適用されます。 詳しくは、Web Site Designer 文書を参照してください。

Web Site スタイルは、Web Site Designer を使用してテンプレートを適用し、Web サイトのナビゲーションを 編成するその他の Web アプリケーションがある場合に使用する必要があります。 Web Site スタイルに提供されたサンプル・テンプレートには、ナビゲーション・バーもサイト・マップもありません。 これらは、単一ブラウザー・セッションで複数の WebFacing プロジェクトを実行するためのサポートが使用可能になるまで、組み込むことができません。 ただし、WebFacing プロジェクトは、Web プロジェクトのナビゲーションに組み込み、Web サイトと同じ ルック・アンド・フィールを使用して変更することができます。
注: アプリケーションが相対 URL を必要としている場合、Web Site Designer スタイルは不適切なことがあります。

プロジェクトでスタイルが保管されているディレクトリー構造を表示するには、「ナビゲーター」タブを選択します。 「ナビゲーター」ビューでは、スタイル・ディレクトリーへのパスは、 <project_name>¥WebContent¥webfacing¥styles および <project_name>¥WebContent¥theme です。

アプリケーション・エリアとコマンド・キー・エレメントで使用されるスタイルを編集する場合は、 「スタイル」プロパティー・ページを使用するか、または IDE に提供されたツールを直接 使用して、¥apparea ディレクトリーの apparea.css ファイルを編集します。 「スタイル」プロパティー・ページを使用すると、進行中の変更を簡単に視覚化し、ウィンドウや サブファイル・レコードなどの DDS エレメントにこれらの変更がどのように適用されるかを確認することができます。 「スタイル」プロパティー・ページによって行われる変更は、apparea.css ファイルの 対応するスタイル・クラス名に適用されます。 IDE の CSS エディターを使用するには、編集したいファイルを右クリックして、 「アプリケーションから開く」 > 「CSS Designer」を選択します。

アプリケーション・エリアとコマンド・キーの周囲のレイアウトを編集する場合は、Web Site Designer を使用してユーザー定義ファイルを編集するか、¥theme および ¥webfacing¥styles¥chrome ディレクトリー内のファイル・システムのファイルを選択して直接編集してください。

IDE の CSS エディターを使用して ¥theme ディレクトリー内のファイルを編集するには、編集したい CSS ファイルを右クリックして、 「アプリケーションから開く」 > 「CSS Designer」を選択します。レイアウトおよびフレームを編集するには、 WFB_blue.jtpl ファイルを右クリックして、「アプリケーションから開く」 > 「テンプレート用 Page Designer」を選択します。 スタイルおよびテンプレート・ファイルが適用される PageBuilder.jsp ファイルを編集するには、¥webfacing¥styles¥chrome ディレクトリーの PageBuilder.jsp ファイルを右クリックして、「アプリケーションから開く」 「Page Designer」を選択します。 PageBuilder.jsp に関連するテンプレート・ファイルを Page Designer 内で編集するには、「設計」ビューで 「アプリケーションからページ・テンプレートを開く」 > 「テンプレート用 Page Designer」を右クリックします。これは、「テンプレート用 Page Designer」を使用して、WFB_blue.jtpl ファイルを直接開く場合と同じです。 テンプレートに関連する CSS スタイル・ファイルを「テンプレート用 Page Designer」で編集するには、 「スタイル」タブ・グループで、「スタイル」ビューを選択して、 「blue.css」 > 「編集」を右クリックします。 これは、CSS Designer を使用して CSS ファイルを直接開く場合と同じです。

Web Site Designer を使用して、レイアウトおよびフレームのファイルを編集するには、WebFacing プロジェクトのビューをアクティブ化してプロジェクトを展開し、次に、「スタイル」 > 「Web サイト」フォルダーを展開します。 「.website-config」ファイルを右クリックし、「アプリケーションから開く」 > 「Web Site Designer」を選択します。テンプレートを編集するには、「ナビゲーター」ビューに切り替えて ¥theme ディレクトリーの下にある *.jtpl ファイルを右クリックし、「アプリケーションから開く」 > 「テンプレート用 Page Designer」を選択します。CSS スタイルを編集するには、¥theme の下の「*.css」ファイルを右クリックし、「アプリケーションから開く」 > 「CSS Designer」を選択します。

スタイルのプロパティーは、WebFacing プロジェクトの中のスタイル・フォルダーの別個のフォルダーに保管されます。
スタイル変更で編集できるファイル ファイルが保管されるディレクトリー 適用される Web ページの一部 「プロパティー」ページを使用して編集可能?
apparea.css ¥styles¥apparea
  • アプリケーション・エリア
  • コマンド・キー
はい
  • PageBuilder.jsp
  • ユーザー定義 .css ファイル

¥chrome

¥chrome¥html

¥theme

  • レイアウト
いいえ
注: スタイルの変更を有効にするために、ソース・ファイルを再変換することは必要ありません。
関連資料
Web 設定
関連情報
WebFacing アプリケーションのカスタマイズ