管理者設定 - テーマ

注: Looker（オリジナル）を使用している場合、Lookerでは、埋め込みダッシュボードのテーマをカスタマイズできる機能、Look、および Explore を有効にする必要があります。この機能のライセンスの更新については、Google Cloud セールス スペシャリストにお問い合わせください。埋め込みの Look では、カスタムテーマはサポートされていません。カスタムテーマは、埋め込みダッシュボードと埋め込み Explore でのみ使用できます。Looker（Google Cloud コア）を使用している場合、埋め込みテーマは Enterprise および Embed エディション で使用できますが、Standard エディションでは使用できません。

注: 機能の追加に伴い、カスタムテーマのオプションは継続的に拡張されます。カスタムテーマのオプションを追加すると、既存のテーマに新しいオプションのデフォルト値が割り当てられます。デフォルト値は、テーマエディタを使用して変更できます。新しい機能を確認するには、このページの後にあるカスタムテーマの設定セクションをご覧ください。テーマでサポートされている設定の一覧については、テーマの作成 API ドキュメント ページをご覧ください。

カスタムテーマを使用すると、埋め込みの Looker ダッシュボード、Look、Explore の外観をカスタマイズできます。テーマを使用すると、フォント ファミリー、テキストの色、背景色、ボタンの色、タイルの色などの視覚的要素をカスタマイズできます。

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

ダッシュボードと Explore のデフォルト テーマの設定、または特定のダッシュボードまたは Explore へのテーマの適用方法については、埋め込みのスタートガイド - カスタムテーマの適用ドキュメント ページをご覧ください。

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

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

• Looker のデフォルト テーマ
• 埋め込みダッシュボードと Explore にテーマを適用する方法
• カスタムテーマを作成、コピー、編集、削除する方法
• ダッシュボードと Explore にデフォルトのテーマを設定する方法
• 選択したダッシュボードと Explore にデフォルト以外のテーマを適用する方法
• _theme URL 引数を適用してダッシュボード テーマ要素を選択する方法

デフォルトのテーマ

Looker のデフォルトのテーマはインスタンスで自動的に作成され、削除や編集はできません。Looker 管理者が別のテーマをデフォルトとして指定していない限り、Looker のテーマがデフォルトのテーマとして使用されます。

Looker のテーマ設定は、テーマの横にある [表示] ボタンを選択するか、テーマのコピーを作成して表示でき、以下のセクションにグループ化されます。

• テーマ
• 全般
• ダッシュボード ページ
• ダッシュボード タイル
• ダッシュボードのコントロール
• [探索] ページ
• Look ページ

テーマ

設定名	値
名前	Looker

全般

このセクションの設定は、埋め込みダッシュボードと埋め込み Explore の両方に適用されます。

設定名	値	メモ
主な色	#1A73E8	ダッシュボードでは、メインのボタンとフィルタ オプションにこの色が使用されます。 Explore では、メインのボタン、バナー、アクセントにこの色が使用されます。
テキストの色	#3e3f40
背景色	#f6f8fa
フォント ファミリー	Roboto、Noto Sans JP、Noto Sans CJK KR、Noto Sans Arabic UI、Noto Sans Devanagari UI、Noto Sans Hebrew、Noto Sans Thai UI、Helvetica、Arial、sans-serif	これらのフォントは Looker アプリケーションによって提供され、ブラウザ内および画像のレンダリング時の両方で使用できるのでおすすめです。Looker では、文字をサポートするフォント ファミリーのリストの最初のフォントを使用するため、優先度の高いフォントや特殊なフォントを最初にリストします。Looker では、可能な場合は「UI」のバリエーションを使用して、可視化コンポーネントの境界線に収まるように文字を若干変更します。
フォントソース	なし

ダッシュボード ページ

設定名	値
カラー コレクション	なし
背景色	#f6f8fa

ダッシュボード タイル

設定名	値
タイトルの色	#3a4245
テキストの色	#3a4245
テキスト本文の色	なし
背景色	#ffffff
タイトルの配置	中央

ダッシュボードのコントロール

設定名	値
ダッシュボードのタイトルを表示	あり
Filterバーを表示	あり

ページを探索

設定名	値
ヘッダーを表示	あり
タイトルを表示	あり
前回の実行を表示	あり
タイムゾーンを表示	あり
[実行] ボタンを表示	あり
[設定] ボタンの表示	あり

Look ページ

設定名	値
ヘッダーを表示	あり
タイトルを表示	あり
前回の実行を表示	あり
タイムゾーンを表示	あり
[実行] ボタンを表示	あり
[設定] ボタンの表示	あり

以下に、ダッシュボード、ダッシュボード タイルの編集ウィンドウ、Looker のテーマを使用した Explore の例を示します。

Looker テーマを使用したダッシュボードの例

Looker テーマのダッシュボード タイルの編集ウィンドウの例

Looker テーマを使用したデータ探索ページの例

テーマと埋め込み設定の適用方法

カスタムテーマと URL の引数を使用して、埋め込みダッシュボードや Explore の外観をデフォルトのテーマから変更できます。埋め込みダッシュボードまたは Explore を表示する場合、Looker は次の順番で設定を適用します。

1. デフォルト テーマの設定から始まります。
2. URL の theme 引数で指定されたカスタムテーマの設定を適用します（存在する場合）。
3. 存在する場合、_theme URL 引数で指定されたプロパティを適用します（ダッシュボードのみ）。

各項目は以前の項目をオーバーライドします。つまり、埋め込み設定はデフォルトのテーマ設定より優先され、カスタムテーマは埋め込みの設定とデフォルトのテーマより優先されます。

ただし、_theme URL 引数の場合は、_theme 引数で指定された要素のみが、他のテーマまたは埋め込み設定からの要素より優先されます。残りのカスタムテーマ設定と埋め込み設定はそのまま使用されます。たとえば、埋め込みダッシュボードの URL に _theme={"show_filters_bar":false} 引数を追加すると、埋め込み設定やカスタムテーマで [フィルタを表示] をオンにしても、フィルタバーは表示されません。ただし、カスタムテーマや埋め込み設定の他の設定は引き続き使用されます。

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

カスタムテーマの作成

カスタムテーマを作成するには、[テーマを追加] を選択します。

次に、[新しいテーマ] ページで、各設定のスタイルと色を指定します。

テーマのタイトル（一意である必要があります）を除くすべてのフィールドには、デフォルト テーマの値が自動的に入力されます。次のセクションで説明するように、設定を変更できます。変更を保持するには、[テーマを保存] を選択し、新しいテーマを保存します。

テーマ

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

全般

このセクションの設定は、埋め込みダッシュボードと埋め込み Explore の両方に適用されます。

キーの色: ダッシュボードでは、メインボタンとフィルタ コントロールにこの色が使用されます。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 の例

次の例は、カスタムテーマが設定された埋め込み Explore を示しています。[キーの色] を #e82042、[フォント ファミリー] を Verdana に設定します。

埋め込み設定で Explore を実行している場合は、Explore のテキストが、指定されたフォント ファミリー フォントである Verdana で表示されます。アクセント カラー、ボタン、リンクは、指定された [キーの色] である #e82042 で表示されます。

Explore の実行後、[実行] ボタンのアウトラインとテキストは指定した [キーの色] である #e82042 で表示されます。

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

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

ダッシュボード ページ

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

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

背景色: ダッシュボードの背景とテキストタイルの背景の 16 進数のカラーコード。

注: ダッシュボードのマージンはデフォルトで応答します。余白に特定の値を設定すると、レスポンシブ設定が上書きされるため、さまざまなウィンドウ サイズやモバイル デバイスで設定をテストしてください。

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

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

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

ダッシュボードタイル

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

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

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

• ダッシュボードに表示されるテキスト（可視化の凡例など）
• Markdown タイルの字幕と本文（ヘッダー レベル 1 のテキストを除く）
• テキスト タイルのヘッダーレベル 1、ヘッダーレベル 2、標準テキスト
• 単一値可視化のタイルアイコン

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

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

注: テキストの色とテキストの本文の色の両方に対して値が設定されている場合は、テキスト本文の色で設定されたカラーコードは、Markdown とテキストタイルの本文テキストに使用されます。

背景色: テキストタイルを除くすべてのタイルの背景の 16 進数のカラーコード。（テキストタイルには [ダッシュボード ページ] セクションの [背景色] で設定されているダッシュボードと同じ背景色が使用されます）。

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

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

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

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

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

注: デフォルトでは、ダッシュボードの列と行のギャップサイズはレスポンシブです。列と行のギャップサイズを調整すると、ダッシュボード タイルの応答性が上書きされます。さまざまなウィンドウ サイズやモバイル デバイスでダッシュボードのギャップ設定をテストします。

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

ダッシュボードのコントロール

[Display Dashboard Header]: このオプションを無効にして、すべてのダッシュボードのフィルタとコントロールを含むダッシュボードのヘッダー全体を非表示にします。このオプションを無効にすると、他のすべてのダッシュボード コントロール オプションが選択解除され、無効になります。

[Display Dashboard Title]: ダッシュボードのタイトルを表示するには、チェックボックスをオンにします。

[Center Dashboard Title]: ダッシュボードの中央にダッシュボード タイトルを表示する場合は、このチェックボックスをオンにします。このオプションを有効にしていない場合、ダッシュボードのタイトルは左揃えになります。このオプションは、[ダッシュボードのタイトルを表示する] オプションが有効になっている場合にのみ使用できます。

[Display Filters Bar]: ダッシュボードの最上部にフィルタバーを表示するには、チェックボックスをオンにします。このオプションが選択されていない場合は、[Display Filters Toggle] オプションは選択解除され、無効になり、ダッシュボード フィルタ アイコンは非表示になります。

[Display Filters Toggle]: ダッシュボード フィルタ アイコンを表示するチェックボックスを選択します。

[Display Dashboard Last Updated Indicator]: ダッシュボードの最終更新インジケーターを表示するチェックボックスを選択します。

[Display Reload Data Icon]: ダッシュボードのデータの再読み込みアイコンを表示するチェックボックスを選択します。

[Display Dashboard Menu]: ダッシュボードのその他メニューを表示するチェックボックスをオンにします。このオプションをオフにすると、ダッシュボードのメニュー オプションは使用できなくなります。

ページを探索

カスタム テーマ内では、埋め込み Explore ページで次の要素を調整できます。

ヘッダーを表示: このオプションを無効にすると、埋め込み Explore のヘッダー全体（タイトル、最終実行インジケーター、データのタイムゾーン、実行ボタン、[Explore のアクション] の歯車メニューなど）が非表示になります。

タイトルを表示: このオプションを無効にして、埋め込み Explore のタイトルを非表示にします。

前回の実行を表示: このオプションを無効にして、Explore が実行された時点を非表示にします。

タイムゾーンを表示: このオプションを無効にして、埋め込み Explore のデータのタイムゾーンを非表示にします。

[実行を表示] ボタン: このオプションを無効にして、埋め込みの Explore の [実行] ボタンを非表示にします。

[アクション表示] ボタン: このオプションを無効にして、埋め込みの Explore の [Explore のアクション] の歯車メニューを非表示にします。

Look ページ

カスタム テーマ内では、埋め込みの Look で次の要素を調整できます。

ヘッダーを表示: このオプションを無効にすると、埋め込み Look のヘッダー全体（タイトル、最終実行インジケーター、データのタイムゾーン、実行ボタン、[Explore のアクション] の歯車メニューなど）が非表示になります。

タイトルを表示: このオプションを無効にして、埋め込み Look のタイトルを非表示にします。

前回の実行を表示: Look が実行されていた時間を非表示にするには、このオプションを無効にします。

タイムゾーンを表示: このオプションを無効にして、埋め込み Look のデータのタイムゾーンを非表示にします。

[実行を表示] ボタン: 埋め込み Look の実行ボタンを非表示にするには、このオプションを無効にします。[Show Filters on Embedded Looks] が無効になっている場合、このトグルは [実行] ボタンを表示しません。

[アクション表示] ボタン: このオプションを無効にして、埋め込みの Look の [Explore のアクション] の歯車メニューを非表示にします。

テーマのコピー

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

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

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

テーマの編集

Looker のテーマはインスタンスで自動的に作成され、編集できません（Looker のテーマを変更する場合は、テーマのコピーを作成して、そのコピーを編集できます）。

その他のすべてのテーマについては、関連する [編集] ボタンを選択して設定を更新します。

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

テーマの削除

Looker のテーマと、現在デフォルトに設定されているテーマ以外のテーマは削除できます。テーマを削除するには、テーマのメニューを選択し、[テーマを削除] を選択します。

テーマを削除すると、その URL に指定されたテーマを持つ埋め込みダッシュボードでは、デフォルトのテーマが使用されます。

埋め込みダッシュボードと Explore のデフォルトのテーマの設定

埋め込みの Look では、カスタムテーマはサポートされていません。カスタムテーマは、埋め込みダッシュボードと埋め込み Explore でのみ使用できます。

インスタンス上の埋め込みダッシュボードと Explore のデフォルトのテーマを指定するには、テーマのメニューを選択し、[デフォルトとして設定] を選択します。

個々のダッシュボードや Explore に別の設定を指定しない限り、デフォルトのテーマが Looker インスタンスの埋め込みダッシュボードと Explore に使用されます。埋め込みダッシュボード、または Explore にテーマと埋め込み設定を適用する方法について詳しくは、このページのテーマと埋め込み設定を適用する方法セクションをご覧ください。

特定の埋め込みダッシュボードと Explore にテーマを適用する

埋め込みの Look では、カスタムテーマはサポートされていません。カスタムテーマは、埋め込みダッシュボードと埋め込み Explore でのみ使用できます。

ダッシュボードや Explore でデフォルトのテーマ以外のテーマを使用する場合は、埋め込みダッシュボードまたは Explore の URL で別のテーマを指定できます。これを行うには、テーマの名前を付けたパラメータ theme= を URL の末尾に追加します。たとえば、「Red」というテーマがある場合は、theme=Red を埋め込みダッシュボード URL の末尾に追加します。

https://example.cloud.looker.com/embed/dashboards/246?theme=red

Explore の場合は、埋め込みの Explore URL の末尾に theme=Red を追加します（none https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red）。

URL のテーマ要素では大文字と小文字が区別されないため、theme=Red または theme=red のいずれかを使用できます。

_theme URL 引数を使用して個々のダッシュボード テーマ要素を適用する

_theme URL 引数を使用すると、埋め込みダッシュボードの個々のテーマ要素（tile_background_color や show_title など）をカスタマイズできます。

注: _theme URL 引数は theme= パラメータとは異なります。_theme URL 引数を使用すると、テーマの個々の要素をダッシュボードに適用できます。theme= パラメータを使用すると、テーマ全体をダッシュボードに適用できます。

_theme オブジェクトのサポートされているプロパティをすべて確認するには、テーマの作成 API ドキュメント ページの「ThemeSettings」のリストを参照してください。

_theme URL 引数の形式は次のとおりです。

_theme={"<property>":value}

たとえば、_theme={"show_filters_bar":false} を使用して、埋め込みダッシュボードのフィルタバーを非表示にできます。フル URL は次のようになります。

https://example.cloud.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}

複数のテーマ プロパティを指定するには、カンマを使用します。

_theme={"show_title":false,"show_filters_bar":false,"text_tile_text_color":"blue"}

カラー値は引用符で囲む必要があります。色名または 16 進数のカラーコードで表されます。16 進数コードを使用する場合は、# サインの URL エンコード バージョン（%23）を使用するようにしてください。たとえば、これらの URL 引数の両方は赤色を指定しています。

_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}

埋め込みダッシュボードに _theme オブジェクトを使用する際の考慮事項のいくつかを以下に示します。

• _theme URL 引数で指定された要素は、他のテーマ内のその要素の設定をオーバーライドします。そのため、_theme 引数はテーマの絞り込みや設定の埋め込みに便利です。たとえば、フィルタバーを非表示にするカスタムテーマがあり、フィルタバーを表示することが有効なダッシュボードが 1 つあるとします。ダッシュボードにカスタムテーマを使用してから、埋め込みダッシュボードの URL に _theme={"show_filters_bar":true} 引数を追加すると、そのダッシュボードにフィルタバーが表示されますが、他のすべてのカスタムテーマの設定は保持されます。埋め込みダッシュボードにテーマと埋め込み設定を適用する方法について詳しくは、このページのテーマと埋め込み設定を適用する方法セクションをご覧ください。
• スクリプトをプログラミングする場合は、_theme 引数を URL エンコードする必要があります。
• PDF 形式で埋め込みダッシュボードを配布する場合、_theme 引数は適用されません。
• _theme 引数は、PDF としてダッシュボードをダウンロードする場合に適用されます。