テーマ設計機能を使用すると、ダッシュボードのテーマ、グローバルスタイル、ページレイアウト、コンポーネントスタイルを変更できます。このトピックでは、[ページ設定] パネルのテーマ設定について説明します。
前提条件
Quick BI コンソールにログインし、ダッシュボード編集ページが表示されていること。詳細については、「ダッシュボードの作成」をご参照ください。
操作手順
ダッシュボード編集ページで、上部メニューの [ページ設定] をクリックします。
アイコンをクリックすると、[ページ設定] パネルを展開または折りたたむことができます。
[ページ設定] の [テーマ] タブで、[ダッシュボードテーマ] [テンプレート]、[グローバルスタイル]、[ページレイアウト] などを設定します。
設定を素早く見つけるには、上部の [検索ボックス] にキーワードを入力します。
すべての設定カテゴリを折りたたむには、検索ボックスの右側にある
アイコンをクリックし、[すべてのカテゴリを折りたたむ] を選択します。
次の表にパラメーターの説明を示します。
[ダッシュボードテーマ] セクションでは、公式テーマまたはカスタムテーマを選択できます。
公式テーマ：Default、Deep Blue、Starry Sky、Technology、Event、Minimal、Indigo。
カスタムテーマ：既存のカスタムテーマを選択できます。
組織管理者は [カスタム] をクリックして、レポートテーマ管理ページに移動し、カスタムテーマを管理できます。
説明Quick BI Professional Edition では カスタムテーマ を利用できます。
組織管理者の場合、公式テーマから選択するか、新しいカスタムテーマを作成できます。
組織管理者でない場合、公式テーマまたは既存のカスタムテーマから選択できますが、新しいテーマを作成することはできません。
[グローバルスタイル] セクションで、テーマのグローバルスタイルを設定します。
パラメーター
説明
テーマモード
ライトモード または ダークモード を選択できます。
[ライトモード] を選択すると、ダッシュボードの背景は白になります。
デフォルトモードは[ライトモード]です。
[ダークモード] を選択すると、ダッシュボードの背景は黒になります。
チャートの配色
システム提供の テンプレート配色 または カスタム配色 を使用できます。
[グラフの配色] を [テンプレート] [配色] に設定すると、ドロップダウンリストから配色を選択できます。
例えば、[アドバンストグレー] 配色を選択した場合、グラフは次の図に示すように更新されます。
[チャートの配色] を [カスタム配色] に設定すると、各色見本の色を変更できます。
説明[グラデーションカラースタイル] は、[指標]、[傾向]、[比較] チャートに適用されます。
ページフォント
ダッシュボードページの フォントタイプ を設定します。
カードの角丸
チャートカードの 角丸 を設定します。角丸なし、小さな角丸、または大きな角丸を選択できます。
間隔
[コンパクト]、[標準]、[カスタム] から選択できます。
カード間の間隔
この設定は、[間隔] が [カスタム] に設定されている場合にのみ使用できます。カード間の行間隔と列間隔を調整します。
カードの余白
この設定は、[間隔] が [カスタム] に設定されている場合にのみ使用できます。カードの上下左右の余白を調整します。
セマンティックカラー
条件付き書式 やセカンダリ指標の表示などの機能では、色がデータの増加、変化なし、または減少などの情報を視覚的に伝えます。[セマンティックカラー] 設定では、[チャートの配色] で選択したテーマに基づいて、システムが自動的に異なるデフォルトのセマンティックカラーを割り当てます。また、増減、正負、ステータスなどのデータの意味に対するグローバルな配色をカスタマイズして、ビジネス分析のニーズに合わせることもできます。この設定はダッシュボード全体に適用されます。
[ページレイアウト] セクションで、次のパラメーターを設定します。
パラメーター
説明
ページレイアウト
ダッシュボードコンテンツのレイアウトを選択します。[コンテンツに合わせる] または [ウィンドウに合わせる] を選択できます。
[コンテンツに合わせる]：チャートやクエリコントロールなどのすべてのコンポーネントの実際のサイズと位置に基づいて、サイズを調整します。
[ウィンドウに合わせる]：現在のブラウザウィンドウに基づいて自動的にサイズを調整します。ページの列レイアウトを設定することもできます。
ページ情報
ダッシュボードに表示されるページ情報を設定します。[タイトルエリア]、[ストーリーアウトライン]、[フッター] が含まれます。
[タイトルエリア]：ダッシュボードのタイトルエリアを表示または非表示にします。タイトルエリアが表示されている場合、
アイコンをクリックして次の項目を設定できます。
[メインタイトルを表示]：ダッシュボードのメインタイトルを表示または非表示にします。表示する場合、テキストスタイルを調整し、ロゴとコンテンツの配置を設定できます。
[メモ]：メインタイトルエリアのメモを表示または非表示にします。メモを表示する場合、
アイコンをクリックしてメモの内容をカスタマイズできます。
[コンテンツエリアの下部マージン]：メインタイトルエリアの下部マージンを調整します。
[カバー背景]：メインタイトルエリアの背景色、オーバーレイ画像、高さを設定します。
[ストーリーアウトライン]：タイトルエリアの下にストーリーアウトラインを追加します。このオプションを選択すると、システムはダッシュボード上の既存のチャートのレイアウト順序に基づいて、ストーリーアウトラインを自動的に生成します。[ストーリーノード] の横にある
アイコンをクリックして、[ストーリーノードの編集] ダイアログボックスでアウトラインをカスタマイズできます。
[フッター]：ダッシュボードのフッターエリアを表示または非表示にします。フッターが表示されている場合、
アイコンをクリックして次の設定を行えます。
[フッターテキストコンテンツ]：フッターエリアのテキストコンテンツを設定します。
[フッター背景]：フッターエリアの背景色、オーバーレイ画像、高さを設定します。
ページ背景
背景色を設定します。[単色] または [グラデーション] を選択し、背景画像をオーバーレイするかどうかを選択できます。
ページ幅
[適応] または [固定] を選択できます。
説明[固定] を選択した場合、ページの左右のマージンをピクセル単位で設定する必要があります。設定後、左右のマージンは固定され、ページマージン設定で調整できなくなります。
ページマージン
[標準]、[超ワイドページ]、[カスタム] から選択できます。
[ダッシュボード背景] セクションで、次のパラメーターを設定します。
パラメーター
説明
[上部画像] と [下部画像]
画像を選択する際、[既存の画像] または [カスタム画像] を選択できます。
説明カスタム画像を選択する場合、ローカル画像をアップロードするか、URL から画像をアップロードできます。
[ダッシュボードコンポーネント] セクションで、次のパラメーターを設定します。
パラメーター
説明
タイトル
テキスト
チャートタイトルの フォントサイズ と 配置 を設定します。
区切り線
タイトル区切り線の色と幅を設定します。
カスタムタイトル背景
レポートのテーマに合わせてタイトル背景をカスタマイズします。次の項目を設定できます。
[背景色]：タイトル背景の塗りつぶし色を選択します。[単色] または [グラデーション] に設定できます。
[背景画像をオーバーレイ]：このオプションを選択すると、タイトル背景に画像をオーバーレイ表示します。デフォルトの背景画像を使用するか、カスタム画像をアップロードできます。
説明カスタム画像を選択する場合、ローカル画像をアップロードするか、URL から画像をアップロードできます。
[タイトルエリアの位置]：タイトルエリアの位置を設定します。[チャート内] または [チャート上] を選択できます。
[Tab 内のチャートにタイトル背景を適用]：この設定は、タイトル背景の設定を Tab コンポーネント内のチャートに適用します。このオプションを選択すると、Tab コンポーネント内のすべてのチャートが背景色、オーバーレイ画像、タイトルエリアの位置設定を継承します。
ネストされたタブがある場合、[Tab 内のチャートにタイトル背景を適用] が有効になっていると、メインタブのタイトルのみスタイルが同期されます。サブタブのタイトルは元の設定を保持します。
ステータスアイコン
ステータスアイコン をホバー時に表示するか常に表示するかを設定し、ステータスアイコン の色を設定できます。
プレビューモードで [その他のアクション] エントリポイントを非表示
このオプションを選択すると、プレビューモード で [その他のアクション] メニューが非表示になります。
背景スタイル
塗りつぶし
背景の塗りつぶし色を表示または非表示にします。
背景画像をオーバーレイ
チャート背景に背景画像またはカスタム画像をオーバーレイ表示します。
枠線
枠線を表示または非表示にし、その色を設定します。
影を表示
背景の影を表示または非表示にします。
空データスタイル
テキストコンテンツ
空データのプロンプトメッセージをカスタマイズします。デフォルトのメッセージは「No data returned.」です。
アイコンスタイル
空データのアイコンスタイルをカスタマイズします。
説明[カスタム画像] を選択した場合、ローカル画像をアップロードするか、URL から画像をアップロードできます。
ジャンプリンク
ジャンプリンクを設定すると、アイコンまたはテキストをクリックして指定されたアドレスに移動できます。
[一般コンテンツスタイル] セクションで、次のパラメーターを設定します。
パラメーター
説明
チャートスタイル
軸タイトル
軸タイトルのフォントサイズ、色、スタイルを設定します。
軸ラベル
軸ラベルのフォントサイズ、色、スタイルを設定します。
データラベル
データラベルのフォントサイズ、色、スタイルを設定します。
ツールチップ
ツールチップのフォントサイズ、色、スタイルを設定します。
凡例
凡例のフォントサイズ、色、スタイルを設定し、凡例記号がテキストに合わせて拡大縮小するかどうかを設定します。このオプションを選択した場合：
折れ線グラフの場合、凡例記号の線の太さがチャートの線の太さに比例して調整されます。
他のチャートの場合、凡例記号のサイズが凡例のフォントサイズに比例して調整されます。
テーブルスタイル
スタイル設定
テーブルのスタイルを設定します。[Zebra]、[Bordered]、[Simple]、[Minimal] から選択できます。
プライマリカラースキーム
プライマリカラースキームを設定します。[テーマカラー]、[グレー]、[カスタム] から選択できます。
ヘッダー
テーブルヘッダーのフォントサイズ、色、その他のプロパティを設定します。
コンテンツ
テーブルコンテンツのフォントサイズ、色、その他のプロパティを設定します。
[Tab コンポーネント] セクションで、次のパラメーターを設定します。
パラメーター
説明
選択されたタブのスタイル
選択されたタブのスタイルを設定します。[下線]、[区切り線]、[選択ブロック] から選択できます。
タブラベルスタイル
タブラベルのフォントサイズと、デフォルト状態および選択状態のスタイルを設定します。
Tab 内のビジュアライゼーションカードの枠線を表示
Tab コンポーネント内のビジュアライゼーションカードの枠線を表示または非表示にし、その色を設定します。
Tab 内のコンポーネント間の間隔をカスタマイズ
このオプションを選択すると、タブ内のコンポーネント間のカスタム間隔値を入力できます。選択しない場合、間隔はダッシュボードのグローバルな行間隔および列間隔設定に従います。
説明編集可能な間隔範囲は、PC では -32 px から 32 px、モバイルデバイスでは 0 px から 20 px です。
[クエリコントロール] エリアで、次のパラメーターを設定します。
パラメーター
説明
枠線
クエリコントロールの枠線 を表示または非表示にし、その色を設定します。
インタラクションボタン
インタラクションボタン の色を設定します。
ボタンの角丸
インタラクションボタンの ボタンの角丸 を設定します。
条件の間隔
条件間の間隔 を設定します。
条件名
条件名 のテキストスタイルを設定します。
選択ボックススタイル
選択ボックスのスタイル を設定します。
背景色
選択ボックスの 背景色 を設定します。
枠線
選択ボックスの枠線の太さと色を設定します。
角丸
選択ボックスの 角丸 を設定します。
テキスト
選択ボックスの テキスト の色とフォントサイズを設定します。
説明クエリコントロールエリアの設定は、すべてのクエリコントロールにグローバルに適用されます。ただし、個々のクエリコントロールにカスタムスタイル設定がある場合、これらのグローバル設定は上書きされます。たとえば、クエリコントロールエリアの選択ボックススタイルが [塗りつぶし] に設定されているが、クエリコントロール A のスタイルが独自の設定で [枠線] に設定されている場合、クエリコントロール A の選択ボックススタイルは [枠線] になります。
設定が完了したら、[保存] をクリックします。