内部ダッシュボードのテーマ

カスタムテーマを使用すると、内部（埋め込みではない）Looker ダッシュボードの外観をカスタマイズできます。テーマを使用して、フォント ファミリー、テキストの色、背景色、ボタンの色、タイルの色などの視覚的要素をカスタマイズできます。テーマは、ユーザー定義のダッシュボードと LookML ダッシュボードの両方に適用できます。

たとえば、ダッシュボードの外観を変更する「ダーク」テーマを作成できます。

ダッシュボードとダッシュボードのタイルの編集ウィンドウのテーマは、[管理] パネルの [プラットフォーム] セクションにある [テーマ] ページで定義できます。

このページでは、次について説明します。

ユーザーとインスタンスの要件

内部 Looker ダッシュボードのテーマを管理するには、次の要件を満たしている必要があります。

ダッシュボードにテーマを適用する

ダッシュボードにテーマを適用するには、ダッシュボードが編集モードになっていることを確認し、[スタイル] をクリックして [スタイル] パネルを開きます。[テーマ] フィールドからテーマを選択すると、そのテーマがダッシュボードに適用されます。[なし] を選択し、インスタンスにデフォルトのテーマが設定されている場合は、デフォルトのテーマが適用されます。

ダッシュボードのダウンロード

ダッシュボードを PDF としてダウンロードすると、適用されているカスタムテーマが表示されます。

カスタムテーマの作成

カスタムテーマを作成するには、[テーマ] 管理ページで [内部] タブを選択し、[テーマを追加] をクリックします。

次に、[新しいテーマ] ページで、カスタマイズする各設定のスタイルと色を指定します。次のセクションで説明するように、設定を変更できます。変更を保持するには、[テーマを保存] を選択し、新しいテーマを保存します。

テーマ

名前: テーマの名前は一意である必要があり、英数字とアンダースコアのみを使用できます。テーマ名にスペースを入力すると、テーマを保存するときにスペースがアンダースコアに置き換えられます。

全般

キーの色: ダッシュボードでは、メインボタンとフィルタ コントロールにこの色が使用されます。Explore では、フィールド ピッカーのリンクとアイコン、メインボタン、バナー、アクセントにこの色が使用されます。

テキストの色: Explore とダッシュボードに表示されるテキストの 16 進数のカラーコード。

背景色: Explore とダッシュボードの背景の 16 進数のカラーコード。

フォント ファミリー: フォント ファミリーの名前。このフォントは、タイルのタイトル、テキストタイル、可視化の凡例など、ダッシュボード上のすべてのテキストに使用されます。このフォントは、Explore 内のすべてのテキストにも使用されます。「Open Sans」のようにフォント名にスペースが含まれている場合は、名前を引用符で囲みます。

一般的なウェブセーフ フォントを使用している場合は、[フォント ファミリー] フィールドにフォント名を入力し、[フォントソース] フィールドを空白のままにします。あまり一般的でないフォントを使用する場合は、[フォント ファミリー] フィールドにフォント名を入力してから、次に説明する [フォントソース] 欄で使用するフォントの定義の URL を指定します。

フォントソース: カスタム フォント（一般的なウェブセーフなフォントではないフォント）を使用する場合を除き、このフィールドは空白のままにします。フォントソースは https で始まる完全な URL であり、@font-face の src 引数で指定された url 値を指す必要があります。.woff2 ファイルは Internet Explorer 11 でサポートされていないため、ウェブ オープン フォント形式（.woff）ファイルを使用することをおすすめします。

  • たとえば、PT Sans Narrow の場合は、[フォント ファミリー] フィールドに「PT Sans Nallow」と入力し、[フォントソース] フィールドに「https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff」と入力します。

カスタムテーマを使用したダッシュボード タイルの編集ウィンドウの例

前のセクションで説明した Explore の要素に加えて、ダッシュボード タイルを編集すると、[キーの色] 設定で指定したシェード（#e82042）でバナーが表示され、[フォント ファミリー] 設定で指定したフォント（Verdana）が表示されます。

バナーに色 #e82042、ページ上のすべてのテキストに Verdana フォント ファミリーが適用された、Looker ダッシュボードの [タイルの編集] ダイアログ。

ダッシュボード ページ

カラー コレクション: 必要に応じてカラー コレクションを選択することもできます。カラー コレクションは、相性の良い調整パレットのセットです。ダッシュボードにカラー コレクションを割り当てると、すべてのダッシュボード タイル内のすべてのデータシリーズがコレクションのパレットに従って色分けされ、データ系列の色がダッシュボード全体にわたって調整されます。

テーマにカラー コレクションを割り当てると、以前にタイルに割り当てられていたカラー コレクションが、テーマのカラー コレクションによってオーバーライドされます。ただし、テーマのカラー コレクションは、データシリーズに割り当てられたカスタマイズされた色をオーバーライドしたり、テーブル可視化に適用された条件付きフォーマットをオーバーライドしたりすることはありません。

タイトルのフォントサイズ: 必要に応じて、事前定義された一連のサイズ（ピクセル単位）からダッシュボード タイトルのフォントサイズを調整します。

上マージン: 必要に応じて、ダッシュボード上部の余白に特定の値を設定します。プルダウン メニューで定義済みのオプションから選択します。マージンはピクセル（px）単位で測定されます。

下マージン: 必要に応じて、ダッシュボードの下部にあるマージンの値を指定します。プルダウン メニューで定義済みのオプションから選択します。マージンはピクセル（px）単位で測定されます。

左右マージン: 必要に応じて、ダッシュボードの余白の特定の値を設定します。プルダウン メニューで定義済みのオプションから選択します。マージンはピクセル（px）単位で測定されます。

ダッシュボードタイル

タイトルの色: 次の要素を表す 16 進数のカラーコード。

  • ダッシュボードのタイトル
  • ダッシュボード タイルのタイトル
  • Markdown タイルのタイトルとヘッダー レベル 1 テキスト
  • 単一値の可視化のテキストの色

テキストの色: 次の要素を表す 16 進数のカラーコード。

  • ダッシュボード上のテキスト（ビジュアリゼーションの凡例を含む）
  • Markdown タイルの字幕と本文（ヘッダー レベル 1 のテキストを除く）
  • テキストタイルの見出しレベル 1、見出しレベル 2、標準テキスト
  • 単一値可視化のタイルアイコン

テキスト本文の色: 次の要素を表す 16 進数のカラーコード。

  • Markdown タイルの本文テキスト（ヘッダーレベル 2 とヘッダーレベル 3 のテキストを除く）。
  • テキストタイルの本文

背景色: テキストタイルを除くすべてのタイルの背景の 16 進数のカラーコード。

テキストの背景色: テキストタイルの背景の 16 進数のカラーコード。

タイトルの配置: タイルのタイトルの配置を左、右、中央に設定します。

タイトルのフォントサイズ: 必要に応じて、事前定義された一連のサイズ（ピクセル単位）からダッシュボード タイルのフォントサイズを調整します。

ボックス シャドウ: CSS 構文を使用してダッシュボード タイルを囲むシャドウを作成します。事前定義されたボックス シャドウから選択することも、カスタムのボックス シャドウを作成することもできます。カスタム ボックスのシャドウを作成するには、選択した horizontal-offset vertical-offset blur-radius spread-radius color を入力し、[Enter Custom Styling] を選択して設定を適用します。ボックスのシャドウ設定のプレビューが右側に表示されます。

列のギャップサイズ: 必要に応じて、事前定義された一連のサイズ（ピクセル単位）からダッシュボード タイルの列間のスペースのサイズを調整します。

行のギャップサイズ: 必要に応じて、事前定義された一連のサイズ（ピクセル単位）からダッシュボード タイルの行間のスペースのサイズを調整します。

境界の半径: 必要に応じて、ダッシュボード タイルの境界の半径を調整して、四角形または丸みを帯びた角を作成します。

テーマの編集

すべてのテーマについて、関連する [編集] ボタンをクリックして設定を更新できます。

設定は、新しいテーマを作成する場合と同様に編集できます。設定の説明については、前述のテーマの設定をご覧ください。更新したものを保持しておくには、[保存] を選択してください。

テーマのコピー

既存のテーマをコピーするには、テーマのメニューを選択し、[テーマをコピー] を選択します。

テーマのコピーを作成すると、新しいテーマの名前はコピーしたテーマの名前の後に「(copy)」が付いたものがデフォルトで使用されます。この名前は、英数字とアンダースコアのみを含む新しい一意の名前に手動で変更し、括弧を削除するようにしてください。

残りの設定は、新しいテーマを作成する場合と同様に編集できます。設定の説明については、前述のテーマの設定をご覧ください。すべてのテーマ設定を保持するには、必ず [保存] を選択してください。

テーマの削除

テーマを削除するには、テーマのメニューを選択し、[テーマを削除] を選択します。

デフォルトのテーマを設定する

テーマをデフォルトのテーマとして設定すると、編集モードで [テーマ] フィールドから [なし] オプションを選択したダッシュボードに、そのテーマが適用されます。

テーマをデフォルトのテーマとして設定するには、テーマのメニューを選択し、[デフォルトとして設定] を選択します。

デフォルトのテーマからデフォルト設定を削除するには、テーマのメニューを選択し、[デフォルトを削除] を選択します。