スタイルの編集

CSS Designer を使用して、テーマの Style.css ファイルをカスタマイズします。

CSS Designer のオープン

テーマのスタイルを編集するには、幾つかの方法があります。
  • Portal Designer で、ポップアップ・メニューから「スタイルの編集」を選択します。 アクティブ・テーマの Style.css ファイルが、CSS Designer に開きます。
CSS Designer (Styles.css というラベルの付いたタブ) では、編集に使用する 2 つのビューがあります。プレビュー・ペイン (左) とソース・エディター (右) です。

Page Designer の Styles.css ファイル

上記の画像は、プレビュー・ペイン内の themeskin.html ファイルを示しています。 このファイルでは、アクティブなテーマおよびスキンに影響を与える、フォントなどのスタイルを調べることができます。 プレビュー・ペインの左側で、「アウトライン」ビューが「スタイル」ビューに変わっていることに注目してください。 テーマおよびスキンに変更を加えるには、「スタイル」ビュー内のスタイル・エレメントの名前をクリックします。 この例では、.wpsToolBar エレメントを強調表示すると、プレビュー・ペイン内の対応するエレメント、および Styles.css ファイル内のソース・ペインも強調表示されることに注目してください。

ポートレット・アプリケーション内でフォントなどのスタイルをカスタマイズするには、portlet.html ファイルを使用します。

テーマ内のスタイルの編集

Page Designer でテーマを編集中に CSS Designer を開くと、新規または既存のスタイル・シートにリンクすることができます。 また、新規クラスを指定することもできます。 Page Designer を使用したテーマの編集について詳しくは、テーマの編集を参照してください。

CSS Designer を開くには、以下の手順を実行してください。ダイアログ・ボックスが表示されます。
  • Rational® Developer メニュー・バーで、「編集」 > 「スタイルの編集」を 選択する。 ダイアログ・ボックスが表示されます。
  • 編集したいスタイルの局面を選択してから、「OK」をクリックする。

または

Page Designer 内のオープン・テーマで、編集する項目を選択し、「プロパティー」ビューで変更を加えてください。 選択項目に対してスタイル・クラス・ルールが定義されている場合、「すべての属性」ビューの「クラス」フィールドにリストされます。 「すべての属性」ビューにアクセスするには、「プロパティー」ビューのツールバーの右上にあるテーブル・アイコンをクリックしてください。 これにより、「プロパティー」ビューが、Page Designer で選択した項目に関連したすべての属性のリストに変わります。 このアイコンをもう一度クリックすると、「プロパティー」ビューに戻ります。

関連タスク
Portal Designer の使用
レイアウトの定義
スキンの処理
テーマの処理
ポータル・ページへのポートレットの追加

(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.
(C) Copyright IBM Japan 2005