カスタム画像をタイル アイコンとして使用する

はじめに

Smart Tiles の 5 つのアイコン セットは、イントラネットのほとんどのリンクに対応できますが、リンク先によっては独自の画像を使いたい場合もあります。たとえば、パートナー システムのロゴ、社内プロジェクトのブランド マーク、企業のスタイルで描かれたアイコンなどです。このような場合、Web パーツではアイコンの代わりに任意の画像を使用できます。この記事では、画像の割り当て方法、事前に準備しておくこと、画像の表示方法について説明します。

画像の割り当て

1. ページを編集モードで開き、タイルの … ボタンをクリックします。
2. Tile Icon（タイル アイコン）をポイントし、Custom image（カスタム画像）を選択します。Image（画像）ダイアログが開きます。
3. 次のいずれかの方法で画像を指定します。
   • Image URL（画像 URL）フィールドにアドレスを入力または貼り付けます。
   • フィールドの下の一覧でサイトのライブラリを参照します。ライブラリをクリックし、必要に応じてフォルダーを開いて、画像をクリックします。画像のアドレスがフィールドに入力されます。
4. Apply（適用）をクリックします。

画像は、すぐにタイルのアイコンと置き換わります。Tile Icon サブメニューでは、Custom image 項目にチェック マークが付きます。

Image URL フィールド

このフィールドには、https:// で始まる絶対アドレス、または / で始まるパス（例: /sites/intranet/SiteAssets/logos/sap.svg）を入力できます。それ以外の形式は拒否され、フィールドの下にメッセージが表示されて、Apply は無効のままになります。

サイト ライブラリの参照

フィールドの下の一覧には、まず現在のサイトのドキュメント ライブラリが表示されます。ライブラリをクリックすると、そのフォルダーと画像がサムネイルで表示されます。一覧の上のラベルには現在のパスが表示され、Back（戻る）で 1 つ上の階層に戻ります。一覧に表示されるのは画像ファイル（PNG、JPEG、GIF、SVG、WebP、BMP）のみです。画像もサブフォルダーもないフォルダーでは、No images in this folder と表示されます。

画像の準備

画像は、Web パーツの Icon size（アイコン サイズ）（20～64 ピクセル）で描画され、縦横比を保ったままその正方形に収まるように拡大縮小されます。きれいに表示するためのポイントは次のとおりです。

• 被写体が枠いっぱいに収まる正方形の画像を使用します。横長のロゴは、正方形に収めると小さくなります。
• 高解像度の画面でも鮮明に表示されるよう、SVG、または 128 × 128 ピクセル以上の PNG を使用することをお勧めします。
• 画像が白い枠ではなくタイルの色の上に表示されるよう、透明な背景を使用します。
• タイルの色との組み合わせを確認します。暗い色のロゴは、暗い色のタイルでは見えなくなります。

標準のアイコンとは異なり、カスタム画像にはタイルの Font Color（フォントの色）は適用されません。画像は元の色のまま表示されます。Web パーツの Shadow（影）設定は、アイコンと同様にカスタム画像にも適用されます。

画像の保存場所

サイトの Site Assets（サイト アセット）ライブラリが最適な保存場所です。サイトのすべての訪問者が読み取ることができ、サイトのバックアップや復元の際にも含まれます。タイルを表示するユーザーが画像を読み取れるのであれば、他のライブラリやサイトでも問題ありません。画像にアクセスできない訪問者には、アイコンがあるはずの場所が空白で表示されます。

画像の削除

アイコンに戻すには、Tile Icon サブメニューで任意のセットからアイコンを選択するか（これによりカスタム画像が削除されます）、Custom image をもう一度開き、ダイアログで Remove image（画像の削除）をクリックします。