テーマのカスタマイズ

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

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

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

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

テーマエディタの操作

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

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

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

    Cloud コンソールの UI

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

    [ポータル] に移動

    従来の UI

    サイド ナビゲーション バーで [Publish] > [Portals] を選択し、ポータルのリストを表示します。

  2. テーマを編集するポータルの行をクリックします。

  3. エディタを開きます。

    Cloud コンソールの UI

    1. [テーマ] をクリックします。
    2. [ 編集] をクリックします。

    従来の UI

    [テーマ] をクリックします。

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

ベーステーマについて

サイトの外観を定義するベーステーマのスタイルルールの大部分は 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] エディタを使用してカラーパレットをカスタマイズするには:

  1. テーマエディタにアクセスします
  2. メインカラーとアクセント カラーを指定します。

    Cloud コンソールの UI

    1. メインカラーをカスタマイズするには、[メインカラー] プルダウンで色を選択するか、テキスト フィールドにカスタムの 16 進数カラー値を入力します。
    2. アクセント カラーをカスタマイズするには、[アクセント カラー] プルダウンで色を選択するか、テキスト フィールドにカスタムの 16 進数カラー値を入力します。
    3. [保存] をクリックして、変更を保存します。
    4. [プレビュー] をクリックして、ポータルの変更をブラウザでプレビューします。

    従来の UI

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

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

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

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

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

テーマ変数をオーバーライドすることによってフォント ファミリーとフォント スタイルをカスタマイズするには、[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)など、さまざまなファイル形式をサポートしています。

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

  1. 必要に応じて、ファイルのアップロードの説明に沿って、フォント ファイルをアセット マネージャーにアップロードします。
  2. [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. 用途に適した自社のロゴを入手します。 推奨サイズについては、前掲の表をご覧ください。
  2. テーマエディタにアクセスします
  3. メインロゴをアップロードします。

    Cloud コンソールの UI

    1. テーマエディタの [基本スタイル、メインロゴ] で、[参照] をクリックします。
    2. ロゴファイルに移動して選択します。
    3. [開く] をクリックします。

    従来の UI

    テーマエディタで、デスクトップ画面上部のナビゲーション バーにあるロゴを置き換えるには:

    1. 右ペインの [基本スタイル] で、[メインロゴ] フィールドにある [アップロード アイコン アップロード] をクリックします。
    2. ローカル ディレクトリで、デスクトップ用のロゴを探します。
    3. [開く] をクリックして、ファイルをアップロードします。
  4. モバイルロゴをアップロードします。

    Cloud コンソールの UI

    1. テーマエディタの [基本スタイル] で、[ロゴのオプション] を開きます。
    2. [モバイルロゴ] で [参照] をクリックします。
    3. モバイルロゴ ファイルに移動し、選択します。
    4. [開く] をクリックします。

    従来の UI

    上部のナビゲーション バーにあるモバイル表示用のロゴを置き換えるには:

    1. 右ペインの [基本スタイル] で [ロゴのオプション] を展開し、[モバイルロゴ] フィールドにある [アップロード アイコン アップロード] をクリックします。
    2. ローカル ディレクトリで、モバイル用のロゴを探します。
    3. [開く] をクリックして、ファイルをアップロードします。
  5. [保存] をクリックします。

  6. [プレビュー] をクリックして、ポータルの変更をブラウザでプレビューします。ブラウザの幅に応じて、デスクトップ用とモバイル用のどちらかのロゴが表示されます。

  7. [公開] をクリックして、変更をポータルに公開します。メッセージが表示されたら操作を確定します。

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

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

  1. ファビコンに適した自社のロゴを入手します。 推奨サイズについては、前掲の表をご覧ください。
  2. テーマエディタにアクセスします
  3. ファビコン ファイルを見つけます。

    Cloud コンソールの UI

    1. テーマエディタの [基本スタイル] で、[ロゴのオプション] を開きます。
    2. [参照] をクリックします。
    3. ロゴファイルに移動して選択します。

    従来の UI

    1. 右ペインの [Basic Styles] で [Logo options] を開き、[ファビコン] フィールドにある をクリックします。
    2. ロゴファイルに移動して選択します。
  4. [開く] をクリックして、ファイルをアップロードします。

  5. [保存] をクリックして、左ペインで変更をプレビューします。

  6. [公開] をクリックして、変更をポータルに公開します。メッセージが表示されたら操作を確定します。

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

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

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

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

  • 同じファイル名と相対サイズ(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] の [変数] セクションに、次の変数と変更した値を含めます。

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

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

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

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

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

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

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

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

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

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

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

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

  1. テーマスタイル要素のカスタマイズに記載のとおり、[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.
        }
  2. ページエディタを使用してポータル コンテンツを開発するに記載のとおり、ポータルページのコンテンツを編集して次の <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>

テーマを公開する

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

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

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

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] セクションでオーバーライドできる変数をまとめます。変数をオーバーライドする方法については、テーマ変数をオーバーライドするをご覧ください。

ベーステーマ変数

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

$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);