パネルおよびパネル要素のスタイル設定

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

このページの内容

アプリケーションのブランディングテーマに合った、視覚的に魅力的な見た目にするために、パネルのスタイルプロパティを設定する方法について説明します。

提供状況

パネルは、Creator のすべてのプランで作成できます。
スーパー管理者、管理者、開発者のみが、パネルを作成および管理できます。

1. パネルのスタイルを設定する

1.1. スタイルを設定する手順

パネル全体、パネルコンテナ、またはパネル要素であるText、画像、Buttonごとにスタイルを設定できます。

1. 対象のページのページビルダーに移動し、左側ペインでPanelをクリックします。

2. 表示される一覧からパネルテンプレートをドラッグ＆ドロップして作成スペースに配置します。Panel Configurationペインが開きます。

メモ: すでにパネルが作成されている場合は、ページビルダーでそのパネルを選択し、設定をクリックしてPanel Configurationペインを開きます。

3. 右側セクションのStyleタブに移動します。

4. パネルおよびパネルコンテナ、パネル要素のスタイルを設定して、パネル全体に一貫性のあるスタイリッシュな見た目を与えることができます。

パネル／パネルコンテナ

次の表では、パネルおよびパネルコンテナで利用できるすべてのスタイルプロパティと、その設定手順を説明します。

プロパティ	手順
列の配置（パネルおよびパネルコンテナに適用）	Panel - パネル内で、パネルコンテナを配置する位置を調整します。 Panel container - パネルコンテナ内で、パネル要素を配置する位置を調整します。利用可能な位置は、Top left、Top、Top right、Left、Center、Right、Bottom left、Bottom、Bottom rightです。
Swap （パネルコンテナに適用）	選択したパネルコンテナを、その右または左にあるパネルコンテナと入れ替えます。
Padding （パネルおよびパネルコンテナに適用）	4 辺それぞれのパディング値を入力して、次の間の余白を調整します。 Panel - コンテンツと要素の枠線との間の余白。 Panel container - コンテナと要素の枠線との間の余白。
Background color （パネルおよびパネルコンテナに適用）	パネル／パネルコンテナの背景色をカスタマイズします。
Background （パネルおよびパネルコンテナに適用）	パネル／パネルコンテナの背景画像を、My libraryまたはWeb リンクから設定します。さらに次の項目をカスタマイズできます。 Scaling - 次のいずれかを選択できます。 Fill - 画像を拡大して、領域全体を埋めます。 Fit - コンテナの枠内に収まるように画像サイズを調整し、画像が切れないようにします。 Tile - 画像を水平方向または垂直方向に繰り返して、領域全体を埋めます。メモ: FillまたはFitを選択した場合、画像を領域の左、右、上、下、中央のいずれかに配置できます。 Tileを選択した場合、画像を水平方向、垂直方向、またはその両方に繰り返すかを指定できます。初期設定では、水平・垂直の両方が選択されています。どちらも選択しない場合は、直前に選択されていた設定が自動的に適用されます。 Overlay - 背景画像に、任意の色のオーバーレイを有効にします。オーバーレイ色の濃さは 0% 〜 99% の範囲でカスタマイズできます。

メモ: パネルテンプレートにヘッダーまたはフッターが含まれている場合は、そのHeightプロパティを設定できます。次のいずれかを選択します。

Fill - ラベルの高さをちょうど覆うように、ヘッダー／フッターの高さを自動調整します。
Fixed - ヘッダー／フッターの高さをピクセル単位でカスタム設定します。

初期設定では、Fixedが選択され、高さは 50 ピクセルに設定されています。

パネル要素

次の表では、パネル要素で利用できるすべてのスタイルプロパティと、その設定手順を説明します。

プロパティ	パネル要素	手順
ボタンの種類	Button	ボタンの形状を四角形または角丸から選択します。
フォントファミリー	テキストボタンのラベル	テキスト値またはラベルに使用するフォントを選択します。
スタイル	テキストボタンのラベル	太字、斜体、下線、文字の大文字・小文字などのスタイルプロパティをカスタマイズします。
色	テキスト画像 Button	フォント、背景、および（含まれている場合は）画像の背景に使用する色を選択します。
フォントサイズ	テキストボタンのラベル	ドロップダウンに表示される 12～40 px のプリセットからフォントサイズを選択します。数値をクリックすると、1～99 ピクセルの任意のカスタム値を設定できます。
マージン	テキスト画像 Button	マージン値を使用して、2 つのパネル要素間の距離を設定します。
形状	画像	画像の形状を四角形、角丸、円形から選択します。
形状サイズ	画像	画像の形状サイズを小、中、大、カスタムから選択します。メモ: カスタムを選択した場合は、ピクセル単位で幅と高さの値を指定します。
アイコンサイズ	画像（組み込みアイコンのみ）	ドロップダウンに表示される 12～40 px のプリセットからアイコンサイズを選択します。数値をクリックすると、1～99 ピクセルの任意のカスタム値を設定できます。

2. 関連トピック

次のトピック

Zoho Creator のボードについて参照してください。リーダーボードの作成、プロジェクトの効率的な整理、組織の健全性の可視化などに利用できます。

アプリケーションの実行ビューでパネルまたはパネル要素がクリックされたときに実行されるアクションを設定する方法について参照してください。