-
また、画像や背景色などのスタイルを適用することも可能です。
-
テーマごとににタブをグループ化できます。たとえば、[未完了の活動]、[完了した活動]、[招待された予定]、[今後の活動] などの関連する複数のタブを [活動] という1つのタブの中にまとめることができます。
- また、グループ化したタブのメニューに対して、展開(単数)や展開(複数)の処理を設定できます。
- 展開(複数)の処理を設定すると、複数のタブ内のメニューを同時に展開しておくことができます。あるタブのメニューを展開した後に、他のタブのメニューを展開した際にも、先に展開していたタブのメニューを表示したままにしておくことが可能です。
- 展開(単一)の処理を設定すると、1つのタブ内のメニューのみが展開されます。あるタブのメニューを展開した後、別のタブのメニューを展開すると、先に展開していたタブのメニューは非表示になります。
-
表:
表を使用すると、データを表形式で表示できます。たとえば、次の画像は、商品名、説明、保管場所といった情報を表形式で表示した例です。表を使用することで、限られたスペースで必要なデータを簡潔に表示することが可能です。
-
行や列にカーソルを合わせて、[+]または[-]アイコンをクリックすると、行や列を追加または削除できます。
-
行を右クリックすると、項目の変更、要素の固定化/流動化、スタイルのコピーや貼り付け、項目の削除などが可能です。
-
枠線をドラッグすると、表のサイズを変更できます。
- 行と列に色を追加できます。
- テキストに色を追加できます。
- 表に色を追加できます。
-
テキスト:
詳細ページに、任意のテキストを追加して表示できます。セクションの見出し、メモや注意事項などを表示できます。
-
枠線をドラッグすると、テキストの表示欄のサイズを変更できます。
-
テキストの表示欄を右クリックすると、複製、固定化/流動化、削除などが可能です。
-
画像:
詳細ページに、画像を追加できます。たとえば、連絡先の詳細ページに、画像の要素を追加して、各連絡先のプロフィール写真として設定できます。
-
画像の要素を選択して、キャンバスにドラッグして配置します。
-
画像の要素をクリックすると、アップロード画面が表示されます。
デバイス内の画像ファイルを参照してアップロードするか、事前にアップロードした画像データから選択するか、インターネット上に公開されている画像のURLを入力することで、画像を追加できます。
-
追加後、画像のサイズ変更や、枠線、影、角丸め、内側の余白などのスタイル調整が可能です。
-
アイコン:
通常のテキストによるラベルではなく、アイコンを使用して項目を表すことができます。たとえば、次の画像は商品名と価格をテキストではなくアイコンで表示した例です。
-
アイコンの種類は、アイコンの要素をキャンバスにドラッグして追加した後、一覧から選択できます。
-
アイコンを右クリックすると、種類の変更や、アイコンの複製/削除ができます。
-
枠線をドラッグすると、サイズを拡大/縮小できます。
要素の固定化/流動化
セクション、タブ、表、テキストなどの要素は、固定または流動化できます。要素を固定化すると、要素のサイズは固定され、画面サイズに応じて変更されません。一方、要素を流動化すると、画面サイズに応じて要素のサイズが変更されます。
たとえば、セクションに挿入された背景画像が画面サイズを超えてしまう場合、要素を流動化することで、ユーザーの画面に応じて要素のサイズが自動で調整されます。
要素へのスタイルの適用
背景色、枠線、内側の余白、外側の余白、項目ラベルの配置などのスタイルは、すべての要素に適用できます。また、スタイルを適用して、ページの背景をカスタマイズすることも可能です。特定の要素にのみ適用可能なスタイルもあります。なお、スタイルを設定集に登録して、別の要素に再利用することも可能です。
スタイルの適用方法については、次の動画もご参照ください。
ページのスタイル設定
スタイルの設定項目:
-
背景
-
余白
-
高さ
-
幅
-
画面に合わせる
背景
-
パレットまたは色の一覧から選択して、背景色を設定できます。16進数によるコードで色を設定することも可能です。
-
背景画像を設定する場合は、画像のチェックボックスを選択し、[画像をアップロードする]をクリックします。表示された画面で、デバイスから画像をアップロードするか、事前にアップロードした画像から選択するか、画像のURLを入力することで、画像を背景として使用できます。
-
画像のサイズ:
サイズは3つの方法のいずれかで設定できます。
-
同じ縦横比で調整する:
縦横比を維持したまま、ページに収まるように画像のサイズを調整します。
-
元のサイズ:
画像は元のサイズで保存されます。
-
全体に表示する:
縦横比に関係なく、画像をページの縦と横いっぱいに拡大します。
-
画像の繰り返し:
背景画像のサイズが小さく、ページ全体をカバーできない場合は、画像を繰り返して配置するように設定できます。同じ画像を複数回繰り返して使用することで、背景を完全に塗りつぶすことができます。繰り返しの種類は、次のいずれかから選択できます:
-
横:
画像は横方向に繰り返し表示されます。
-
縦:
画像は縦方向に繰り返し表示されます。
-
両方
画像はページの横方向と縦方向の両方に繰り返し表示されます。
-
繰り返しなし:
画像は繰り返し表示されません。
-
[グラデーション]
のチェックボックスを選択すると、背景の色にグラデーション(色の諧調)を設定できます。複数の色を選択して組み合わせたり、分岐点や方向や角度を調整したりすることが可能です。
内側の余白
内側の余白とは、枠線の内側の空白部分です。上下左右の余白の幅を設定できます。設定を変更するには、要素を選択して[内側の余白]のチェックボックスをクリックします。
-
余白の調整:
スライダーを右にドラッグすると、余白の幅を変更できます。余白の幅をピクセル単位で指定することも可能です。
-
すべての面の内側の余白を同じにする:
このチェックボックスを選択すると、設定した余白を上下左右のすべての面の内側の余白に適用できます。チェックボックスの選択を解除すると、各面の内側の余白を個別に設定できます。
高さと幅
ページの高さと幅をピクセル単位で入力して調整するか、自動的に調整されるように設定できます。
画面に合わせる
画面の高さと幅に応じて、ページのサイズが自動的に調整されます。
セクションのスタイル設定
セクションについては、次の項目をカスタマイズできます:
-
背景:ページの背景設定と同様です。
-
枠線
-
影
-
角丸め
-
余白:ページの余白設定と同様です。
-
高さと幅:ページの高さと幅の設定と同様です。
-
重なり順
枠線
枠線のチェックボックスをクリックすると、次の操作を実行できます:
-
太さの変更:
スライダーをドラッグすると、枠線の太さを変更できます。太さをピクセル値で入力することも可能です。
-
スタイル:
一覧から枠線のスタイルを選択できます。
-
色:
パレットから枠線の色を選択するか、色を16進コードで入力することも可能です。
-
すべての面の枠線を同じにする:
チェックボックスを選択すると、設定した枠線をセクションの上下左右のすべての面の枠線に適用できます。チェックボックスの選択を解除すると、各面の枠線を個別に設定できます。
影
影のチェックボックスをクリックすると、次の操作を実行できます:
-
横:
設定した値に基づいて、影が横方向(左右)に移動します。プラスの値にすると、影が要素の右側に表示されます。マイナスの値にすると、左側に表示されます。
-
縦:
設定した値に基づいて、影が縦方向(上下)に移動します。プラスの値にすると、影が要素の上側に表示されます。マイナスの値にすると、下側に表示されます。
-
ぼかし:
影の鮮明度を設定できます。ぼかしの値を0にすると、影は鮮明になります。ぼかしの値を大きくすると、影は不鮮明になります。
-
ぼかし度:
影のサイズを変更できます。プラスの値にすると、影が大きくなります。マイナスの値にすると、影が小さくなります。
-
色:
枠線の色を選択できます。
角丸め
要素の外枠の角を丸める半径を設定できます。[角丸め]のチェックボックスを選択すると、次の操作を実行できます:
-
半径の調整:
スライダーをドラッグすると、半径を変更できます。半径をパーセント値で入力することも可能です。
-
すべての角の半径を同じにする:
このチェックボックスを選択すると、設定した丸め半径をすべての角に適用できます。チェックボックスの選択を解除すると、4つの角の半径を個別に設定できます。
外側の余白
要素の外側の余白の幅を変更できます。これにより、詳細ページ内における要素の位置を調整できます。余白の幅を追加するには、要素を選択して[外側の余白]のチェックボックスをクリックします。
-
余白の調整:
スライダーを左右にドラッグすると、余白の幅を変更できます。余白をピクセル単位で指定することも可能です。
-
すべての面の外側の余白を同じにする:
このチェックボックスを選択すると、設定した余白を上下左右のすべての面の外側の余白に適用できます。チェックボックスの選択を解除すると、各面の外側の余白を個別に設定できます。
タブのスタイル設定
タブのスタイル設定では、次の項目を設定できます
(背景、枠線、角丸め、内側の余白、外側の余白については、上記と同様です):
-
状態
-
背景
-
枠線
-
角丸め
-
内側の余白
-
外側の余白
-
アイコン
状態
タブの状態や利用状況を区別できるようにカスタマイズすることが可能です。たとえば、あるタブが有効な状態の場合(該当のタブを選択した場合)に、背景色、余白、背景画像を変更できます。また、カーソルを合わせた場合に、枠線を青色に設定して区別することが可能です。状態には、次の3種類があります:
-
有効:
タブを選択したとき
-
カーソルを合わせた時:
タブ名にカーソルを合わせたとき
-
通常:
タブが無効、またはカーソルを合わせていないとき
各状態に対して、スタイル(フォントの種類、フォントのサイズ、色、大文字/小文字、取り消し線の有無、テキストの配置)を設定できます。
また、タブをクリックし、編集画面の[有効]状態の下部にあるテキスト欄にタブ名を入力することで、タブに名前を付けることが可能です。
タブ別のスタイル設定
以上の設定は、タブ別に行うことも可能です。タブごとに個別のスタイルを設定するには、編集欄でタブを選択し、編集メニューで
[専用のスタイル]の設定を有効にします。設定を有効にすると、該当のタブに対して、[通常]、[有効](タブにアクセスしているとき)、[カーソルを合わせたとき]のそれぞれの場合に適用するスタイルを指定できます。
メモ
-
タブに追加した関連リスト名は、変更できません。
-
[+]
アイコンをクリックすると、タブをさらに追加できます。
-
タブを右クリックすると、項目の挿入、タブの固定化/流動化、タブの削除ができます。
-
各タブ名にカーソルを合わせると左側に表示される三本の横線(
)にカーソルを合わせ、両側矢印が表示されたら、タブを左右にドラッグすることで、表示位置を移動できます。
アイコン
タブにアイコンを表示できます。タブ名を右クリックし、メニューから[アイコンを表示する]をクリックすると、アイコンの選択画面が表示されます。
アイコンの追加後に右クリックして、メニューから[アイコンを隠す]、[アイコンを変更する]、[テキストを隠す](タブ名を隠す)などを実行することも可能です。
表、テキスト、アイコン、線のスタイル設定
表、テキスト、アイコン、線のスタイル設定では、次の項目を設定できます:
-
枠線
-
影
-
角丸め
-
内側の余白
-
重なり順
また、テキスト、アイコン、線については、それぞれ次の項目も設定できます:
テキスト:
フォントの種類、フォントのサイズ、色、大文字/小文字、取り消し線の有無を変更したり、テキストの配置を左揃え/中央揃え/右揃えに設定したりすることが可能です。
アイコン:
アイコンの色、背景色、背景画像、枠線、影、角丸め、余白、重なり順をカスタマイズできます。
線:
線の方向を水平または垂直に設定したり、太さ、スタイル、色を調整したりできます。
項目のラベルのスタイル設定
項目のラベルは、スタイル設定のメニューからカスタマイズできます。また、タブ内のメニューからもカスタマイズ可能です。
-
フォントの種類、フォントのサイズ、色、大文字/小文字、取り消し線の有無を変更したり、テキストの配置を左揃え/中央揃え/右揃えに設定したりすることが可能です。
-
項目のラベルの配置は、上/下/左/右に設定できます。
-
また、背景色、角丸め、内側の余白、外側の余白の設定を変更できます。
-
項目のラベルを右クリックすると、項目を変更する、ラベルを隠す、ラベルを左/上に移動する、要素を固定化/流動化する、スタイルをコピーする、項目を削除するなどの操作を実行できます。
キャンバスルールによる条件付きスタイルの適用
条件付きスタイルの適用の設定では、指定した条件に基づいてキャンバス内の要素にスタイルを適用することができます。たとえば、「出張費」の通貨の項目に「10,000円」を超える金額が入力された際に、項目を赤く表示するように設定することが可能です。これにより、担当者の注意を促すことができます。同様に、「10,000円」を下回る金額が入力された際に、項目を緑で表示するように設定することも可能です。 条件付きスタイルの適用の設定はいくつでも指定可能です。設定の内容は、キャンバスルール内に表示されます。
キャンバスルールを作成するには
- キャンバスの設計画面で、要素を選択します。
[+]アイコンをクリックします。
- [キャンバスルールを作成する]をクリックします。
キャンバスルールの作成画面で、条件を指定します。
- [保存する]をクリックします。
キャンバスルールが作成されます。一覧から適用するルールにチェックを入れます。[適用する]をクリックします。
対象の要素の[スタイル]タブに、キャンバスルール名のサブタブが新しく追加されます。キャンバスルールの条件が満たされると、こちらで設定した内容が要素に適用されます。
メモ
- キャンバスルールは、対象のタブの複数のキャンバスページで再利用できます。キャンバスルールを管理するには、[設定]→[カスタマイズ]→[キャンバス]の順に移動します。[…]アイコンをクリックし、[キャンバスルールの管理]を選択します。こちらの画面から、キャンバスルールを編集/削除できます。
- また、[+ キャンバスルールを作成する]をクリックして、新しいキャンバスルールを作成することも可能です。
既存のキャンバスルールを適用するには
- キャンバスの設計画面で、要素を選択します。
- [+]アイコンをクリックします。
- キャンバスルールの画面で、一覧から対象のキャンバスルールにチェックを入れ、[適用する]をクリックします。
- 選択したキャンバスルールが要素に適用されます。サブタブとキャンバスルール名を選択すると、スタイルを変更できます。
スタイルの設定集への登録
キャンバス内の要素を右クリックすると、スタイルを設定集に登録できます。