次の方法で共有

リボンの色のカスタマイズ

  • [アーティクル]

Windows リボン フレームワークは、アプリケーションが実行時にさまざまなリボン UI 要素の外観をカスタマイズできるようにする一連の色プロパティを公開します。

はじめに

次の表に示す フレームワーク プロパティ キー を使用して、リボン アプリケーションのさまざまな UI 要素の色を設定します。 これらのプロパティを使用すると、リボン フレームワークは、アプリケーション全体でパーソナル化、ID 要件、ブランド化の仕様をサポートできます。

リボンの色 Framework プロパティ キー
背景の色 UI_PKEY_GlobalBackgroundColor
強調表示の色 (Windows 7 のみ) ** UI_PKEY_GlobalHighlightColorWindows 8で導入: ** UI_PKEY_GlobalHighlightColorは、UI_PKEY_GlobalBackgroundColorとは別に設定できません。
テキストの色 Windows 8で導入されたUI_PKEY_GlobalTextColor: Windows 8のUI_PKEY_GlobalBackgroundColorの既定値を変更するには、Windows 7 用に設計されたリボン アプリでUI_PKEY_GlobalTextColorを調整する必要がある場合があります。

リボンの色を指定する

リボン フレームワークでは、より一般的な色合い、彩度、明るさ (HSL) または色相、彩度、値 (HSV) の色空間とは異なる、Hue、Saturation、Brightness (HSB) カラー モデルを使用します。 特に、B は特定の色の明るさではなく、全体的な明るさまたは明るさレベルを表します。

リボン フレームワークで UI 要素の色を指定するために、アプリケーションは HSB 値を各グローバル カラー プロパティに割り当てます。 これらの値は、リボン アプリケーションで必要に応じて、すべてのリボン要素に対して汎用的に適用されます (フレームワークでは、個々の要素とコントロールに HSB 値を割り当てることはサポートされていません)。

** Windows 8で導入: **UI_PKEY_GlobalHighlightColorには、UI_PKEY_GlobalBackgroundColorと同じ値が割り当てられます。

次の表では、リボン フレームワークの HSB パラメーターについて説明します。

コンポーネント

説明

調整された値*

Hue (H)

顔料、または実際の色は、通常、0〜359度の円周範囲からの値として識別される。

0 (赤) から 255 (赤)

彩度 (S)

0〜100%の割合で測定した色の純度、または彩度。

0 (グレー) ~ 255 (完全飽和)

明るさ (B)

0 ~ 100% の割合で測定された色の全体的な明るさまたは暗さ。

0 (濃色) から 255 (明るい)

* 各パラメーター値の元の範囲は、フレームワークの 0 から 255 の範囲に変換されます。

HSB 値は特定の色を識別しません。 代わりに、HSB プロパティ値の組み合わせは、UI 全体の色のグラデーションが互いに対してどのように調整されるかに影響します。

カスタム HSB 値を UI_PKEY_GlobalTextColor および UI_PKEY_GlobalBackgroundColorに割り当てる場合は、読みやすくするために、これらの値のコントラストが十分に高くすることをお勧めします。 具体的には、テキストの色はリボン UI の最も明るい網掛けよりも暗くする必要があります。 必要に応じて、フレームワークはUI_PKEY_GlobalTextColor HSB 値を自動的に調整して、UI_PKEY_GlobalBackgroundColorから派生した背景の網掛けやグラデーションに対して十分なコントラストを提供します。

Note

Windows 7 では、 UI_PKEY_GlobalHighlightColor は UI_PKEY_GlobalBackgroundColorとは別に設定できます。

次の例では、UI_PKEY_GlobalTextColor、UI_PKEY_GlobalBackgroundColor、UI_PKEY_GlobalHighlightColorの各プロパティのカスタム色を指定する方法を示します。

CComPtr<IPropertyStore> spPropertyStore;

// _spFramework is a pointer to the IUIFramework interface that is assigned 
// when the Ribbon is initialized.
if (SUCCEEDED(_spFramework->QueryInterface(&spPropertyStore)))
{
  PROPVARIANT propvarBackground;
  PROPVARIANT propvarHighlight;
  PROPVARIANT propvarText;
 
  // UI_HSBCOLOR is a type defined in UIRibbon.h that is composed of 
  // three component values: hue, saturation and brightness, respectively.
  UI_HSBCOLOR BackgroundColor = UI_HSB(0x14, 0x38, 0x54);
  UI_HSBCOLOR HighlightColor = UI_HSB(0x00, 0x36, 0x87);
  UI_HSBCOLOR TextColor = UI_HSB(0x2B, 0xD6, 0x00);

  InitPropVariantFromUInt32(BackgroundColor, &propvarBackground);
  InitPropVariantFromUInt32(HighlightColor, &propvarHighlight);
  InitPropVariantFromUInt32(TextColor, &propvarText);
 
  spPropertyStore->SetValue(UI_PKEY_GlobalBackgroundColor, propvarBackground);
  spPropertyStore->SetValue(UI_PKEY_GlobalTextColor, propvarText);
 
  spPropertyStore->Commit();
}

RGB を HSB に変換する

このセクションでは、リボン フレームワーク HSB 値 (この例の UI_PKEY_GlobalBackgroundColor ) を実行時に特定の RGB 色に動的に照合するために必要な数式について説明します。

タブ行の背景は、リボンの背景の明るさグラデーションと比較してフラットなカラー サーフェスとしてレンダリングされるため、参照ポイントとして使用されます。

中間 HSL 値を取得するには、事前変換が必要です。 この HSL 値は、HSB 値に変換できます。

Note

RGBからHSLへの変換は、ほとんどの写真編集ソフトウェアで簡単に行うことができます。

HSL (各コンポーネントが 0.0 から 1.0 の範囲) をリボン HSB 設定に変換するには、次の式を使用します。

  • H背景 = Round(255.0 H)
  • Sの背景 = Round(255.0 S)
  • Bの背景 = Round(257.7 + 149.9 ln(L)) (0.1793 <= L <= 0.9821 の場合)

色のガイドライン

フレームワークのプロパティ