【STEP 2】ページデザインをカスタマイズしよう

【1】サイトのデザインを確認しよう

サイトの編集画面（サイトエディタ）の右上にPCとスマホのボタンが表示されています。このボタンでサイトエディタの表示を、PCまたはスマホに切り替えられます。このSTEPでは、PCのデザインを編集していくので、PCのボタンを選択しましょう。

画面左側「サイトマップ」では、サイトのコーナーとページの一覧が表示されています。まずはTOPページの背景画像を変更するので、サイトマップからTOPページの歯車マークをクリックし、「プロパティ設定」を開いてみましょう。

「ページデザイン」の「背景画像」から、画像を変更したいエリアを選択します。ここでは、ビルボードエリアに背景画像が設定されているので、ビルボードの画像をクリックし、「画像ファイルを選択」をクリックしましょう。

画像フォルダが開くので、使いたい画像をアップロードしてみましょう。画像をお持ちではない場合は、画像配布サービスUnsplashから無料で画像が取得できます。イメージに合う画像を探し、オリジナルサイズで取得してみましょう。

ユーザフォルダから背景画像に設定したい画像を選択します。「適用」をクリックすると、背景画像が切り替わり、あなたのオリジナルのページになります。

ブログコーナー内のページも背景画像を変更します。２〜5と同様の手順で、ビルボードエリアの背景画像を変更しましょう。
※ブログ機能「BiNDpress」で使用するコーナーです。「template.list」「template.detail」は非公開の状態にしておきます。

テンプレートに入っている画像はサンプル画像のため、全てのページの背景画像を変更しましょう。残りはガイドコーナーの中にある「プライバシーポリシー」と、ページのテンプレートとなる「temp」です。サイトマップからページを選択し、２〜5と同様の手順で、ビルボードエリアの背景画像を変更しましょう。

PCでサイトを見た時のレイアウトが完成しました。
あなただけのオリジナルのサイトに一歩近づきましたね。
次はスマホ表示を整えて、さらに見やすいサイトにしていきましょう。

スクリーンショット：STEP2が完了した画面

PCサイトを編集したら、自動でスマホサイトにも反映されます。次のステップでスマホサイトの確認・編集方法をご紹介します。