Editor X：画像を編集・カスタマイズする
読了時間：8分
Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について
サイトに画像を追加すると、さまざまなオプションを使用してカスタマイズや編集をすることができます。画像サイズを調整、クロップ、焦点を設定して、画面サイズに関係なく、関連する領域が常に表示されるようにします。
また、Editor X では、スクロールの動作や焦点を変更することで各画像の動作を制御し、プロフェッショナルで洗練されたサイトをシームレスにデザインすることができます。
この記事では、下記の項目について説明します：
画像サイズを調整する
要素設定パネルを使用して、画像のサイズを簡単に調整できます。
デザインに合わせて固定またはフルード単位から選択できます。固定画像は各ビューポートで同じままで、フルード画像はレスポンシブで、異なるブレイクポイントに適応します。
画像サイズを調整する方法：
- エディタで画像をクリックします。
- 右上で「要素設定パネル」アイコン
をクリックします。 - 「サイズ」下で「フルード」または「固定」を選択します。
- 固定：パーツの幅と高さを px で設定します。
- フルード：相対的な測定単位を使用して（％ または 自動）パーツの幅を定義します。
ヒント：「比例してスケーリング」チェックボックスを選択すると、幅に合わせて高さが自動的に調整されます。
注意：
グリッドセル、コンテナ、またはセクションいっぱいにストレッチされた画像のサイズを調整することはできません。ストレッチされた画像の高さと幅は、親パーツのサイズに応じて自動的にサイズ変更されるように、自動に設定されています。
セクション、コンテナ、またはグリッドセルいっぱいに画像を引き延ばす
ストレッチツールを使用すると、サイトのセクション、コンテナ、またはグリッドセルを埋めるように画像を簡単に設定できます。画像をストレッチさせると、親パーツのサイズに合わせて自動的にサイズが変更されるため、手動でサイズを調整する必要はありません。
画像を追加して引き延ばす方法：
- エディタトップバーで「追加」をクリックします。
- 「メディア」をクリックします。
- セクションに画像をドラッグします。
- 画像右上の「ストレッチ」アイコン
をクリックして、スペース全体を埋めます。
ヒント：
画像をセクションいっぱいに引き延ばす場合、背景色が最初に読み込まれ、次に画像が読み込まれます。ほとんどの場合、画像の読み込み速度は速いため、色はまったく表示されませんが、一部の訪問者には色が点滅して表示されることがあります。そのため、常に見えるわけではないにしても、セクションの背景色を設定することが重要です。
ヒント：
要素設定パネルから色やパターンのオーバーレイを追加することで、セクションの背景に画像を設定することができます。
画像のフィットモードを選択する
Editor X では、すべての画像にレスポンシブコンテナのように機能するバウンディングボックスがあります。これらは、画像の周りに表示される青い枠で表されます。バウンディングボックス内での画像の表示方法を選択することができます（例： 拡大、フィットなど）。
画像のフィットモードを選択する方法：
- エディタ内で画像をクリックします。
- 「設定」アイコン
をクリックします。
- 「表示モード」ドロップダウンからオプションを選択します：
バウンディングボックス内で拡大
バウンディングボックスにフィット
画像の比率を維持
ブレイクポイントを操作する場合：
画像に選択した表示モードは、すべてのブレイクポイントに適用されます。
画像をクロップする
Editor X では、ブレイクポイントごとに画像のクロップ（切り抜き）方法を選択できます。これにより、仕様に合わせてサイトをさらにカスタマイズできるだけでなく、すべてのデバイスの訪問者に理想的な体験を提供できます。
画像をクロップする方法：
- カスタマイズする画像のブレイクポイントを選択します。
- エディタで画像をクリックします。
- 「クロップ」アイコン
をクリックします。
- ニーズに合わせてクロップをカスタマイズします。
- 「適用」をクリックします。
画像の焦点を設定する
各ブレイクポイントごとに画像の焦点を選択できます。これにより、異なる画面サイズの異なるブレイクポイントに対して画像のサイズが変更された際に、画像のどの部分を表示するかを選択できます。
画像の焦点を設定する方法：
- カスタマイズする画像のブレイクポイントを選択します。
- エディタで画像をクリックします。
- 「焦点」アイコン
をクリックします。
- サイズ変更時に表示したい画像の範囲を選択します。
ヒント：
主な顔が検出されると、自動的に画像の焦点として設定されます。必要に応じて焦点を変更または調整できます。
スクロールの動作を変更する
訪問者がサイトをスクロールしたときの画像の動作を選択します。
スクロール効果（パララックスまたはリヴィール）を選択して、画像をよりダイナミックで注目を集めるようにするか、ドロップダウンを空白のままにして、より直接的でミニマルな外観にすることができます。
画像にスクロール効果を選択する方法：
- エディタで画像をクリックします。
- 「設定」アイコン
- 「スクロールの動作」ドロップダウンをクリックし、オプションを選択します：
- なし：画像にスクロール効果はありません。
- パララックス：画像は他のパーツと異なる速度で移動することで、3D 効果を与えます。
- リヴィール：サイトを下にスクロールすると画像が表示されます。
パララックスで画像がズームインして表示される場合：
パララックススクロールの動作を選択すると、エディタ内で画像がズームインして表示される可能性があります。この変更は、サイト訪問者に表示される内容を反映している訳ではありません。この効果を確認するには、サイトをプレビューしてください。
ヒント：
位置を固定またはスティッキーに設定することで、訪問者がページを上下にスクロールしても画像が表示されるようにすることができます。
Wix フォトスタジオで画像を編集する
Wix フォトスタジオを使用して、Editor X を離れることなく美しい画像を作成しましょう。フォトスタジオでは、すでにアップロードした画像をカスタマイズし、新しく編集したバージョンをメディアマネージャーに保存することができます。
フィルター、回転、オーバーレイなど、さまざまな編集オプションが用意されているので、印象的な画像を作成してサイトを際立たせ、訪問者の興味を引くことができます。
画像を編集する方法：
- エディタで画像をクリックします。
- 「設定」アイコン
- 「調整」をクリックします。
- （フォトスタジオで）利用可能なオプションを使用して画像を編集します。
- 「保存」をクリックします。
メディアマネージャーの場合：
サムネイル画像下の「クロップ・編集」をクリックして、メディアマネージャーから直接画像を編集することもできます。
注意：
Wix フォトスタジオは画像ソースに変更を加えますが、キャンバス（画像デザインまたはクロップ）に加えた変更は、ブレイクポイントごとに変更されます。
著作権保護のためにウォーターマークを追加する
フォトスタジオでウォーターマークテキストを追加して画像を保護しましょう。テキストはブランドに合わせてデザイン・カスタマイズが可能で、ダウンロードしてもファイルから削除することはできません。
画像にウォーターマークを追加する方法：
- エディタで画像をクリックします。
- 「設定」アイコン
- 「調整」をクリックします。
- （フォトスタジオで）「パーツを追加」下で「テキスト」をクリックします。
- テキストスタイルを参照し、クリックして画像に追加します。
- ウォーターマークのメッセージを入力します。
- （オプション）「デザイン」をクリックしてテキストをカスタマイズし、「保存」をクリックします。
お役に立ちましたか？
|