--- title: "カスタム画像をタイル アイコンとして使用する" description: "Vitextra Smart Tiles Web パーツで、タイルのアイコンを独自の画像に置き換える方法を説明します。Custom image オプション、画像 URL の入力またはサイトのドキュメント ライブラリからの画像の選択、画像の要件、サイズ、アイコンに戻すための画像の削除について解説します。" url: https://vitextra.com/ja/support/kb/10244 language: ja published: 2026-10-13 modified: 2026-10-13 author: "Lidija Reising" tags: ["カスタム タイル アイコン", "会社ロゴ タイル SharePoint", "アイコンの代わりに画像", "Smart Tiles カスタム画像", "ドキュメント ライブラリからのタイル アイコン", "SVG アイコン SharePoint タイル", "PNG アイコン Web パーツ", "Vitextra Smart Tiles", "SharePoint ナビゲーション ブランディング", "アイコン画像 URL"] --- # カスタム画像をタイル アイコンとして使用する Vitextra Smart Tiles Web パーツで、タイルのアイコンを独自の画像に置き換える方法を説明します。Custom image オプション、画像 URL の入力またはサイトのドキュメント ライブラリからの画像の選択、画像の要件、サイズ、アイコンに戻すための画像の削除について解説します。 ## はじめに [Smart Tiles](https://vitextra.com/ja/products/smart-tiles) の 5 つのアイコン セットは、イントラネットのほとんどのリンクに対応できますが、リンク先によっては独自の画像を使いたい場合もあります。たとえば、パートナー システムのロゴ、社内プロジェクトのブランド マーク、企業のスタイルで描かれたアイコンなどです。このような場合、Web パーツではアイコンの代わりに任意の画像を使用できます。この記事では、画像の割り当て方法、事前に準備しておくこと、画像の表示方法について説明します。 ## 画像の割り当て 1. ページを編集モードで開き、タイルの **…** ボタンをクリックします。 2. **Tile Icon**（タイル アイコン）をポイントし、**Custom image**（カスタム画像）を選択します。**Image**（画像）ダイアログが開きます。 3. 次のいずれかの方法で画像を指定します。 - **Image URL**（画像 URL）フィールドにアドレスを入力または貼り付けます。 - フィールドの下の一覧でサイトのライブラリを参照します。ライブラリをクリックし、必要に応じてフォルダーを開いて、画像をクリックします。画像のアドレスがフィールドに入力されます。 4. **Apply**（適用）をクリックします。 ![サイト アセット ライブラリから選択したロゴが表示された Image ダイアログ](https://static.vitextra.com/articles/10244/image-dialog-ja.png) *サイト アセット ライブラリから選択したロゴが表示された Image ダイアログ* 画像は、すぐにタイルのアイコンと置き換わります。**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* と表示されます。 📝 **注** 参照できるのは、現在のサイトのライブラリのみです。別のサイトに保存されている画像を使用するには、そのアドレスを **Image URL** フィールドに貼り付けてください。 ## 画像の準備 画像は、Web パーツの **Icon size**（アイコン サイズ）（20～64 ピクセル）で描画され、縦横比を保ったままその正方形に収まるように拡大縮小されます。きれいに表示するためのポイントは次のとおりです。 - 被写体が枠いっぱいに収まる**正方形の画像**を使用します。横長のロゴは、正方形に収めると小さくなります。 - 高解像度の画面でも鮮明に表示されるよう、**SVG**、または 128 × 128 ピクセル以上の PNG を使用することをお勧めします。 - 画像が白い枠ではなくタイルの色の上に表示されるよう、**透明な背景**を使用します。 - タイルの色との組み合わせを確認します。暗い色のロゴは、暗い色のタイルでは見えなくなります。 ![正方形で背景が透明な画像が最適です](https://static.vitextra.com/articles/10244/image-comparison-ja.png) *正方形で背景が透明な画像が最適です* 標準のアイコンとは異なり、カスタム画像にはタイルの **Font Color**（フォントの色）は適用されません。画像は元の色のまま表示されます。Web パーツの **Shadow**（影）設定は、アイコンと同様にカスタム画像にも適用されます。 ## 画像の保存場所 サイトの **Site Assets**（サイト アセット）ライブラリが最適な保存場所です。サイトのすべての訪問者が読み取ることができ、サイトのバックアップや復元の際にも含まれます。タイルを表示するユーザーが画像を読み取れるのであれば、他のライブラリやサイトでも問題ありません。画像にアクセスできない訪問者には、アイコンがあるはずの場所が空白で表示されます。 ❗ **重要** 画像は、訪問者のブラウザーによって、タイルに設定されたアドレスから直接読み込まれます。外部 Web サイト上の画像は HTTPS で提供されている必要があり、その Web サイトが埋め込みを禁止している場合、Web パーツで表示することはできません。 ## 画像の削除 アイコンに戻すには、**Tile Icon** サブメニューで任意のセットからアイコンを選択するか（これによりカスタム画像が削除されます）、**Custom image** をもう一度開き、ダイアログで **Remove image**（画像の削除）をクリックします。 💡 **ヒント** 同じ **Image** ダイアログは、タイルの背景にも使用されます。詳しくは、[KB10245. タイルの背景画像の設定](https://vitextra.com/ja/support/kb/10245)をご覧ください。アイコン セットについては、[KB10243. タイル用アイコンの選択](https://vitextra.com/ja/support/kb/10243)で説明しています。