今回は、初めてSTUDIOを使う方に向けて、画像を差し替える方法をご紹介します。
操作の流れがイメージしやすいように、スクリーンショットを多めに使って解説していますので、ぜひ参考にしてください。
※本記事ではSTUDIOを初めて使う方にも分かりやすいよう、ログイン時から順番に説明しています。
※本記事では操作説明のため、STUDIO公式の無料テンプレートを使用しています。
ログインをして編集画面を開く
まず、Google ChromeでSTUDIOにログインします。
ログインすると、「プロジェクト一覧」が表示されます。
プロジェクトを選び「Design Editor」をクリック
画像を差し替えたいプロジェクトにカーソルを合わせると、「Design Editor」という文字が表示されるのでクリックしてください。
ページが編集画面として表示
ページが編集画面として表示されます。
差し替えたい画像を選択する
差し替えたい画像の上を数回クリックして選択
差し替えたい画像の上を「Box」「Img」と表示されるまで、数回クリックし「青い枠で囲まれた状態」 にしてください。
この状態になると、画像が選択されています。
右側の矢印をクリック
選択できたら、右側の矢印（上の画像を参考）をクリックしてください。
右側にパネルが表示されます。
右のパネル内の「画像」エリア をクリック
右にあるパネル内の 「画像」エリア（上の画像の右にある赤い四角） をクリックすると、左側にパネルが表示され、画像をアップロードできる画面が開きます。
画像を差し替える
以下の３つのケースごとにご紹介します。
・新しい画像をアップロードする場合
・すでにアップロード済みの画像に差し替える場合
・STUDIO内の素材を利用する場合
新しい画像をアップロードする場合
左パネル内の「アップロード」をクリックします。
新しい画像をアップロードする方法は以下のいずれかです。
・PCに保存してある画像をドラッグ＆ドロップする
・「アセット」の隣にある「➕」マークをクリックし、「ファイルをアップロード」を選ぶ
いずれかの方法で新しい画像を追加してください。
すでに使用している画像に差し替える場合
左パネルの「アップロード」をクリックすると、検索窓の下にアップロード済みの画像が一覧で表示されます。
その中から差し替えたい画像を選択してください。
STUDIO内の素材を利用する場合
左パネルの「Unsplash」を選択し、検索窓に使用したい画像のキーワードを入力してEnter キーを押してください。
使用したい画像をクリックすると、差し替えが完了します。
保存と公開
STUDIOの保存は
STUDIOは編集内容を自動保存するので保存操作は不要です。
STUDIOの公開は
サイトに反映するには 右上の「公開」ボタン をクリックします。
以上で画像の変更は完了です！
実際に公開サイトを表示して、変更が反映されているか確認してみましょう。
