パネルおよびパネル要素のスタイル設定
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。
このページの内容
アプリケーションのブランディングテーマに合った、視覚的に魅力的な見た目にするために、パネルのスタイルプロパティを設定する方法について説明します。
1. パネルのスタイルを設定する
1.1. スタイルを設定する手順
パネル全体、パネルコンテナ、またはパネル要素であるText、画像、Buttonごとにスタイルを設定できます。
1. 対象のページのページビルダーに移動し、左側ペインでPanelをクリックします。
2. 表示される一覧からパネルテンプレートをドラッグ＆ドロップして作成スペースに配置します。Panel Configurationペインが開きます。
メモ: すでにパネルが作成されている場合は、ページビルダーでそのパネルを選択し、設定をクリックしてPanel Configurationペインを開きます。
3. 右側セクションのStyleタブに移動します。
4. パネルおよびパネルコンテナ、パネル要素のスタイルを設定して、パネル全体に一貫性のあるスタイリッシュな見た目を与えることができます。
- パネル／パネルコンテナ
次の表では、パネルおよびパネルコンテナで利用できるすべてのスタイルプロパティと、その設定手順を説明します。
|
プロパティ
|
手順 |
|
列の配置
（パネルおよびパネルコンテナに適用）
|
利用可能な位置は、Top left、Top、Top right、Left、Center、Right、Bottom left、Bottom、Bottom rightです。
|
|
Swap
（パネルコンテナに適用）
|
選択したパネルコンテナを、その右または左にあるパネルコンテナと入れ替えます。
|
|
Padding
（パネルおよびパネルコンテナに適用）
|
4 辺それぞれのパディング値を入力して、次の間の余白を調整します。
|
|
Background color
（パネルおよびパネルコンテナに適用）
|
パネル／パネルコンテナの背景色をカスタマイズします。
|
|
Background
（パネルおよびパネルコンテナに適用）
|
パネル／パネルコンテナの背景画像を、My libraryまたはWeb リンクから設定します。
さらに次の項目をカスタマイズできます。
メモ:
|
メモ: パネルテンプレートにヘッダーまたはフッターが含まれている場合は、そのHeightプロパティを設定できます。次のいずれかを選択します。
- Fill - ラベルの高さをちょうど覆うように、ヘッダー／フッターの高さを自動調整します。
- Fixed - ヘッダー／フッターの高さをピクセル単位でカスタム設定します。
初期設定では、Fixedが選択され、高さは 50 ピクセルに設定されています。
- パネル要素
次の表では、パネル要素で利用できるすべてのスタイルプロパティと、その設定手順を説明します。
|
プロパティ
|
パネル要素
|
手順
|
|
ボタンの種類
|
Button
|
ボタンの形状を四角形または角丸から選択します。
|
|
フォントファミリー
|
|
テキスト値またはラベルに使用するフォントを選択します。
|
|
スタイル
|
|
太字、斜体、下線、文字の大文字・小文字などのスタイルプロパティをカスタマイズします。
|
|
色
|
|
フォント、背景、および（含まれている場合は）画像の背景に使用する色を選択します。
|
|
フォントサイズ
|
|
ドロップダウンに表示される 12～40 px のプリセットからフォントサイズを選択します。数値をクリックすると、1～99 ピクセルの任意のカスタム値を設定できます。
|
|
マージン
|
|
マージン値を使用して、2 つのパネル要素間の距離を設定します。
|
|
形状
|
画像
|
画像の形状を四角形、角丸、円形から選択します。
|
|
形状サイズ
|
画像
|
画像の形状サイズを小、中、大、カスタムから選択します。
メモ: カスタムを選択した場合は、ピクセル単位で幅と高さの値を指定します。
|
|
アイコンサイズ
|
画像（組み込みアイコンのみ）
|
ドロップダウンに表示される 12～40 px のプリセットからアイコンサイズを選択します。 数値をクリックすると、1～99 ピクセルの任意のカスタム値を設定できます。
|
2. 関連トピック
Zoho CRM 管理者向けトレーニング
「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。
日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Zoho Campaigns Resources
Zoho WorkDrive Resources
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
Related Articles
パネルおよびパネル要素のアクション設定
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 このページの内容 アプリケーションの実行時に、パネルまたはパネル要素をクリックしたときに実行されるアクションの設定方法について説明します。設定できるアクションには、URL、フォーム、レポート、ページを開く、または関数を実行することが含まれます。 利用条件 パネルは、Creator ...ボタンの作成と管理
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 このページの内容 Creator ページにボタン要素を挿入し、アプリ内ナビゲーション、URL のオープン、自動タスクの実行などの CTA（コールトゥアクション）処理を設定する方法を説明します。 提供状況 ボタンは、Creator のすべてのプランで作成できます。 ...ボタンの基本と使い方
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 概要 ボタンは、URL を開く、フォームを送信する、ワークフローを実行する、ページを移動するなどのカスタムのクリック時アクションを実行するインタラクティブな CTA 要素です。関数を通じて自動化を有効にし、ユーザーエクスペリエンスを向上させ、アプリケーション内外や他のアクセス可能な ...パネルおよびパネル要素の表示設定
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 このページの内容 ページコンポーネント上で、静的／動的データ、画像やアイコン、CTA ボタンを表示するためのパネルおよびパネル要素の表示プロパティの設定方法について説明します。 提供状況 パネルは、Creator のすべてのプランで作成できます。 ...パネルの概要と使い方
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 概要 パネルは、ページ内に埋め込まれるビジュアルコンテナで、動的な指標、ステータス、KPI などの重要な情報を、構造化され視覚的にわかりやすい形式で表示するために使用します。ダッシュボードから重要なインサイトを素早く把握できるようにし、URL を開く、Creator ...