ヘッダーをスキップ
Oracle Fusion Middleware Oracle Portalユーザーズ・ガイド
11gリリース1(11.1.1)
B61383-01
  ドキュメント・ライブラリへ
ライブラリ
製品リストへ
製品
目次
目次
索引
索引

戻る
戻る
 
次へ
次へ
 

11.5 ポートレットのスタイルの定義

次の各項で、ポートレットのスタイルを定義する色とフォントを変更する方法について説明します。

11.5.1 ポートレット・ボディ色の変更

背景(またはボディ)の色を使用して、ページ上の特定の機能上の分野や特定のオブジェクト・タイプに注意を引くことができます。たとえば、ポートレットのメイン・ボディの色を変更できます。ポートレットのボディ色を変更するには、ポートレットが配置されたページで使用されるスタイルを編集します。

図11-3は、異なるボディ色を設定した同じポートレットを示しています。

図11-3 異なるボディ色を設定した同じポートレット

図11-3の説明が続きます
「図11-3 異なるボディ色を設定した同じポートレット」の説明

OracleAS Porta用に手作業で作成されたポートレットは、そのポートレットが配置されたページのスタイルではなく、独自のスタイルを使用することがあります。このような場合、これらのポートレットでは、適用されたスタイルではなく、作成されたときに指定したスタイルが使用されます。

スタイルの変更は、そのスタイルを使用するすべてのポートレットの外観に影響を及ぼすため、スタイルの変更には注意が必要です。


注意:

ページ・ポートレットおよびナビゲーション・ページについてのスタイルに関する特別な考慮事項は、11.5.4項「ページ・ポートレットおよびナビゲーション・ページのスタイルの制御」を参照してください。

ポートレット・ボディ色を変更するには、次の手順を実行します。

  1. Oracle Portalにログインします。

  2. 「構築」タブをクリックして、前面に表示します。

  3. 「ページ・グループ」ポートレットの「作業場所」ドロップダウン・リストから、編集するスタイルを所有するページ・グループを選択します。

    デフォルトでは、「ページ・グループ」ポートレットは「Portalビルダー」ページの「構築」タブにあります。


    ヒント:

    スタイルが複数のページ・グループで使用されている場合は、「共有オブジェクト」ページ・グループにあります。

  4. 「レイアウトと外観」セクションの「スタイル」で、編集するスタイルをクリックします。

    「スタイルの編集」ページの「プロパティ」タブが開きます。

  5. 「スタイル要素のタイプ」セクションで、「ポートレット」を選択します。

  6. 「スタイル要素のプロパティ」セクションで、「ポートレット・ボディ色」を選択します。

    ポートレットに関連するスタイル要素のプロパティのリストおよび説明は、11.3.3項「ポートレット」を参照してください。

  7. カラー・パレット内の色をクリックするか、「背景色」フィールドにその色の16進値(#CCFFFFなど)を入力します。

    パレット内の色をクリックすると、「背景色」フィールドにその色の16進値が自動的に移入されます。

  8. 「適用」をクリックします。

    「プレビュー」セクションがリフレッシュされ、選択した色が表示されます。

  9. 「閉じる」をクリックして変更を保存し、「スタイルの編集」ページを終了します。

11.5.2 ポートレット・ヘッダーの色、フォントおよび角の変更

ポートレット・ヘッダーで使用される色とフォントは、ポートレットが配置されたページに適用されたスタイルを編集すると変更できます。また、ポートレット・ヘッダーの角の外観を四角から丸に変更すると、いずれか一方の角を丸くできます。

図11-4は、異なるヘッダーの色と角を設定した同じポートレットを示しています。ポートレット・ヘッダーの色の設定によって、ポートレットの境界線の色も制御されます。


注意:

ポートレットのヘッダーおよび境界線についてのスタイルに関する特別な考慮事項は、11.5.4項「ページ・ポートレットおよびナビゲーション・ページのスタイルの制御」を参照してください。

図11-4 異なるヘッダーの色と角を設定した同じポートレット

図11-4の説明が続きます
「図11-4 異なるヘッダーの色と角を設定した同じポートレット」の説明

スタイルの変更は、そのスタイルを使用するすべてのページ、サブページ、タブおよびアイテム・リージョンの外観に影響を及ぼすため、スタイルの編集には注意が必要です。

ポートレット・ヘッダーまたはサブヘッダーを変更するには、次の手順を実行します。

  1. Oracle Portalにログインします。

  2. 「構築」タブをクリックして、前面に表示します。

  3. 「ページ・グループ」ポートレットの「作業場所」ドロップダウン・リストから、該当するスタイルを所有するページ・グループを選択します。

    デフォルトでは、「ページ・グループ」ポートレットは「Portalビルダー」ページの「構築」タブにあります。


    ヒント:

    スタイルが複数のページ・グループで使用されている場合は、「共有オブジェクト」ページ・グループにあります。

  4. 「レイアウトと外観」セクションの「スタイル」で、編集するスタイルをクリックします。

    「スタイルの編集」ページの「プロパティ」タブが開きます。

  5. 「スタイル要素のタイプ」セクションで、「ポートレット」を選択します。

  6. ポートレット・ヘッダーの色とフォントを変更するには、次の手順を実行します。

    1. 「スタイル要素のプロパティ」セクションで、次のいずれかを選択します。

      • ポートレット・ヘッダー色

        この要素は、ポートレット・ヘッダーの背景色を制御します。また、ポートレットの境界線の色も制御します。ポートレットのヘッダーおよび境界線は、そのポートレットを含むページに適用されたスタイルに定義された色を常に使用します。

      • ポートレット・ヘッダー・テキスト

        この要素は、ポートレット・ヘッダーに表示されるポートレットの表示名を制御します。

      • ポートレット・ヘッダー・リンク

        この要素は、ポートレット・ヘッダーに表示されるリンクの外観を制御します。このようなリンクには、「ヘルプ」、「パーソナライズ」および「情報」があります。

      • ポートレット・サブヘッダー色

        この要素は、ポートレット・サブヘッダーの背景色を制御します。

      • ポートレット・サブヘッダー・テキスト

        この要素は、ポートレット・サブヘッダーに表示されるテキストの外観を制御します。

      • ポートレット・サブヘッダー・リンク

        この要素は、ポートレット・サブヘッダーに表示されるリンクの外観を制御します。

      「プレビュー」セクションでスタイル要素をクリックして、選択することもできます。

      ポートレットに関連するスタイル要素のプロパティのリストおよび説明は、11.3.3項「ポートレット」を参照してください。

    2. カラー・パレット内の色をクリックするか、「色」フィールドにその色の16進値(#CCFFFFなど)を入力します。

      パレット内の色をクリックすると、「色」フィールドにその色の16進値が自動的に移入されます。

    3. 「フォント飾り」で、次のいずれかを選択します。

      <なし>: 飾りなしの場合(次の注意を参照)

      プレーン: 飾りなしの場合(次の注意を参照)

      下線: 下線付きのテキストの場合

      取消し線: 取消し線が引かれたテキストの場合

      下線と取消し線:取消し線も引かれた下線付きのテキストの場合


      注意:

      「プレーン」および「<なし>」を選択すると、ほとんどのアイテム・タイプで同じ効果となります。ただし、ハイパーリンクとして表示されるアイテムに適用すると、次のように効果は異なります。
      • 「<なし>」をハイパーリンクに適用すると、ハイパーリンクの表示方法は、ユーザーのブラウザ設定によって決定されます。つまり、ユーザーのブラウザの構成方法に従って、プレーンまたは下線付きのいずれかで表示されます。

      • 「プレーン」をハイパーリンクに適用すると、ユーザーのブラウザ設定に関係なく、ハイパーリンクは常に(下線付きではなく)プレーンとして表示されます。


    4. フォントを選択します。

      「<デフォルト>」フォントを選択すると、ユーザーのブラウザで指定されたデフォルトのフォントで、テキストがレンダリングされます。

    5. フォント・サイズを指定し、単位を選択します。

      px: 固定単位(ピクセル。閲覧者のモニターが基準)

      pt: 固定単位(ポイント)

      em: 相対単位(最後に指定されたフォントのフォント・サイズが基準)

      ex: 相対単位(最後に指定されたフォントのXのサイズが基準)

      %: 相対単位(最後に指定されたフォントのフォント・サイズが基準)

    6. 「フォント・スタイル」で、次のいずれかを選択します。

      プレーン

      太字

      斜体

      太字と斜体

    7. 「適用」をクリックします。

      「プレビュー」セクションがリフレッシュされ、選択した色とフォントが表示されます。

  7. ポートレット・ヘッダーの角を変更するには、次の手順を実行します。

    1. 「スタイル要素のプロパティ」セクションで、「ポートレット・ヘッダー・スタイル」を選択します。

    2. ラジオ・ボタンを選択して、次の中から角を選択します。

      図11-5 通常: 両方とも四角の角

      「通常」ポートレット・ヘッダー・スタイル

      図11-6 角を丸くする: 両方とも丸くした角

      「角を丸くする」ポートレット・ヘッダー・スタイル

      図11-7 左の角を丸くする

      「左の角を丸くする」ポートレット・ヘッダー・スタイル

      図11-8 右の角を丸くする

      「右の角を丸くする」ポートレット・ヘッダー・スタイル
    3. 「適用」をクリックします。

      「プレビュー」セクションがリフレッシュされ、選択した結果が表示されます。

  8. 必要に応じて、各ポートレット・ヘッダーのスタイル要素を編集します。

    各要素を変更したら、「適用」をクリックします。

  9. 「閉じる」をクリックして変更を保存し、「スタイルの編集」ページを終了します。

11.5.3 ポートレットのヘッダーおよびテキストの色とフォントの変更

Oracle Portalには、ポートレットの開発に使用できる4つのレベルのヘッダーおよびテキストの属性が用意されています。Oracle Portalページのソースを表示すると、ポートレットが「ポートレット・ヘッダー1」および「ポートレット・テキスト1」を使用して作成されたことがわかります。たとえば、「お気に入り」ポートレットではお気に入りリンク用に「ポートレット・ヘッダー1」のスタイル要素が使用されています。

ポータルのヘッダーおよびテキストに適用される色およびフォントを使用して、ポータルの外観を独特なものにすることができます。ポートレットのヘッダーおよびテキストで使用される色とフォントは、ポートレットが配置されたページに適用されたスタイルを編集して変更します。

図11-9は、異なる色を「ポートレット・ヘッダー1」に設定した「お気に入り」ポートレットを示しています。

図11-9 異なる色を「ポートレット・ヘッダー1」に設定した「お気に入り」ポートレット

図11-9の説明が続きます
「図11-9 異なる色を「ポートレット・ヘッダー1」に設定した「お気に入り」ポートレット」の説明

Oracle Technology Networkの追加情報
ポートレットでこれらのスタイル要素を使用する方法は、Oracle Technology Network(OTN)(http://www.oracle.com/technology/products/ias/portal/portlet_development_10g1014.html)にある「Portal Developer Kit」ページを参照してください。独自に開発したポートレットで使用できるOracle Portalスタイル・クラスの詳細は、11.12項「HTMLテンプレートおよびCSSでのPortalスタイル要素クラスの使用」を参照してください。

スタイルの変更は、そのスタイルを使用するすべてのページ、サブページ、タブおよびアイテム・リージョンの外観に影響を及ぼすため、スタイルの編集には注意が必要です。

ポートレット・ヘッダーおよびテキストの色とフォントを変更するには、次の手順を実行します。

  1. Oracle Portalにログインします。

  2. 「構築」タブをクリックして、前面に表示します。

  3. 「ページ・グループ」ポートレットの「作業場所」ドロップダウン・リストから、編集するスタイルを所有するページ・グループを選択します。

    デフォルトでは、「ページ・グループ」ポートレットは「Portalビルダー」ページの「構築」タブにあります。


    ヒント:

    スタイルが複数のページ・グループで使用されている場合は、「共有オブジェクト」ページ・グループにあります。

  4. 「レイアウトと外観」セクションの「スタイル」で、編集するスタイルをクリックします。

    「スタイルの編集」ページの「プロパティ」タブが開きます。

  5. 「スタイル要素のタイプ」セクションで、「ポートレット」を選択します。

  6. 「スタイル要素のプロパティ」セクションで、「ポートレット・ヘッダーnまたは「ポートレット・テキストnを選択します。ここでnは、設定するレベルです。

    「プレビュー」セクションでポートレットのヘッダーまたはテキストのスタイル要素をクリックして、選択することもできます。

    ポートレットに関連するスタイル要素のプロパティのリストおよび説明は、11.3.3項「ポートレット」を参照してください。

  7. パレット内の色をクリックするか、「色」フィールドにその色の16進値(#FFCC00など)を入力します。

    パレット内の色をクリックすると、「色」フィールドにその色の16進値が自動的に移入されます。

  8. 「フォント飾り」で、次のいずれかを選択します。

    • <なし>: 飾りなしの場合(次の注意を参照)

    • プレーン: 飾りなしの場合(次の注意を参照)

    • 下線: 下線付きのテキストの場合

    • 取消し線: 取消し線が引かれたテキストの場合

    • 下線と取消し線:取消し線も引かれた下線付きのテキストの場合


    注意:

    「プレーン」および「<なし>」を選択すると、ほとんどのアイテム・タイプで同じ効果となります。ただし、ハイパーリンクとして表示されるアイテムに適用すると、次のように効果は異なります。
    • 「<なし>」をハイパーリンクに適用すると、ハイパーリンクの表示方法は、ユーザーのブラウザ設定によって決定されます。つまり、ユーザーのブラウザの構成方法に従って、プレーンまたは下線付きのいずれかで表示されます。

    • 「プレーン」をハイパーリンクに適用すると、ユーザーのブラウザ設定に関係なく、ハイパーリンクは常に(下線付きではなく)プレーンとして表示されます。


  9. フォントを選択します。

    「<デフォルト>」フォントを選択すると、ユーザーのブラウザで指定されたデフォルトのフォントで、テキストがレンダリングされます。

  10. フォント・サイズを指定し、単位を選択します。

    • px: 固定単位(ピクセル。閲覧者のモニターが基準)

    • pt: 固定単位(ポイント)

    • em: 相対単位(最後に指定されたフォントのフォント・サイズが基準)

    • ex: 相対単位(最後に指定されたフォントのXのサイズが基準)

    • %: 相対単位(最後に指定されたフォントのフォント・サイズが基準)

  11. 「フォント・スタイル」で、次のいずれかを選択します。

    • プレーン

    • 太字

    • 斜体

    • 太字と斜体

  12. 「適用」をクリックします。

    「プレビュー」セクションがリフレッシュされ、選択した色とフォントが表示されます。

  13. 必要に応じて、スタイル要素を編集します。

    各要素を変更したら、「適用」をクリックします。

  14. 「閉じる」をクリックして変更を保存し、「スタイルの編集」ページを終了します。

11.5.4 ページ・ポートレットおよびナビゲーション・ページのスタイルの制御

ページ・ポートレットがソース・ページのスタイルを使用するのか、ナビゲーション・ページが使用するのかに関係なく、ヘッダーおよび境界線は常に配置されたページのスタイルを使用してレンダリングされます。これは、ページ・ポートレットまたはナビゲーション・ページのソース・ページに定義されたスタイルを使用するように指定したときでも当てはまります。

コンテナ・ページのヘッダーおよび境界線の色をページ・ポートレットまたはナビゲーション・ページで使用しない場合は、コンテナ・ページでのリージョン・レベルのヘッダーおよび境界線の表示をオフにできます。ページ・ポートレットまたはナビゲーション・ページに独自のポートレットも含まれる場合は、それらのポートレットのソース・ページでのポートレット・リージョンのヘッダーおよび境界線の表示もオフにする必要があります。


注意:

ポートレット・リージョンのヘッダーおよび境界線の表示をオフにする方法は、10.2.12項「ポートレットのヘッダーおよび境界線の表示または非表示」を参照してください。

コンテナ・ページに適用される「ポートレットの背景色」スタイル要素を空白のままにせず特定の値に設定すると、ページ・ポートレットのソース・ページに配置されるポートレットではなく、ページ・ポートレットの「ポートレットを配置したページのスタイルを使用」オプションの設定は無視されます。

ページ・ポートレットまたはナビゲーション・ページで、配置先のページに指定された背景色ではなく独自の背景色を必ず使用するには、次の手順を実行します。

  1. ポートレットとして公開するときに、ページ・ポートレットまたはナビゲーション・ページで独自のスタイルを使用することを確認します(つまり、ポートレットとして使用しているページまたはナビゲーション・ページの「ポートレットを配置したページのスタイルを使用」オプションの選択を解除します)。

  2. コンテナ・ページ(つまり、ページ・ポートレットまたはナビゲーション・ページを配置するページ)で使用されるスタイルで、「ポートレット・ボディ色」スタイル要素の値を空白のままにします。