---
title: "タイルの背景画像を設定する"
description: "Vitextra Smart Tiles Web パーツで、画像をタイルの背景として使用する方法を説明します。背景画像オプション、URL の入力またはサイト ライブラリからの画像の選択、画像のトリミングと拡大縮小、タイトルの視認性の確保、代替の背景色、YouTube のサムネイル、画像の削除について解説します。"
url: https://vitextra.com/ja/support/kb/10245
language: ja
published: 2026-10-13
modified: 2026-10-13
products:
  - "Smart Tiles"
author: "Vitālijs Kalniņš"
tags: ["タイル 背景画像", "SharePoint 写真付きタイル", "Smart Tiles 背景", "画像タイル ナビゲーション", "画像タイル SharePoint Online", "ドキュメント ライブラリからのタイル背景", "YouTube サムネイル タイル", "画像上の読みやすい文字", "Vitextra Smart Tiles", "ヒーロー タイル SharePoint"]
---

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

Vitextra Smart Tiles Web パーツで、画像をタイルの背景として使用する方法を説明します。背景画像オプション、URL の入力またはサイト ライブラリからの画像の選択、画像のトリミングと拡大縮小、タイトルの視認性の確保、代替の背景色、YouTube のサムネイル、画像の削除について解説します。

## はじめに

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

## 画像を設定する

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

![[Background Color] メニューの [Background image] 項目](https://static.vitextra.com/articles/10245/background-image-menu-ja.png)
*[Background Color] メニューの [Background image] 項目*

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

## 画像の表示方法

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

アイコン、タイトル、説明は、タイルの **Font Color**（フォントの色）で画像の上に描画されます。

![サイズの異なるタイルに表示された同じ画像](https://static.vitextra.com/articles/10245/image-crop-ja.png)
*サイズの異なるタイルに表示された同じ画像*

### 下に敷かれる色

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

📝 **注**  
**Background Color** メニューで色を選択すると、背景画像は削除されます。タイルの背景は画像か色のどちらか一方であり、両方になることはありません。画像の下に描画されていた色が、再び表示される背景になります。

## 文字の視認性を保つ

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

- タイトルを配置する場所に、空、壁、水面などの**落ち着いた領域**がある画像を選ぶか、そのような領域が中央に来るように画像をトリミングします。
- 暗い画像には**白い文字**、明るい画像には**黒い文字**を使用し、それに応じて **Font Color** を設定します。
- Web パーツの設定で **Shadow**（影）を有効にします。アイコンの下のドロップ シャドウにより、複雑な背景からアイコンが際立ちます。
- 画像だけで内容が伝わる画像タイルでは、**タイトル**を非表示にし、代わりに名前を **Description**（説明）に入力することを検討してください。名前はツールヒントに引き続き表示されます。

![フォントの色と画像の選択が視認性を左右する](https://static.vitextra.com/articles/10245/readability-ja.png)
*フォントの色と画像の選択が視認性を左右する*

## YouTube のサムネイル

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

## 画像の要件

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

❗ **重要**  
画像は、タイルに設定されたアドレスから訪問者のブラウザーによって読み込まれます。ページのすべての訪問者が読み取れるライブラリに画像を保存してください。同じサイトの **Site Assets**（サイトのアセット）が一般的な選択肢です。アクセス許可のない訪問者には、背景色だけが表示されます。

## 画像を削除する

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

💡 **ヒント**  
タイルとそのフォントに使用できる色については、[KB10043. Smart Tiles のタイルの色](https://vitextra.com/ja/support/kb/10043)を参照してください。