対象プラン：全プラン

画像ボックスの特徴と基本操作

画像ボックスは、ページ上に画像を配置する際に使用するボックスです。

この記事では、画像ボックスの特徴と画像ボックスの配置・画像の変更・画像のURL指定方法について解説します。

画像ボックスの特徴

画像やPDFをアップロードし、エディタ上で使用することができます。加えて、高品質な無料の写真リソースサイト「Unsplash」の画像が利用できます。

画像アップロード・管理方法などについて詳しくは、以下をご覧ください。

Studioの画像ボックスには、「Boxモード」と「Imgモード」があります。モードによって画像の扱い方や設定可能な機能が異なります。

Boxモードでは、画像を背景として扱います。背景画像としての利用や、画像に効果を加えたい場合に適しています。

Imgモードでは、画像を独立した要素として扱います。

画像の縦横比を維持したい場合やアクセシビリティを考慮してAlt（代替えテキスト）を設定したい場合に適しています。

Boxモードの画像は、エディタ上で画像の加工が可能です。具体的には、下記が設定できます。詳細は、画像のスタイルメニューをご覧ください。

URLを指定して、外部サーバーやサービスにアップロードしている画像をが表示できます。

Imgモードの画像ボックスには、Alt（代替えテキスト）が設定できます。

Altを設定することで、画像の内容を検索エンジンやサイトの読み上げ機能に伝えることができます。SEOの観点からもこの情報を設定することは非常に重要です。詳しくは、画像のalt設定をご覧ください。

空の画像ボックス、またはアップロード済みの画像・フリー画像が配置できます。

エディタ画面左側の画像ボックスをドラッグ＆ドロップで配置します。

[追加パネル]内のボックスメニューからも追加可能です。

画像のアップロード方法とUnsplashの利用方法については以下をご覧ください。

ページ上とレイヤーパネルの2箇所から変更できます。

Tips：CMSやリストで管理する画像は、変更方法が異なります。詳しくは、9.【基本編】テンプレートの編集方法 > テキストや画像を差し替えるをご覧ください。

画像ボックスが重ね順の関係などで直接ダブルクリックできない場合、レイヤーパネルから変更します。

image picture

イメージ 写真 素材