テーマのカスタマイズ

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

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

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

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

テーマエディタの操作

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

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

サイドナビゲーションツールバーで [公開] > [ポータル] を選択し、目的のポータルを選択して、ランディングページの [テーマ] をクリックします。
ポータルを編集する場合は、上部のナビゲーションツールバーにあるプルダウンで [テーマ] をクリックします。

テーマエディタ

上の図に示すように、テーマエディタでは以下のことを行えます。

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

ベーステーマについて

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

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

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

例:

// 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] エディタを使用してカラーパレットをカスタマイズするには:

テーマエディタにアクセスします。
プライマリカラーをカスタマイズするには、[メインカラー] プルダウンで色を選択するか、[カスタム] をクリックしてテキストボックスにカスタムの 16 進数カラー値を入力します。
アクセントカラーをカスタマイズするには、[アクセントカラー] プルダウンで色を選択するか、[カスタム] をクリックしてテキストボックスにカスタムの 16 進数カラー値を入力します。
[保存] をクリックして、変更を保存します。
プレビューペインで変更を確認します。または、[プレビュー] をクリックしてポータルの変更をブラウザでプレビューします。
注: プレビューペインでポータルのナビゲーションをクリックすると、すべてのページの変更を確認できます。
[公開] をクリックしてテーマを公開します。更新の確認を求めるメッセージが表示されます。

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

テーマ変数をオーバーライドしてカラーパレットをカスタマイズするには、[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] エディタを使用してフォントファミリーとフォントスタイルを手軽にカスタマイズできます。

[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 ピクセル

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

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

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

用途に合う会社のロゴのコピーを 1 つ以上入手します。
推奨サイズについては、前掲の表をご覧ください。
テーマエディタにアクセスします。
デスクトップ ディスプレイの上部にあるナビゲーションツールバーのロゴを置き換えるには:
a.右ペインの [Basic Styles] で、[Primary logo] フィールドにあるをクリックします。
b.ローカルディレクトリで、デスクトップ版のロゴを探します。
c. [オープン] をクリックして、ファイルをアップロードします。
上部のナビゲーションツールバーにあるモバイル表示用のロゴを置き換えるには:
a. 右ペインの [Basic Styles] で [Logo options] を開き、[Mobile logo] フィールドにあるをクリックします。
b. ローカルディレクトリで、モバイル用のロゴを探します。
c. [オープン] をクリックして、ファイルをアップロードします。
[保存] をクリックして、左ペインで変更をプレビューします。
[公開] をクリックして、変更をポータルに公開します。メッセージが表示されたら操作を確定します。

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

ウェブブラウザのアドレスバーなどで使用されているファビコンをカスタマイズするには:

ファビコンとしての使用に適した自社のロゴのコピーを入手します。
推奨サイズについては、前掲の表をご覧ください。
テーマエディタにアクセスします。
右ペインの [Basic Styles] で [Logo options] を開き、[ファビコン] フィールドにあるをクリックします。
ローカルディレクトリで、ファビコン版のロゴを探します。
[オープン] をクリックして、ファイルをアップロードします。
[保存] をクリックして、左ペインで変更をプレビューします。
[公開] をクリックして、変更をポータルに公開します。メッセージが表示されたら操作を確定します。

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

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

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

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

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

home-background.jpg 画像の独自のバージョンを、同じ名前と相対ファイルサイズ（3,000 ピクセル x 1,996 ピクセル）を使用してアセットマネージャーにアップロードします。詳細については、アセットの管理をご覧ください。
背景画像のファイル名とそのパディングを、[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] でテーマスタイル要素を直接カスタマイズします。

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

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

たとえば、ヘッダーとフッターのナビゲーションツールバーの高さをカスタマイズするには、[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

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

以下のセクションでは、テーマ変数のオーバーライドで説明したように、[Advanced Theme Editor] の [変数] セクションでオーバーライドできる変数をまとめます。

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

ベーステーマ変数

サイト全体で使用されるベーステーマの前景色をカスタマイズします。有効な値は 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);

テーマのカスタマイズ

テーマエディタの操作

ベーステーマについて

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

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

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

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

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

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

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

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

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

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

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

ロゴをカスタマイズする

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

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

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

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

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

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

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

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

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

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

テーマを公開する

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

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

ベーステーマ変数

カラーパレット変数

フォント ファミリー変数とフォント スタイル変数

タイポグラフィ変数

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

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

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

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

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

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

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

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

フォントファミリー変数とフォントスタイル変数