はじめに
Smart Tiles の 5 つのアイコン セットは、イントラネットのほとんどのリンクに対応できますが、リンク先によっては独自の画像を使いたい場合もあります。たとえば、パートナー システムのロゴ、社内プロジェクトのブランド マーク、企業のスタイルで描かれたアイコンなどです。このような場合、Web パーツではアイコンの代わりに任意の画像を使用できます。この記事では、画像の割り当て方法、事前に準備しておくこと、画像の表示方法について説明します。
画像の割り当て
- ページを編集モードで開き、タイルの … ボタンをクリックします。
- タイル アイコンをポイントし、カスタム画像を選択します。画像ダイアログが開きます。
- 次のいずれかの方法で画像を指定します。
- 画像の URLフィールドにアドレスを入力または貼り付けます。
- フィールドの下の一覧でサイトのライブラリを参照します。ライブラリをクリックし、必要に応じてフォルダーを開いて、画像をクリックします。画像のアドレスがフィールドに入力されます。
- 適用をクリックします。
画像は、すぐにタイルのアイコンと置き換わります。タイル アイコン サブメニューでは、カスタム画像 項目にチェック マークが付きます。
画像の URL フィールド
このフィールドには、https:// で始まる絶対アドレス、または / で始まるパス（例: /sites/intranet/SiteAssets/logos/sap.svg）を入力できます。それ以外の形式は拒否され、フィールドの下にメッセージが表示されて、適用 は無効のままになります。
サイト ライブラリの参照
フィールドの下の一覧には、まず現在のサイトのドキュメント ライブラリが表示されます。ライブラリをクリックすると、そのフォルダーと画像がサムネイルで表示されます。一覧の上のラベルには現在のパスが表示され、そのパス内の親フォルダーのリンクをクリックすると、そのフォルダーに戻ります。一覧に表示されるのは画像ファイル（PNG、JPEG、GIF、SVG、WebP、BMP）のみです。画像もサブフォルダーもないフォルダーでは、このフォルダーに画像はありません と表示されます。
📝 注
参照できるのは、現在のサイトのライブラリのみです。別のサイトに保存されている画像を使用するには、そのアドレスを 画像の URL フィールドに貼り付けてください。
画像の準備
画像は、Web パーツの アイコンのサイズ（20～64 ピクセル）で描画され、縦横比を保ったままその正方形に収まるように拡大縮小されます。きれいに表示するためのポイントは次のとおりです。
- 被写体が枠いっぱいに収まる正方形の画像を使用します。横長のロゴは、正方形に収めると小さくなります。
- 高解像度の画面でも鮮明に表示されるよう、SVG、または 128 × 128 ピクセル以上の PNG を使用することをお勧めします。
- 画像が白い枠ではなくタイルの色の上に表示されるよう、透明な背景を使用します。
- タイルの色との組み合わせを確認します。暗い色のロゴは、暗い色のタイルでは見えなくなります。
標準のアイコンとは異なり、カスタム画像にはタイルの フォントの色は適用されません。画像は元の色のまま表示されます。Web パーツの 影設定は、アイコンと同様にカスタム画像にも適用されます。
画像の保存場所
サイトの Site Assets（サイト アセット）ライブラリが最適な保存場所です。サイトの訪問者がライブラリと画像を読み取れることを確認してください。タイルを表示するユーザーが画像を読み取れるのであれば、他のライブラリやサイトでも問題ありません。画像にアクセスできない訪問者には、アイコンがあるはずの場所が空白で表示されます。
❗ 重要
画像は、訪問者のブラウザーによって、タイルに設定されたアドレスから直接読み込まれます。外部 Web サイト上の画像は HTTPS で提供されている必要があり、その Web サイトが埋め込みを禁止している場合、Web パーツで表示することはできません。
画像の削除
アイコンに戻すには、タイル アイコン サブメニューで任意のセットからアイコンを選択するか（これによりカスタム画像が削除されます）、カスタム画像 をもう一度開き、ダイアログで 画像の削除をクリックします。
💡 ヒント
同じ 画像 ダイアログは、タイルの背景にも使用されます。詳しくは、KB10245. タイルの背景画像を設定するをご覧ください。アイコン セットについては、KB10243. タイルのアイコンを選ぶ: 標準、ファイルの種類、アプリ、Azure、Vitextra のアイコン セットで説明しています。
