タイルの背景画像を設定する

はじめに

アイコン付きの単色のタイルは明快でコンパクトですが、写真を使ったタイルは人を惹きつけます。Smart Tiles では、どのタイルにも単色の代わりに背景画像を設定できます。たとえば、アクセス案内 にはオフィスの画像、新製品の紹介ページには製品写真、部門サイトにはチームの写真を使用できます。この記事では、画像の設定方法、画像の表示のされ方、そしてタイルの視認性を保つ方法について説明します。

画像を設定する

1. ページを編集モードで開き、タイルの … ボタンをクリックします。
2. 背景色をポイントし、サブメニューの最初の項目である 背景画像を選択します。
3. 画像ダイアログで、画像の URLフィールドに画像のアドレスを入力または貼り付けるか、サイトのライブラリを参照して画像をクリックします。
4. 適用をクリックします。

画像 ダイアログは、カスタム アイコン画像で使用するものと同じです。画像の URL フィールドには、https:// で始まるアドレス、または / で始まるパスを入力できます。その下の一覧では、現在のサイトのドキュメント ライブラリをフォルダーごとに参照でき、画像がサムネイルで表示されます。このダイアログの詳細については、KB10244. カスタム画像をタイル アイコンとして使用するを参照してください。

画像の表示方法

画像はタイル全体に表示されます。タイルを完全に覆うように拡大縮小されて中央に配置され、収まらない部分は端で切り取られます。タイルの縦横比は維持されます。幅はタイルの サイズで、高さはコンテンツと 内側のインデントで決まるため、同じ画像でも、小のタイルと 全幅のタイルでは切り取られ方が異なります。

タイトル、説明、標準アイコンは、タイルの フォントの色 で画像の上に表示されます。他のアイコン セットとカスタム画像は元の色を保持します。

下に敷かれる色

画像を設定しても、タイルの背景色はなくなりません。背景色は画像の下に描画され、画像の読み込み中、PNG の透明な領域、そして画像をまったく読み込めない場合に透けて見えます。読み込み中のタイルが別の色で点滅しないように、画像全体のトーンに近い色を選択してください。

文字の視認性を保つ

写真の上の文字は、写真との間のコントラストの分だけ読みやすくなります。次のような工夫が役立ちます。

• タイトルを配置する場所に、空、壁、水面などの落ち着いた領域がある画像を選ぶか、そのような領域が中央に来るように画像をトリミングします。
• 暗い画像には白い文字、明るい画像には黒い文字を使用し、それに応じて フォントの色 を設定します。
• Web パーツの設定で 影を有効にします。アイコンの下のドロップ シャドウにより、複雑な背景からアイコンが際立ちます。
• すべてのタイルで画像とアイコンだけを表示するには、Web パーツの設定でタイトルと説明を非表示にします。テキストはツールヒントに残ります。

YouTube のサムネイル

タイルのリンクが YouTube の動画を指している場合、背景色 メニューの 背景画像 の上に、もう 1 つ 縮小表示（サムネイル）という項目が追加されます。この項目を選択すると、タイルに画像のアドレスを保存せずに、動画のプレビュー画像が背景として使用されます。公開されたページでは、サムネイルのタイルには再生ボタンだけが表示され、タイトルと説明はツールヒントに残ります。

画像の要件

• アドレスは https:// を使用するか、現在のテナント内のパスである必要があります。訪問者には画像に対する読み取りアクセス許可が必要です。
• ファイル サイズは適度に小さく保ってください。長辺が 1200 ピクセルで、JPEG または WebP 形式で保存された写真であれば 全幅 のタイルには十分で、パネルを使用するすべてのページで高速に読み込まれます。
• 背景が透明な画像では、透明な領域からタイルの色が透けて見えるため、透かしのようなデザインに利用できます。

画像を削除する

背景色 メニューで色を選択するか、もう一度 背景画像 を開き、ダイアログで 画像の削除をクリックします。タイルは背景色に戻ります。

製品の詳細: https://vitextra.com/ja/products/smart-tiles