1. このページの内容

3. カスタムレイアウトの設計

3.1 カスタムレイアウト作成の流れ

3.2 設定方法を見る

3.3 詳細ビュー用カスタムレイアウトを作成する手順:

1. [最初から作成]をクリックして、新しいカスタムレイアウトを作成します。
   
2. [テンプレートから]をクリックして、あらかじめデザインされたテンプレートを選択して使用します。任意のテンプレートを選択し、[このテンプレートを使用]ボタンをクリックします。
   
3. [JSON をインポート]をクリックして、既に作成してエクスポートしておいたカスタムレイアウトをインポートします。
   

1. 変更の取り消し／やり直し。
   
2. 保存前に Canvas をプレビュー。
   
3. Canvas を.json形式でエクスポート。
   
4. Canvas を全画面表示。
   
5. Canvas に名前を付ける。
   
   

3.3.1 データタブ

1. 左側の[データ]タブで、必要な項目（フォーム項目およびシステム項目）をデザイン領域にドラッグ＆ドロップします。
2. 必要な項目、カスタムアクション、データコメント、ブループリント、関連ブロックをデザイン領域にドラッグ＆ドロップします。
   

1. ラベル／値を右クリックして、項目の変更、ラベルの非表示、ラベル位置の左／上への変更、コンポーネントの固定／可変の切り替え、スタイルのコピー／他コンポーネントからの貼り付け、項目の削除を行います。
   
   
2. ボタン（カスタムアクション）を右クリックして、アクションの編集、項目の変更、スタイルのコピー／他コンポーネントからの貼り付け、アクションの削除を行います。
   
   
3. データコメントを右クリックして、関連リストの変更、スタイルのコピー／他コンポーネントからの貼り付け、コメントのロックおよび削除を行います。
   
   

3.3.2 要素タブ

1. セクション
2. タブ
3. テーブル
4. テキスト
5. アイコン
6. 線

3.3.2.1 セクション

1. 枠線をドラッグしてセクションボックスのサイズを変更します。
2. アイコンをクリックしてセクションを複製します。
3. セクションを右クリックし、[挿入] をクリックして項目を追加したり、コンポーネントを固定／可変に切り替えたり、スタイルのコピー／貼り付け、削除を行えます。
4. 要素に必要なスタイルを追加します。
   
   

3.3.2.2 タブ

1. タブに名前を付けるには、対象のタブをクリックし、左側パネルのStyleタブを開いて、適切な名前を入力します。
   
   
2. +アイコンをクリックして、タブを追加できます。
   
3. タブをクリックし、テキストボックスにタブ名を入力して名前を付けます。
4. タブにカーソルを合わせて閉じるアイコンをクリックすると、タブを削除できます。
   
5. タブにカーソルを合わせて両矢印アイコンが表示されたら、ドラッグ＆ドロップしてタブの位置を変更します。
6. 右クリックでタブ内を操作し、項目の挿入、コンポーネントの固定／可変の切り替え、スタイルのコピー＆貼り付け、ロック、削除などを行えます。
   
7. タブをアイコンで表現することもできます。その場合は、タブ名を右クリックし、アイコンを表示をクリックして、表示されたアイコンから選択します。
   
8. アイコンを追加した後は、右クリックしてアイコンを非表示にしたり変更したりし、タブ名を非表示にできます。
   
   
9. 画像や背景色などのスタイルコンポーネントも適用できます。操作方法はこちら
   

3。3。2。3 Table

1. 行や列にカーソルを合わせ、+または-アイコンをクリックして、行や列を追加または削除します。
2. 行を右クリックして項目を変更したり、コンポーネントを固定／可変にしたり、スタイルをコピー＆貼り付けしたり、項目を削除したりできます。
   
   
3. 境界線をドラッグしてテーブルのサイズを変更します。
   

3。3。2。4 Text

1. 境界線をドラッグしてテキストボックスのサイズを変更します。
2. 右クリックしてテキストボックスを複製したり、コンポーネントを固定／可変にしたり、テキストボックスを削除したりできます。
   
3. テキストの形式を見出し、太字、標準に変更し、必要なスタイル設定を適用できます。

3。3。2。5 Icon

1. アイコンパネルをスクロールして上下に移動し、豊富なアイコンの中から選択します。
   
   
2. アイコンをクリックして、複製、削除、変更を行います。
   
   
3. 境界線をドラッグして、サイズを拡大または縮小します。
   

3。3。2。6 折れ線グラフ

1. 線を横向きまたは縦向きに設定し、太さ、スタイル、色を調整できます。
   
2. 線をクリックして複製したり、固定コンポーネントとして設定したり、削除したりできます。
   

3。3。3 Style タブ

1. レイアウトにスタイルを適用する
2. 項目にスタイルを適用する
   
3. カスタム機能にスタイルを適用する
4. セクションにスタイルを適用する
5. タブにスタイルを適用する
6. テーブル、テキスト、アイコン、線にスタイルを適用する

3。3。3。1 レイアウトのスタイル設定

1. 背景
2. 余白（Padding）
3. 高さ
4. 幅
5. 画面に合わせる
   

Background

1. 背景色は、色のHEXコードを指定するか、カラーピッカーから選択します。アプリのテーマカラーがカラーピッカーに含まれている場合は、そのバリエーションから選択することもできます。
2. 画像チェックボックスをオンにし、追加したい画像のURLを入力します。
   
   
1. 画像サイズ - 画像サイズは次の3つの設定から指定できます。
   
1. Contain - ページ内に収まるように画像サイズを調整し、アスペクト比は維持します。
   
2. 元の内容 - 画像を元のサイズのまま保持します。
   
3. Cover - アスペクト比に関係なく、レイアウトページの縦横いっぱいに画像を引き伸ばします。
   
2. 画像の繰り返し - 背景画像のサイズが小さく、ページ全体をカバーできない場合は、画像の繰り返しオプションを使用します。画像を複数回繰り返して背景を完全に埋めることができます。次の繰り返しタイプから選択できます。
   
1. X - 画像をX軸方向に繰り返します。
   
2. Y - 画像をY軸方向に繰り返します。
   
3. 両方 - レイアウトページのX軸とY軸の両方に画像を繰り返します。
   
4. 繰り返しなし - 画像を繰り返さないようにします。
   
3. グラデーションチェックボックスをオンにして、背景に複数の色が滑らかに変化するグラデーションを作成します。直線上に複数の色を設定した場合は、位置を調整してすべての色が自然に混ざり合うようにできます。
   

Padding

1. Padding を増やす: スライダーを右にドラッグして余白を増やします。ピクセル単位で値を指定することもできます。
2. 四辺を同じ余白にする: 要素の四辺すべてに同じ余白を適用します。このチェックボックスをオフにすると、四辺それぞれに異なる余白を設定できます。

Height and width

Fit to screen

3。3。3。2 項目ラベルと値のスタイル設定

1. テキスト、見出し、標準、太字、斜体などのテーマを変更します。
2. フォント、フォントサイズ、色、大小文字、取り消し線を変更したり、テキストの配置を左揃え・中央揃え・右揃えに設定します。
3. ラベルの配置を左、上、右、下に設定します。
4. 背景色、枠線、角丸（半径）、余白（パディング、マージン）を変更します。

3。3。3。3 カスタム機能およびカスタムアクションのスタイル設定

1. コメントおよびリンクのテキストテーマを、ライト、標準、セミボールド、太字に変更します。
2. コメントボタン、リンク、コンテンツの背景色と枠線の色を変更します。
3. ユーザー権限アイコンの形状を変更します。

1. コンテナおよびボタンの背景色と枠線の色を変更します。
2. ブループリントステージのラベルおよびステージ名の色、サイズ、太さを変更します。

3。3。3。4 セクションのスタイル設定

1. 背景 - 設定内容は、レイアウトで利用できるものと同じです。
2. 枠線
3. 影
4. 角丸（半径）
5. パディング - 設定内容はレイアウトで利用できるものと同じです。
6. 高さと幅 - 設定内容はレイアウトで利用できるものと同じです。
7. 奥行き
   

枠線

1. 太さの調整: スライダーをドラッグして枠線の太さを増減します。ピクセル値を直接入力することもできます。
2. スタイル: ドロップダウンリストから枠線のスタイルを選択します。
3. 色: カラーパレットから枠線の色を選択するか、色の HEX コードを入力します。
4. 四辺同一の枠線: このオプションをオンにすると、枠線設定がセクションの4辺すべてに適用されます。チェックを外すと、各辺ごとに幅、スタイル、色を個別に設定できます。

影

1. X - 値に応じて、影を水平方向（左または右）に移動します。X の値が正の場合、影は要素の右側に表示され、負の場合は左側に表示されます。
2. Y - 値に応じて、影を垂直方向（上または下）に移動します。Y の値が正の場合、影は上側に表示され、負の場合は下側に表示されます。
3. ぼかし - 影のシャープさを指定します。ぼかしが 0 の場合、影はくっきり表示されます。値が大きいほど、影はよりぼやけます。
4. 広がり - 影の大きさを調整します。広がりの値が正の場合は影が大きくなり、負の場合は小さくなります。
5. 色 - カラーピッカーから影の色を選択できます。
   

角丸（半径）

1. 半径を増やす: スライダーをドラッグして半径を増減するか、ボックスに値を直接入力します。
2. 四辺同一の半径: このオプションをオンにすると、4辺すべてで同じ半径になります。チェックを外すと、各辺ごとに異なる半径を設定できます。
   

奥行き

3。3。3。5 タブのスタイル設定

1. 状態
2. 背景
3. 枠線
4. 角丸（半径）
5. パディング
6. マージン

状態

1. アクティブ - タブが選択されている状態。
2. ホバー - タブ名にカーソルを合わせている状態。
3. 標準 - タブがアクティブでもホバーでもない通常の状態。
   
   

1. また、上記の各状態ごとに、フォント、フォントサイズ、色、大小文字、取り消し線を変更したり、テキストの配置を左揃え・中央揃え・右揃えに設定できます。

3。3。3。6 テーブル、テキスト、アイコン、線のスタイル設定

1. 枠線
2. 影
3. 角丸（半径）
4. パディング
5. 奥行き

1. テキスト: フォント、フォントサイズ、色、大小文字、取り消し線を変更したり、テキストの配置を左揃え・中央揃え・右揃えに設定できます。
   
   
2. アイコン: アイコンの色、背景色、背景画像、枠線、影、表示設定をカスタマイズできます。
   
   
3. 線: 線を横向きまたは縦向きに設定し、太さ、スタイル、色を調整できます。
   
   

4. 制限事項

1. このページの内容は、スプレッドシートレポートを除くすべてのレポートに該当します。

関連トピック

1. キャンバスレイアウトデザイナーについて
2. カスタムレイアウトを管理する
3. キャンバスレイアウトをデフォルトに設定する