| Oracle Fusion Middleware Oracle Portalユーザーズ・ガイド 11gリリース1 (11.1.1) B61383-02 |
|
 前 |
 次 |
タブ、ポートレットおよびアイテムに属する特定のスタイル要素に加えて、バナー、ページまたはアイテム・リージョンの背景などの共通要素に使用される外観およびフォントを定義できます。アイテム・リージョンまたはページの背景のイメージおよび色、バナーの高さおよび位置、バナーの色およびフォントを定義します。
この項では、一般的に使用されるスタイル要素に色およびフォントを定義する方法について説明します。この項の内容は次のとおりです。
ページまたはアイテム・リージョンの背景の色またはイメージは、そこで使用されているスタイルを編集して選択します。
|
注意: ページでHTMLページ・スキン・テンプレートを使用する場合、ページの背景色はテンプレートから取得され、定義されたスタイルに指定された背景色は無視されます。 例外は、ページ・スキンでOracle Portalスタイルによって生成されたクラスを使用する場合です。たとえば、Oracle Portalのスタイル要素クラスを<body> HTMLタグに配置して、 これにより、宣言型のスタイルを介してページ・スキンを使用するすべてのページの背景色を変更できます。(Oracle Portalスタイル要素クラスの詳細は、11.12項「HTMLテンプレートおよびCSSでのPortalスタイル要素クラスの使用」を参照してください。) 「共通」スタイル要素の「背景」プロパティで、カラー・パレットにも表示されない色の16進値を入力すると、タブおよびポートレットには丸い角が表示されません。 |
図11-11は、異なる背景色を設定した同じアイテム・リージョンを示しています。
背景イメージがページまたはアイテム・リージョンより小さい場合は、ページまたはリージョン全体が埋まるように、イメージがパターンとして繰り返されます。
スタイルを変更するときは注意してください。行ったどのような変更も、そのスタイルを使用するすべてのページおよびサブページ、タブおよびアイテム・リージョンの外観に影響を与えます。
ページまたはアイテム・リージョンの背景を変更するには、次の手順を実行します。
Oracle Portalにログインします。
「構築」タブをクリックして、前面に表示します。
「ページ・グループ」ポートレットの「作業場所」ドロップダウン・リストから、該当するスタイルを所有するページ・グループを選択します。
デフォルトでは、「ページ・グループ」ポートレットは「Portalビルダー」ページの「構築」タブにあります。
|
ヒント: スタイルが複数のページ・グループで使用されている場合は、「共有オブジェクト」ページ・グループにあります。 |
「レイアウトと外観」セクションの「スタイル」で、編集するスタイルをクリックします。
「スタイルの編集」ページの「プロパティ」タブが開きます。
「スタイル要素のタイプ」セクションで、「共通」を選択します。
「スタイル要素のプロパティ」セクションで、「背景」を選択します。
共通要素に関連するスタイル要素のプロパティのリストおよび説明は、11.7項「共通スタイル要素の定義」を参照してください。
カラー・パレット内の色をクリックするか、「背景色」フィールドに16進値(#CC9999など)を入力します。
パレット内の色をクリックすると、「背景色」フィールドに16進値が自動的に移入されます。カラー・パレットにも表示されない色の16進値を入力すると、タブおよびポートレットには丸い角が表示されません。
ページまたはリージョンの背景にイメージを適用するには、「背景イメージ」フィールドの横の「ブラウズ」ボタンをクリックしてファイル・システム上でそのイメージを探します。
あるいは、「背景イメージ」フィールドに、次のような使用するイメージの名前と場所を入力します。
c:\webimages\pagebg.gif
イメージ・ファイルのタイプは、JPEG、GIFまたはPNGである必要があります。
|
ヒント: 背景イメージを削除するには、イメージの横の「削除」アイコンをクリックします。 |
「適用」をクリックします。
「プレビュー」セクションがリフレッシュされ、選択した色とイメージが表示されます。
「閉じる」をクリックして変更を保存し、「スタイルの編集」ページを終了します。
色鮮やかなラベル付きのバナーをアイテム・リージョンに追加すると、特定のトピックまたは用途専用のページ領域に注意を引くことができます。テキストの文字位置とバナーの高さおよび色は、アイテム・リージョンに適用されるスタイルを編集して制御します。
この項では、アイテム・リージョンのバナーに対するバナーの高さ、色およびテキストの文字位置を変更する方法について説明します。この項の内容は次のとおりです。
図11-12は、バナーに対して異なる高さとテキストの文字位置を設定した同じアイテム・リージョンを示しています。
スタイルの変更は、そのスタイルを使用するすべてのオブジェクトの外観に影響を及ぼすため、スタイルの変更には注意が必要です。
アイテム・リージョン・バナーの高さとテキストの文字位置を変更するには、次の手順を実行します。
Oracle Portalにログインします。
「構築」タブをクリックして、前面に表示します。
「ページ・グループ」ポートレットの「作業場所」ドロップダウン・リストから、該当するスタイルを所有するページ・グループを選択します。
デフォルトでは、「ページ・グループ」ポートレットは「Portalビルダー」ページの「構築」タブにあります。
|
ヒント: スタイルが複数のページ・グループで使用されている場合は、「共有オブジェクト」ページ・グループにあります。 |
「レイアウトと外観」セクションの「スタイル」で、編集するスタイルをクリックします。
「スタイルの編集」ページの「プロパティ」タブが開きます。
変更するバナーのタイプに関連する要素タイプおよびプロパティを選択します。
アイテム・リージョンのバナーの高さとテキストの文字位置を変更するには、次の手順を実行します。
「スタイル要素のタイプ」セクションで、「共通」を選択します。
「スタイル要素のプロパティ」セクションで、「リージョン・バナー」を選択します。
ページとリージョンに関連するスタイル要素のプロパティのリストおよび説明は、11.3項「スタイル要素のプロパティ」を参照してください。
アイテム・グループのバナーの高さとテキストの文字位置を変更するには、次の手順を実行します。
「スタイル要素のタイプ」セクションで、「アイテム」を選択します。
「スタイル要素のプロパティ」セクションで、「バナーごとのグループ」を選択します。
「プレビュー」セクションでバナーのスタイル要素をクリックして、選択することもできます。
「高さ」フィールドに、バナーの高さをピクセルで入力します。
バナーの高さは、選択したテキストのサイズより約20から25%高く設定します。たとえば、テキスト・サイズが8の場合は、バナーの高さを10に設定します。
「テキストの文字位置」リストから、バナー・テキストの文字位置(「左」、「中央」、「右」)を選択します。
「適用」をクリックします。
「プレビュー」セクションがリフレッシュされ、選択した高さとテキストの文字位置が表示されます。
必要に応じて、バナーの各スタイル要素を編集します。
各要素を変更したら、「適用」をクリックします。
「閉じる」をクリックして変更を保存し、「スタイルの編集」ページを終了します。
図11-13は、アイテム属性に異なるバナーとフォントの色を設定した同じアイテム・リージョンを示しています。
スタイルの変更は、そのスタイルを使用するすべてのオブジェクトの外観に影響を及ぼすため、スタイルの変更には注意が必要です。
バナーとフォント設定を変更するには、次の手順を実行します。
Oracle Portalにログインします。
「構築」タブをクリックして、前面に表示します。
「ページ・グループ」ポートレットの「作業場所」ドロップダウン・リストから、該当するスタイルを所有するページ・グループを選択します。
デフォルトでは、「ページ・グループ」ポートレットは「Portalビルダー」ページの「構築」タブにあります。
|
ヒント: スタイルが複数のページ・グループで使用されている場合は、「共有オブジェクト」ページ・グループにあります。 |
「レイアウトと外観」セクションの「スタイル」で、編集するスタイルをクリックします。
「スタイルの編集」ページの「プロパティ」タブが開きます。
該当する要素の色とフォントを変更します。
アイテム・リージョンのバナーの色とフォントを変更するには、次の手順を実行します。
「スタイル要素のタイプ」セクションで、「共通」を選択します。
「スタイル要素のプロパティ」セクションで、「リージョン・バナー」または「リージョン・バナー・テキスト」を選択します。
共通要素に関連するスタイル要素のプロパティのリストおよび説明は、11.3.4項「共通」を参照してください。
「バナーごとにグループ化」の色とフォントを変更するには、次の手順を実行します。
「スタイル要素のタイプ」セクションで、「アイテム」を選択します。
「スタイル要素のプロパティ」セクションで、「バナーごとのグループ」、バナー・テキストごとのグループまたはバナー・リンクごとのグループのいずれかを選択します。
ページとリージョンに関連するスタイル要素のプロパティのリストおよび説明は、11.3項「スタイル要素のプロパティ」を参照してください。
「プレビュー」セクションでバナーのスタイル要素をクリックして、選択することもできます。
カラー・パレット内の色をクリックするか、「色」フィールドにその色の16進値(#66FF66など)を入力します。
パレット内の色をクリックすると、「色」フィールドに16進値が自動的に移入されます。
「フォント飾り」で、次のいずれかを選択します。
<なし>: 飾りなしの場合(次の注意を参照)
プレーン: 飾りなしの場合(次の注意を参照)
下線: 下線付きのテキストの場合
取消し線: 取消し線が引かれたテキストの場合
下線と取消し線:取消し線も引かれた下線付きのテキストの場合
|
注意: 「プレーン」および<なし>を選択すると、ほとんどのアイテム・タイプに同じ効果が適用されます。ただし、ハイパーリンクとして表示されるアイテムに適用すると、次のように効果は異なります。
|
フォントを選択します。
「<デフォルト>」フォントを選択すると、ユーザーのブラウザで指定されたデフォルトのフォントで、テキストがレンダリングされます。
フォント・サイズを指定し、単位を選択します。
px: 固定単位(ピクセル。閲覧者のモニターが基準)
pt: 固定単位(ポイント)
em: 相対単位(最後に指定されたフォントのフォント・サイズが基準)
ex: 相対単位(最後に指定されたフォントのXのサイズが基準)
%: 相対単位(最後に指定されたフォントのフォント・サイズが基準)
「フォント・スタイル」で、次のいずれかを選択します。
プレーン
太字
斜体
太字と斜体
「適用」をクリックします。
「プレビュー」セクションがリフレッシュされ、選択した色とフォントが表示されます。
必要に応じて、バナーの各スタイル要素を編集します。
各要素の色またはフォントを変更した後、「適用」をクリックします。
「閉じる」をクリックして変更を保存し、「スタイルの編集」ページを終了します。
