テーマのカスタマイズ

ファビコンのカスタマイズ

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

1. ファビコンに適した自社のロゴを入手します。
   推奨サイズについては、前述の表をご覧ください。
2. テーマエディタにアクセスします。
3. 右パネルの [Basic Styles] で [Logo options] を展開し、[Favicon] フィールドにある をクリックします。
4. ファビコン版のロゴが保存されているローカル ディレクトリに移動してロゴファイルを選択します。
5. [Open] をクリックしてファイルをアップロードします。
6. [Save] をクリックして、左パネルで変更をプレビューします。
7. [Publish] をクリックして、変更をポータルに公開します。メッセージが表示されたら操作を確定します。

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

ログインページのロゴは、デベロッパー プログラムの登録およびログイン エクスペリエンスを構成するときにカスタマイズできます。その方法は、会社情報を管理するをご覧ください。

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

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

• ヘッダーとフッターのナビゲーション ツールバーの色をカスタマイズするには、[Primary color] を変更します。その方法は、カラーパレットをカスタマイズするをご覧ください。
• ヘッダーとフッターのナビゲーション ツールバーに表示されるメニュー項目のフォントサイズとスタイルをカスタマイズするには、フォントとボタンのスタイルを変更します。その方法は、フォント ファミリーとフォント スタイルをカスタマイズするをご覧ください。
• ヘッダー ナビゲーション ツールバーの高さをカスタマイズするには、詳細テーマエディタにアクセスして、[Variables] セクションで次の変数に変更後の値を指定します。$layout-header-height: 64px;
• フッター ナビゲーション ツールバーの高さをカスタマイズするには、詳細テーマエディタにアクセスして、[Variables] セクションで次の変数に変更後の値を指定します。$layout-footer-height: 44px;
• デスクトップとモバイル ディスプレイのナビゲーション ツールバーにあるロゴをカスタマイズします。

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

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

• 同じファイル名と相対サイズ（3,000 ピクセル x 1,996 ピクセル）を持つ独自の home-background.jpg 画像を作成し、アセット マネージャーを使用してこの画像をアップロードします。詳しくは、アセットの管理をご覧ください。

• 背景画像のファイル名とそのパディングを変更するには、詳細テーマエディタにアクセスし、[Custom Styles] セクションで、変更後の値で次の SCSS を指定します。

  #index {
    &.main {
      .main-content {
        padding: 0;
        background-image: url('/files/home-background.jpg');
        background-size: cover;
      }
    }
  }
  

• 背景画像をポータルのすべてのページに追加するには、詳細テーマエディタにアクセスし、[Custom Styles] セクションで、変更後の値で次の SCSS を指定します。

   body {
      background-image: url('/files/background-image.jpg');
   }
  
  

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

タイポグラフィをカスタマイズするには、詳細テーマエディタにアクセスし、[Variables] セクションで、次のタイポグラフィ変数のうち 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);
}

詳細テーマエディタを使用してテーマをカスタマイズする

テーマをカスタマイズするには、テーマ変数をオーバーライドするか、詳細テーマエディタで直接テーマスタイル要素をカスタマイズします。

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

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

たとえば、ヘッダー ナビゲーション フッターとフッター ナビゲーション ツールバーの高さをカスタマイズするには、詳細テーマエディタの [Variables] セクションで、変更後の値を指定した次の変数を追加します。

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

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

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

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

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

詳細テーマエディタの [Custom Styles] セクションで、直接テーマスタイル要素をカスタマイズします。

たとえば、ポータルにアプリを登録するときに表示される[New App] ページの [Create] ボタンのカラーを変更するには、次のテーマスタイル要素を変更した値で指定します。

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

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

テーマスタイル要素をカスタマイズするには、次のようにします。

1. テーマエディタにアクセスします。
2. 右パネルで [Advanced] をクリックします。
3. [Custom Styles] をクリックします。
4. テーマスタイル要素を追加します。
5. [Save] をクリックして変更を保存します。
6. [x] をクリックして詳細テーマエディタを閉じます。
7. プレビュー ペインで変更を確認します。または、[Preview] をクリックしてポータルの変更をブラウザでプレビューします。
   注: プレビュー ペインにあるポータルのナビゲーションをクリックしてすべてのページを順に開き、各ページの変更を確認できます。
8. [Publish] をクリックしてテーマを公開します。更新の確認を求めるメッセージが表示されます。

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

ポータルページに全幅パネルを作成するには、次のようにします。

1. 詳細テーマエディタで、次のテーマスタイル要素を追加します。詳細は、テーマスタイル要素をカスタマイズするをご覧ください。

   .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] セクションでオーバーライドできる変数をまとめます。テーマ変数をオーバーライドするを参照してください。

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

ベーステーマ変数

サイト全体で使用されているベーステーマの前景色をカスタマイズします。有効な値は 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 カラーパレットを緑に変更するには、次のようにします。

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