Wix エディタ:画像を編集・カスタマイズする
読了時間:6分
サイトに表示する画像をカスタマイズして、訪問者の注目を集めましょう。Wix エディタには、画像のさまざまな部分をカスタマイズするための豊富な機能が含まれています。
この記事では、以下の項目について説明します:
画像のサイズを変更する
画像のサイズを変更して、サイト上で希望のサイズで表示されるようにします。
ヒント:
必要に応じ、画像はクロップすることもできます。
画像のサイズを変更する方法:
- 画像をクリックします。
- 画像の端にあるハンドルをドラッグして、希望のサイズに変更します。
注意:
画像の端にあるハンドルを使用してサイズを変更しても、画像の縦横比は維持されます。
![画像を選択して、端にあるハンドルをドラッグする様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/01/23/2133665c-f1f8-49a2-8cb4-fcc0fde215d1/03d79f5c-7ef3-4d25-bd4c-b90309ea81c2.png)
画像を回転させる
Wix エディタでは、マウスをドラッグして簡単に画像を回転させることができます。
画像を回転させる方法:
- 画像をクリックします。
- 画像左上の「回転」アイコン をクリックしたままの状態にします。
- ドラッグして画像を希望の角度まで回転させます。
![画像を反時計回りに回転させる様子を示した GIF。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/01/24/c0c49ab6-082f-4040-b640-0ded61cad76b/42db5f57-7600-4356-9be7-9aa557ecb4bc.gif)
ヒント:
メディアマネージャーに画像をアップロードすると、画像が自動的に回転することがあります。これは、デジタルカメラで撮影した画像に、画像の向きに関するメタデータが埋め込まれているためです。このような場合は、上記の手順で画像を元に戻すことができます。
画像がクリックされた際の動作を選択する
サイト訪問者が画像をクリックした際の動作を選択します。訪問者が指定したリンク先に移動するようにしたり、画像を部分的に拡大できるようにしたり、画像がポップアップウィンドウで表示されるようにしたりすることができます。
画像がクリックされた際の動作を選択する方法:
- 画像をクリックします。
- 「設定」アイコン をクリックします。
- 「クリック時の動作」ドロップダウンからオプションを選択します:
- なし:画像をクリックしても何も起こりません。
- リンク先を開く:画像をボタンとして機能させ、ページ、サイト内のセクションやアンカー、外部 URL、文書ファイルやメールアドレスなどにリンクさせます。「リンクを選択」をクリックして設定します。
- ポップアップで表示:画像がポップアップウィンドウで表示されます。画像は黒の背景にオリジナルのサイズで表示され、下部に画像の名前が表示されます。画像の名前を変更する方法はこちら
- 部分拡大(虫眼鏡):訪問者が画像にマウスオーバーすると、カーソルが虫眼鏡の形に変わります。クリックすると、画像を部分的に拡大表示することができます。
![「画像設定」パネルで、「クリック時の動作」のオプションがハイライトされている様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/01/23/d4a8e69c-cfc3-40d7-969a-71d244aa55fc/68062d33-6450-4fe1-95ba-c263c38f68c4.png)
画像にフィルターエフェクトを適用する
「ケネディ」、「ぼかし」、「オーカ」、「オーガニック」などの豊富な種類の中からフィルターを選択して、画像に独自のエフェクトをかけることができます。
画像にフィルターエフェクトを適用する方法:
- 画像をクリックします。
- 「フィルター」アイコン をクリックします。
- フィルターをクリックして画像に適用します。
![「フィルターを選択」パネルで、フィルターを選択した様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/01/24/21e3219f-5077-4df0-bd8b-6e50382957fd/4b5c58df-5b51-43d9-8e14-7686891b1fcd.png)
注意:
画像にフィルターを適用すると、「フィルター」アイコン
が緑色に変わります。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/01/30/bf65492a-a161-4708-a9dc-0bcf957bd184/84c459e8-4b85-4aa9-91d3-cbc3a54769c8.png)
パネルで「なし」を選択すると、画像をいつでも元に戻すことができます。
画像にフレームを追加・カスタマイズする
画像には、フレームを追加してカスタマイズすることができます。フレームは豊富なプリセットの中から選択でき、不透明度、色、影などを調整して、画像に適したデザインに仕上げることができます。
注意:
利用可能なカスタマイズオプションは、選択したフレームデザインによって異なります。
画像にフレームを追加・カスタマイズする方法:
- 画像をクリックします。
- 「デザイン」アイコン をクリックします。
- 好みのフレームデザインを選択します。
- (オプション)デザインをさらにカスタマイズします:
- 「デザインをカスタマイズ」をクリックします。
- 実行する内容を選択します:
- フレームプリセット:上部で新しいプリセットを選択します。これらのプリセットには、フレームをさらにカスタマイズするための、さまざまな形状やエフェクトが含まれています。
- 不透明度・色:フレームの色と不透明度を選択します。
- 枠線:フレームの枠線をデザインします。
- 角:フレームの角を丸くします。
- 影:フレームの影をデザインします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/01/30/263a7561-7979-44bf-af2f-4a28bef0e840/2c6d187b-fe50-411a-9e6b-ad4614b466db.png)
ヒント:
一部のフレームプリセットは、通常時とホバー時のデザインを個別に設定できるようになっています。それぞれのタブをクリックすると、各状態のデザインをカスタマイズすることができます。
画像にパーツを追加する
コンテナボックスを使用すると、画像にテキストパーツやその他のパーツを追加して、それらのパーツをまとめて移動させることができます。
画像にパーツを追加する方法:
- エディタ左側で「パーツを追加」 をクリックします。
- 「ボックス」をクリックし、追加するボックスを選択します。
- コンテナボックスをドラッグし、画像の上に重ねて配置します。
注意:コンテナボックスが、画像と同じサイズか、それ以上のサイズであることを確認してください。 - コンテナボックスを透明にします:
- 「デザインを編集」をクリックします。
- 「デザインをカスタマイズ」をクリックします。
- 「色・不透明度」をクリックし、「背景」スライダーを 0% までドラッグして、ボックスを完全に透明にします。
- 該当するパーツをコンテナボックスの上にドラッグして配置します。
ヒント:
透明なコンテナボックスの部分をドラッグすると、画像、コンテナボックス、パーツをまとめて移動させることができます。
![画像にコンテナボックスを重ね、そこにテキストパーツを配置して、それらのパーツをまとめて移動させる様子を示した GIF。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/01/24/7f29c833-0d24-4085-b139-6d7fbbfab09d/d4c388d3-3d66-4b5f-a9d9-3743c521228b.gif)
よくある質問
詳細については、以下の質問をクリックしてください。
画像に変更を加えるとメディアマネージャー内の画像にも影響しますか?
サイトに表示される画像に問題が発生している場合はどうすればよいですか?