テーマのカスタマイズ

このページは Apigee と Apigee ハイブリッドに適用されます。

Apigee Edge のドキュメントを表示する。

テーマは、ポータルのすべてのページに統一されたデザインを提供するグローバルなスタイルシートで構成されます。テーマの目標は、ポータルのすべてのページのデザインを一度に変更できるようにすることです。

以降のセクションで説明するように、テーマをカスタマイズ、プレビュー、公開できます。

テーマエディタの操作

ポータルのテーマは、テーマエディタで、カスタマイズ、プレビュー、公開します。

テーマエディタにアクセスするには:

[ポータル] ページを開きます。

Cloud コンソールの UI
Cloud コンソールの Apigee で、[配布] > [ポータル] ページに移動します。

[ポータル] に移動

従来の UI
サイドナビゲーションバーで [Publish] > [Portals] を選択し、ポータルのリストを表示します。
テーマを編集するポータルの行をクリックします。
エディタを開きます。
Cloud コンソールの UI
1. [テーマ] をクリックします。
2. [ 編集] をクリックします。
従来の UI
[テーマ] をクリックします。

テーマエディタでは、次のことができます。

[Basic Styles] テーマエディタを使用すると、次に挙げる要素など、基本スタイルを手軽にカスタマイズする。
[Advanced Theme Editor]では、テーマの変数をオーバーライドすることや、テーマのスタイル要素をカスタマイズすることができます。これには次の要素が含まれます（これらに限定されません）。
テーマの変更をプレビューする
ブラウザでポータルをプレビューする
ライブポータルにテーマを公開する

ベーステーマについて

サイトの外観を定義するベーステーマのスタイルルールの大部分は Angular マテリアルデザインに基づきます。Angular マテリアルデザインは、グリッドに基づくレイアウトと一貫性のあるコンポーネントおよびスタイルを使用して、統一感のある操作性を提供します。

これらのスタイルルールは、Sassy カスケーディングスタイルシート（SCSS）を使用して定義されています。SCSS はカスケーディングスタイルシート（CSS）のスーパーセットであり、次のような利点があります。

スタイルシート全体を通してグローバル変数を再利用できる。
ネストされたルールによってスタイルシートの開発時間を短縮できる。
ミックスインや関数を作成できる。

例:

// Variable declaration
$my-variable: 12px;

// Nested selectors
.container-selector {
  .element-selector {
    padding: $my-variable;
  }
}

// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
  padding: 12px;
}

// Function declaration
@function double($x) { return $x * 2; }

// Call function
.my-selector { height: double(12px); }

// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }

SCSS は、コンテンツがウェブページにレンダリングされる前にコンパイルされ、従来の CSS に変換されます。

Angular マテリアルスタイルシート、すなわちマテリアルテーマ設定 SCSS ファイル（material-theming.scss）は、ベーステーマで使用されます。このスタイルシートは、[Advanced Theme Editor] を使用してテーマをカスタマイズするで説明されているように、カスタム変数と SCSS セクションを使用してオーバーライドできる変数、関数、mixin を宣言します。

選択した UI テーマに基づいて、タイポグラフィ、色、レイアウトのスタイルを定義するいくつかの SCSS 変数が宣言されており、ベーススタイルシートによって使用されます。テーマ変数のリファレンスに記載の変数は、オーバーライドできます。

カラーパレットをカスタマイズする

カラーパレットは、[Basic Styles] エディタを使用するか、テーマ変数をオーバーライドしてカスタマイズします。

カラーパレットのカテゴリについて

統合ポータルのカラーパレット定義は、以下のカテゴリに分類され、ベーステーマでマテリアルデザインカラースタイルを使用して定義されています。

カテゴリ	スタイル
プライマリ	ナビゲーションツールバー、見出し、カードヘッダー、ボタン
セカンダリ	`<pre>` と `<code>` テキスト
アクセント	ナビゲーション、リンク、強調されたボタン
警告	警告とエラー

[Basic Styles] エディタを使用してカラーパレットをカスタマイズする

[Basic Styles] エディタを使用して、プライマリとアクセントのカラーパレットを手軽にカスタマイズします。

[Basic Styles] エディタを使用してカラーパレットをカスタマイズするには:

テーマエディタにアクセスします。
メインカラーとアクセントカラーを指定します。
Cloud コンソールの UI
1. メインカラーをカスタマイズするには、[メインカラー] プルダウンで色を選択するか、テキストフィールドにカスタムの 16 進数カラー値を入力します。
2. アクセントカラーをカスタマイズするには、[アクセントカラー] プルダウンで色を選択するか、テキストフィールドにカスタムの 16 進数カラー値を入力します。
3. [保存] をクリックして、変更を保存します。
4. [プレビュー] をクリックして、ポータルの変更をブラウザでプレビューします。
従来の UI
1. プライマリカラーをカスタマイズするには、[Primary color] プルダウンから色を選択するか、[Custom] をクリックしてテキストボックスにカスタムの 16 進数カラー値を入力します。
2. アクセントカラーをカスタマイズするには、[Accent color] プルダウンから色を選択するか、[Custom] をクリックしてテキストボックスにカスタムの 16 進数カラー値を入力します。
3. [保存] をクリックして、変更を保存します。
4. プレビューペインで変更を確認します。または、[Preview] をクリックしてポータルの変更をブラウザでプレビューします。注: プレビューペインにあるポータルのナビゲーションをクリックしてすべてのページを順に開き、各ページの変更を確認できます。
[公開] をクリックしてテーマを公開します。更新の確認を求めるメッセージが表示されます。

テーマ変数をオーバーライドしてカラーパレットをカスタマイズする

テーマ変数をオーバーライドしてカラーパレットをカスタマイズするには、[Advanced Theme Editor] にアクセスし、[変数] セクションに、下に挙げる変数と調整した値を 1 つ以上追加して、プライマリ、セカンダリ、アクセント、警告メッセージの色をそれぞれ変更します。カラーパレットのカテゴリについてをご覧ください。

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);

インポートされているマテリアルテーマ SCSS ファイル（material-theming.scss）の内容を確認し、定義済みのカラー変数（$mat-grey など）を特定します。数値は、それぞれデフォルト、明色、暗色のシェーディング値を示します。

別の方法として、独自のカラー変数を作成することもできます。例:

$my-color-variable: (
    50 : #f9f0e7,
    100 : #f0d8c2,
    200 : #e6bf9a,
    300 : #dba572,
    400 : #d49153,
    500 : #cc7e35,
    600 : #c77630,
    700 : #c06b28,
    800 : #b96122,
    900 : #ad4e16,
    A100 : #ffebe0,
    A200 : #ffc9ad,
    A400 : #ffa77a,
    A700 : #ff9661,
    // Color to render text presented on a background of the same level
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

つづいて、次の例のように、これを使用してカラーパレットを変更します。

$primary: mat-palette($my-color-variable, 900, 200, 400);

フォントファミリーとフォントスタイルをカスタマイズする

フォントファミリーとフォントスタイルは、[Basic Styles] エディタを使用するか、テーマ変数をオーバーライドしてカスタマイズします。カスタムフォントをインポートすることもできます。

[Basic Styles] エディタを使用してフォントファミリーとフォントスタイルをカスタマイズする

[Basic Styles] エディタを使用してフォントファミリーとフォントスタイルをカスタマイズするには:

テーマエディタにアクセスします。
フォントファミリーを変更するには、[フォント] プルダウンから値を選択します。
フォントスタイルを変更するには、[Font styles] セクションを開き、必要に応じて、目的の HTML 要素のフォントサイズ、行の高さ、フォントの太さなどのスタイルを編集します。
[保存] をクリックして、変更を保存します。
[プレビュー] をクリックして、ポータルの変更をブラウザでプレビューします。
[公開] をクリックしてテーマを公開します。更新の確認を求めるメッセージが表示されます。

テーマ変数をオーバーライドしてフォントファミリーとフォントスタイルをカスタマイズする

テーマ変数をオーバーライドすることによってフォントファミリーとフォントスタイルをカスタマイズするには、[Advanced Theme Editor] にアクセスし、[変数] セクションで、フォントファミリーとフォントスタイル変数と調整した値を 1 つ以上含めます。

たとえば、デフォルトフォントを Arial に変更するには、次の変数を定義します。

$typography-main-font-family: 'Arial';

カスタムフォントをインポートする

以下で説明するように、Google フォント（デフォルトのフォントのセットに含まれていません）または独自のカスタムフォントをインポートして、スタイルシートでカスタムフォントを参照します。

Google フォントをインポートする

Google フォントをインポートするには、[Advanced Theme Editor] にアクセスして、下に示すように [カスタムスタイル] セクションでフォントをインポートします。

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

カスタムフォントをインポートする

独自のカスタムフォントは、@font-face CSS ルールを使用してインポートします。@font-face ルールは、TrueType（TTF）、Web Open Font Format（WOFF）など、さまざまなファイル形式をサポートしています。

独自のカスタムフォントをインポートするには:

必要に応じて、ファイルのアップロードの説明に沿って、フォントファイルをアセットマネージャーにアップロードします。
[Advanced Theme Editor] にアクセスし、[@font-face] ルールを [カスタムスタイル] セクションに追加します。ここで、font-family はフォント名を指定し、url はフォントファイルの場所（この場合はアセットマネージャー）を指定し、MyCustomFont.tff はカスタムフォントファイルの名前で、format はフォント形式を指定します。
```
@font-face {
   font-family: 'MyCustomFont';
   src: url('files/MyCustomFont.tff') format('truetype')
}
```

スタイルシートでカスタムフォントを参照する

[変数] セクションで、フォントファミリーとスタイル変数のいずれかでカスタムフォントを参照します。例:

$typography-main: mat-typography-config(
    $font-family: '"Indie Flower", "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

ロゴをカスタマイズする

ポータルで使用するロゴは、次の場所でカスタマイズできます。

ロゴの場所	デフォルトのファイルサイズ
デスクトップナビゲーションツールバー	196 x 32 ピクセル
モバイルナビゲーションツールバー	156 x 32 ピクセル
ブラウザのアドレスバーにあるファビコン（他の場所にもあります）	32 x 32 ピクセル
[ログイン] ページ	392 x 64 ピクセル

デスクトップとモバイルディスプレイのナビゲーションツールバーにあるロゴをカスタマイズします。ブラウザの幅に応じて、デスクトップ用とモバイル用のどちらかのロゴが表示されます。

メインロゴは削除できず、置き換えることのみ可能です。モバイル表示用のロゴを指定しない場合は、デフォルトでメインロゴが使用されます。

ナビゲーションツールバーのデスクトップおよびモバイル表示用のロゴをカスタマイズするには:

用途に適した自社のロゴを入手します。推奨サイズについては、前掲の表をご覧ください。
テーマエディタにアクセスします。
メインロゴをアップロードします。
Cloud コンソールの UI
1. テーマエディタの [基本スタイル、メインロゴ] で、[参照] をクリックします。
2. ロゴファイルに移動して選択します。
3. [開く] をクリックします。
従来の UI
テーマエディタで、デスクトップ画面上部のナビゲーションバーにあるロゴを置き換えるには:
1. 右ペインの [基本スタイル] で、[メインロゴ] フィールドにある [ アップロード] をクリックします。
2. ローカルディレクトリで、デスクトップ用のロゴを探します。
3. [開く] をクリックして、ファイルをアップロードします。
モバイルロゴをアップロードします。
Cloud コンソールの UI
1. テーマエディタの [基本スタイル] で、[ロゴのオプション] を開きます。
2. [モバイルロゴ] で [参照] をクリックします。
3. モバイルロゴファイルに移動し、選択します。
4. [開く] をクリックします。
従来の UI
上部のナビゲーションバーにあるモバイル表示用のロゴを置き換えるには:
1. 右ペインの [基本スタイル] で [ロゴのオプション] を展開し、[モバイルロゴ] フィールドにある [ アップロード] をクリックします。
2. ローカルディレクトリで、モバイル用のロゴを探します。
3. [開く] をクリックして、ファイルをアップロードします。
[保存] をクリックします。
[プレビュー] をクリックして、ポータルの変更をブラウザでプレビューします。ブラウザの幅に応じて、デスクトップ用とモバイル用のどちらかのロゴが表示されます。
[公開] をクリックして、変更をポータルに公開します。メッセージが表示されたら操作を確定します。

ファビコンをカスタマイズする

ウェブブラウザのアドレスバー（とその他の場所）で使用されているファビコンをカスタマイズするには:

ファビコンに適した自社のロゴを入手します。推奨サイズについては、前掲の表をご覧ください。
テーマエディタにアクセスします。
ファビコンファイルを見つけます。
Cloud コンソールの UI
1. テーマエディタの [基本スタイル] で、[ロゴのオプション] を開きます。
2. [参照] をクリックします。
3. ロゴファイルに移動して選択します。
従来の UI
1. 右ペインの [Basic Styles] で [Logo options] を開き、[ファビコン] フィールドにあるをクリックします。
2. ロゴファイルに移動して選択します。
[開く] をクリックして、ファイルをアップロードします。
[保存] をクリックして、左ペインで変更をプレビューします。
[公開] をクリックして、変更をポータルに公開します。メッセージが表示されたら操作を確定します。

会社情報を管理するで説明されているとおり、ログインページのロゴは、デベロッパープログラムの登録およびログインエクスペリエンスを構成する際にカスタマイズします。

ナビゲーションツールバーをカスタマイズするための簡単なヒントを、以下に示します。

カラーパレットをカスタマイズするで説明されているとおり、ヘッダーとフッターのナビゲーションツールバーの色は、[メインカラー] を変更してカスタマイズします。
フォントファミリーとフォントスタイルをカスタマイズするで説明されているとおり、ヘッダーとフッターのナビゲーションツールバーに表示されるメニュー項目のフォントサイズとスタイルは、フォントとボタンのスタイルを変更することでカスタマイズします。
ヘッダーに置くナビゲーションツールバーの高さをカスタマイズするには、[Advanced Theme Editor] にアクセスして、[変数] セクションに、変数と調整した値「$layout-header-height: 64px;」を含めます。
フッターに置くナビゲーションツールバーの高さをカスタマイズするには、[Advanced Theme Editor] にアクセスして、[変数] セクションに、変数と調整した値「$layout-footer-height: 44px;」を含めます。
デスクトップとモバイルディスプレイのナビゲーションツールバーにあるロゴをカスタマイズします。

背景画像をカスタマイズする

ホームページの背景画像は、次のいずれかの操作を行ってカスタマイズします。

同じファイル名と相対サイズ（3,000 ピクセル x 1,996 ピクセル）を持つ独自の home-background.jpg 画像を作成し、アセットマネージャーを使用してこの画像をアップロードします。詳細については、アセットの管理をご覧ください。
背景画像のファイル名とそのパディングを、[Advanced Theme Editor] にアクセスし、[カスタムスタイル] セクションに、次の SCSS と変更後の値を含めて変更します。
```
#index {
  &.main {
    .main-content {
      padding: 0;
      background-image: url('/files/home-background.jpg');
      background-size: cover;
    }
  }
}
```
[Advanced Theme Editor] にアクセスし、[カスタムスタイル] セクションに、次の SCSS と変更後の値を含めて、背景画像をポータルのすべてのページに追加します。
```
 body {
    background-image: url('/files/background-image.jpg');
 }
```

タイポグラフィをカスタマイズする

タイポグラフィのカスタマイズは、[Advanced Theme Editor] にアクセスし、[変数] セクションで次のタイポグラフィ変数の値を 1 つ以上調整することで行います。

$typography-main
$typography-header
$typography-footer
$typography-context-bar

例:

// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
    $font-family: 'Roboto, "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

続いて、このタイポグラフィを特定の CSS セレクタに適用できます。次に例を示します。

@include mat-base-typography($custom-typography-config, '.css-selector');

別の方法としては、次の例に示すとおり、カスタムタイポグラフィで定義した特定のタイポグラフィレベルを CSS セレクタに適用することもできます。

.css-selector {
  @include mat-typography-level-to-styles($custom-typography-config, display-3);
}

[Advanced Theme Editor] でテーマをカスタマイズする

テーマをカスタマイズするには、テーマ変数をオーバーライドするか、[Advanced Theme Editor] でテーマスタイル要素を直接カスタマイズします。

テーマ変数をオーバーライドする

詳細テーマエディタの [Variables] セクションでテーマ変数をオーバーライドします。テーマ変数の一覧については、テーマ変数のリファレンスをご覧ください。

たとえば、ヘッダーとフッターのナビゲーションツールバーの高さをカスタマイズするには、[Advanced Theme Editor] の [変数] セクションに、次の変数と変更した値を含めます。

他の例については、次のセクションをご覧ください。

テーマ変数をオーバーライドすることによってカラーパレットをカスタマイズする
テーマ変数をオーバーライドしてフォントファミリーとフォントスタイルをカスタマイズする

テーマ変数をオーバーライドするには:

テーマエディタにアクセスします。
[詳細設定] をクリックします。
[変数] をクリックします。
変数のオーバーライドを追加します。オーバーライドできる変数の一覧については、テーマ変数のリファレンスをご覧ください。
[保存] をクリックして、変更を保存します。
[x] をクリックして [Advanced Theme Editor] を閉じます。
[プレビュー] をクリックして、ポータルの変更をブラウザでプレビューします。
[公開] をクリックしてテーマを公開します。更新の確認を求めるメッセージが表示されます。

テーマスタイル要素をカスタマイズする

テーマスタイル要素は、[Advanced Theme Editor] の [カスタムスタイル] セクションで直接カスタマイズします。

たとえば、ポータルでアプリを登録するときに表示される[新しいアプリ] ページの [作成] ボタンの色を変更するには、次のテーマスタイル要素と変更した値を含めます。

.main .main-content button.app-save {
  color: blue;
}

また、背景画像のカスタマイズもご覧ください。

テーマスタイル要素をカスタマイズするには:

テーマエディタにアクセスします。
[詳細設定] をクリックします。
[カスタムスタイル] をクリックします。
テーマスタイル要素を追加します。
[保存] をクリックして、変更を保存します。
[x] をクリックして [Advanced Theme Editor] を閉じます。
[プレビュー] をクリックして、ポータルの変更をブラウザでプレビューします。
[公開] をクリックしてテーマを公開します。更新の確認を求めるメッセージが表示されます。

ポータルページで全幅サイズのパネルを作成する

ポータルページに全幅パネルを作成するには:

テーマスタイル要素のカスタマイズに記載のとおり、[Advanced Theme Editor] で、次のテーマスタイル要素を追加します。

.full-width__container {
      position: relative;
      left: 50%;
      right: 50%;
      max-width: 100vw;
      margin-left: -50vw;
      margin-right: -50vw;
      background-image: url("/files/your-image.jpg");
      background-size: cover;
      background-position: 50% 50%;
      padding: 0;
     } 

    .full-width__centered {
      @include centered-content();
    }

    .full-width__content {
      // Add any additional padding here and NOT in .full-width__centered. Adding padding to
      // .full-width__centered will result in a horizontal scroll bar. You can exclude this class
      // and corresponding <div> container if no additional padding control other than the
      // min page padding is needed.
    }

ページエディタを使用してポータルコンテンツを開発するに記載のとおり、ポータルページのコンテンツを編集して次の <div> 要素を含めます。

<div class="full-width__container">
  <div class="full-width__centered">
    <div class="full-width__content">  <!-- Include this div if you need additional padding -->
      <h2>Full Width Container</h2>
      <p>
        This content will align with the page header and other content outside
        of this full width container
      </p>
    </div>
  </div>
</div>

テーマを公開する

テーマとスタイルに加えたカスタマイズをライブポータルに公開するには:

テーマエディタにアクセスします。
[公開] をクリックします。

ライブポータルで公開したコンテンツを表示するには、上部のナビゲーションツールバーで [View Portal] をクリックします。

CSS の詳細度ルールについて

Note: !important ルールをスタイル要素の宣言で使用して他の宣言をオーバーライドすることは不適切な手法であり、おすすめできません。!important ルールは CSS のカスケーディングルールと詳細度ルールに影響を与え、スタイル要素の宣言をデバッグすることが困難になる場合があります。

CSS スタイル要素宣言の間で競合が起こったとき、ブラウザは CSS の限定性に基づいてどのスタイルが優先されるかを判断します。CSS 限定性の計算では、そのセレクタタイプに基づいて特定の CSS スタイル要素宣言に重みが適用されます。CSS セレクタが限定的であるほど、重みは高くなります。たとえば、ID 属性にはタイプセレクタよりも高い重みが与えられます。

たとえば、次のスタイル要素を CSS コードで定義した場合、段落要素の色は赤になります。これは、div 要素内の p スタイル要素宣言の方が p スタイル要素宣言よりも限定的であるためです。

div p { color: red }  ← More specific
p { color: blue }

同様に、次のスタイル要素宣言を CSS コードで定義した場合、<div class="test"></div> タグで囲まれたテキストの色は青になります。これは、div 要素内の ID 属性スタイル宣言の方が div スタイル要素宣言よりも限定的であるためです。

div#test { background-color: blue; }  ← More specific
div { background-color: red; }

限定性が同じであるスタイル要素宣言については、最後に定義されたスタイル要素宣言が優先されます。たとえば、次のスタイル要素宣言の順序では、段落要素の色が青になります。

p { color: red }
p { color: blue }  ← Last specified

テーマ変数のリファレンス

以下のセクションでは、詳細テーマエディタの [Variables] セクションでオーバーライドできる変数をまとめます。変数をオーバーライドする方法については、テーマ変数をオーバーライドするをご覧ください。

ベーステーマ変数
カラーパレット変数
フォントファミリーおよびスタイル変数
タイポグラフィ変数

ベーステーマ変数

サイト全体で使用されているベーステーマの前景色をカスタマイズします。有効な値は light と dark です。

$base-theme: light;

カラーパレット変数

それぞれプライマリ、セカンダリ、アクセント、警告メッセージの色に対応する次の変数を変更することで、カラーパレットをカスタマイズします。カラーパレットのカテゴリについてをご覧ください。

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green);
$accent: mat-palette($mat-blue);
$warn: mat-palette($mat-red);

数値はそれぞれ、デフォルト、明色、暗色の要素のシェーディング値を示します。定義済みのカラー変数を特定するには、マテリアルテーマ SCSS ファイル（material-theming.scss）の内容を調べます。

たとえば、プライマリカラーパレットを緑に変更するには、次のようにします。

$primary: mat-palette($mat-green, 800, 100, 900);

ベーステーマで定義されているデフォルトカラーセットのシェーディング値のみをカスタマイズするには、変更後のシェーディング値を含む次のコードを追加します。

$primary: mat-palette($custom-hex-primary, 800, 100, 900);
$secondary: mat-palette($custom-hex-secondary, 800, 100, 900);
$accent: mat-palette($custom-hex-accent, 800, 100, 900);
$warn: mat-palette($custom-hex-warn, 800, 100, 900);

フォントファミリーおよびスタイル変数

フォントファミリーとフォントスタイルをカスタマイズします。

// If using a custom font, import it by URL.
$typography-main-font-family: 'Roboto, sans-serif';

// Must resolve to a pixel value
$layout-responsive-breakpoint: 900px;
$layout-header-height: 64px;
$layout-header-menu-item-height: 36px;
$layout-header-menu-item-horiz-padding: 16px;
$layout-header-nested-menu-item-vert-padding: 5px;
$layout-header-menu-resp-item-height: 64px;
$layout-footer-height: 44px;
$layout-footer-menu-item-height: 36px;
$layout-footer-menu-item-horiz-padding: 16px;
$layout-footer-nested-menu-item-vert-padding: 5px;
$layout-context-bar-height: 60px;
$layout-context-bar-button-height: 36px;
$layout-context-bar-button-horiz-padding: 16px;
$layout-main-content-max-width: 1400px;
$layout-main-content-vert-padding: 38px;
$layout-horizontal-min-padding: 24px;

// Uses variables declared above
$typography-header: $typography-main;
$typography-footer: $typography-main;
$typography-context-bar: $typography-main;

独自のカスタムタイポグラフィを指定してより細かく調整するには、たとえば次のようにします。

$typography-context-bar: mat-typography-config(
    $font-family: 'Ubuntu, sans-serif',
    $headline: mat-typography-level(30px, 30px, 500), // Title
    $button: mat-typography-level(19px, 19px, 200) // Action buttons
);

タイポグラフィ変数

Angular マテリアルタイポグラフィをカスタマイズします。タイポグラフィレベルごとに、フォントサイズ、ラインハイト、フォントウェイトを定義します。

$typography-main-display-4: mat-typography-level(112px, 112px, 300);
$typography-main-display-3: mat-typography-level(56px, 56px, 400);
$typography-main-display-2: mat-typography-level(45px, 48px, 400);
$typography-main-display-1: mat-typography-level(34px, 40px, 400);
$typography-main-headline: mat-typography-level(24px, 32px, 400);
$typography-main-title: mat-typography-level(20px, 32px, 400);
$typography-main-subheading-2: mat-typography-level(16px, 28px, 400);
$typography-main-subheading-1: mat-typography-level(15px, 24px, 400);
$typography-main-body-2: mat-typography-level(14px, 24px, 400);
$typography-main-body-1: mat-typography-level(16px, 22px, 400);
$typography-main-caption: mat-typography-level(12px, 20px, 400);
$typography-main-button: mat-typography-level(14px, 14px, 700);
$typography-main-input: mat-typography-level(16px, 1.125, 400);

// Copies properties declared above into a cohesive object
$typography-main: mat-typography-config(
  $font-family: $typography-main-font-family,
  $display-4: $typography-main-display-4,
  $display-3: $typography-main-display-3,
  $display-2: $typography-main-display-2,
  $display-1: $typography-main-display-1,
  $headline: $typography-main-headline,
  $title: $typography-main-title,
  $subheading-2: $typography-main-subheading-2,
  $subheading-1: $typography-main-subheading-1,
  $body-2: $typography-main-body-2,
  $body-1: $typography-main-body-1,
  $caption: $typography-main-caption,
  $button: $typography-main-button,
  $input: $typography-main-input);

テーマのカスタマイズ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

テーマエディタの操作

Cloud コンソールの UI

従来の UI

Cloud コンソールの UI

従来の UI

ベーステーマについて

カラーパレットをカスタマイズする

カラーパレットのカテゴリについて

[Basic Styles] エディタを使用してカラーパレットをカスタマイズする

Cloud コンソールの UI

従来の UI

テーマ変数をオーバーライドしてカラーパレットをカスタマイズする

フォント ファミリーとフォント スタイルをカスタマイズする

[Basic Styles] エディタを使用してフォント ファミリーとフォント スタイルをカスタマイズする

テーマ変数をオーバーライドしてフォント ファミリーとフォント スタイルをカスタマイズする

カスタム フォントをインポートする

Google フォントをインポートする

カスタム フォントをインポートする

スタイルシートでカスタム フォントを参照する

ロゴをカスタマイズする

デスクトップとモバイル ディスプレイのナビゲーション ツールバーにあるロゴをカスタマイズする

Cloud コンソールの UI

従来の UI

Cloud コンソールの UI

従来の UI

ファビコンをカスタマイズする

Cloud コンソールの UI

従来の UI

ログインページのロゴをカスタマイズする

ナビゲーション ツールバーをカスタマイズする

背景画像をカスタマイズする

タイポグラフィをカスタマイズする

[Advanced Theme Editor] でテーマをカスタマイズする

テーマ変数をオーバーライドする

テーマスタイル要素をカスタマイズする

ポータルページで全幅サイズのパネルを作成する

テーマを公開する

CSS の詳細度ルールについて

テーマ変数のリファレンス

ベーステーマ変数

カラーパレット変数

フォント ファミリーおよびスタイル変数

タイポグラフィ変数

テーマのカスタマイズ

フォントファミリーとフォントスタイルをカスタマイズする

[Basic Styles] エディタを使用してフォントファミリーとフォントスタイルをカスタマイズする

テーマ変数をオーバーライドしてフォントファミリーとフォントスタイルをカスタマイズする

カスタムフォントをインポートする

カスタムフォントをインポートする

スタイルシートでカスタムフォントを参照する

デスクトップとモバイルディスプレイのナビゲーションツールバーにあるロゴをカスタマイズする

ナビゲーションツールバーをカスタマイズする

フォントファミリーおよびスタイル変数