【STEP 5】画像を差し替えよう

画像を変えて個性を出しましょう

STEP2では、ビルボードエリアの背景画像を変更しましたね。
サイト内には、ほかにもブロックの背景画像や、ブロック内に挿入されている画像があります。
それぞれの画像をあなたの好きなものに差し替えることで、
サイト全体がぐっとあなたらしい雰囲気になります。
テンプレートに入っている画像はサンプル画像のため、ブロックごとに背景画像と埋め込み画像を変更しましょう。

[1]ブロックの背景画像を変更してみよう

スクリーンショット:サイトシアター上部、ページ編集ボタン

【1-1】編集モードに切り替えよう

まずはサイトを編集する準備をしましょう。サイトマップから編集したいページを選び、画面上部の「ページ編集」ボタンをクリックして編集モードに切り替えます。


スクリーンショット:ブロックエディタ編集ボタン

【1-2】ブロックエディタを開いてみよう

最初に、ブロックの背景に設定されている画像を変更してみましょう。このテンプレートでは、メインエリアの上から2つ目のブロックに背景画像が設定されています。ブロックの鉛筆マークをクリックして、ブロックエディタを開きます。


スクリーンショット:ブロックエディタ上部「ブロック設定」タブ

【1-3】ブロック設定タブを開こう

ブロックエディタには、内容を編集する「編集」タブと、背景やレイアウトを調整できる「ブロック設定」タブがあります。今回は背景画像を変更するので、「ブロック設定」タブをクリックしましょう。


スクリーンショット:ブロック設定タブの背景画像

【1-4】ブロックの背景画像を変更しよう

ブロックエディタ右側の背景画像に設定されている画像をクリックします。「ファイルを選択」をクリックすると、画像フォルダが開くので、使いたい画像をアップロードしてみましょう。画像をお持ちではない場合は、画像配布サービス
Unsplashから無料で画像が取得できます。イメージに合う画像を探し、オリジナルサイズで取得してみましょう。


スクリーンショット:ブロックエディタの適用ボタン

【1-5】編集内容を保存しよう

背景画像を変更したら、ブロックエディタ右下の「適用」ボタンをクリックし、編集内容を保存しましょう。保存された内容は、すぐにサイトエディタに反映されます。
このテンプレートでは、メインブロックの上から3番目・4番目のブロックにも背景画像が設定されています。各ブロックの鉛筆マークをクリックし、これまでの手順で、ブロックの背景画像を変更しましょう。

[2]ブロックの埋め込み画像を変更してみよう

スクリーンショット:画像が挿入されているブロック

【2-1】ブロック内の画像を変更してみよう

次に、ブロック内に挿入された画像を変更しましょう。
TOPページでは、メインエリアの下から4番目のブロック内に、画像が挿入されています。ブロックの鉛筆マークをクリックし、ブロックエディタを開きましょう。


スクリーンショット:ブロックエディタの編集タブ

【2-2】ブロック編集タブを開こう

ブロック内に挿入された画像は、ブロックエディタの「編集」タブから変更ができます。「編集」タブをクリックし、編集画面を表示しましょう。


スクリーンショット:ブロックエディタ。画像変更ボタン。

【2-3】ブロック内に挿入された画像を変更しよう

ブロックエディタ内の変更したい画像をクリックすると、ブロックエディタの右側に、画像の設定欄が表示されます。「画像変更」ボタンから画像を変更してみましょう。画像の変更が完了したら、適用をクリックし、編集内容を保存しましょう。

STEP5が完了しました

画像の変更、お疲れ様でした。
これですべての編集が完了し、あなただけのオリジナルサイトが出来上がりました。
次はいよいよ作成したサイトを公開してみましょう。

スクリーンショット:画像変更後のサイトエディタ

サイト公開ボタンと公開後のサイト

サイトを公開しよう

さっそく作成したサイトを公開してみましょう。次のステップでは、サーバーの設定方法から、サイトの公開方法まで、分かりやすく解説していきます。

次のステップを実践する

関連リンク