サイトの入口となるトップページを作成しながら、外観を整えます。
まずは基本的な4つの要素を設定していきましょう。
会社ロゴ、サイトアイコンは画像が必要となりますので、あらかじめご用意ください。
＜使用画像の推奨サイズ＞
会社ロゴ：幅240ピクセル以上、余白なし
※高さは厳密には問いませんが、幅240ピクセルのときに50px以上あると収まりが良いです。
サイトアイコン：512×512ピクセル以上、余白なし
実際の表示イメージ
これらは、これから作成するサイトのどこに表示されるものでしょうか？下図から確認してみましょう。
①会社ロゴ
自社のシンボルとなる画像です。
②キャッチフレーズ
自社を表す一言です。会社ロゴとともに、自社ブランドを認知してもらう上で重要な要素です。
③サイトタイトル
サイトを開いたとき、タブに表示される文字です。社名を入れるのが一般的です。
（タブにはこのサイトタイトルのほか、②のキャッチフレーズも表示されます）
④サイトアイコン
サイトを開いたとき、またブックマークされたときに、タイトルとともに表示されるアイコンです。
見た目で占める場所は小さいですが、サイトの基本となる重要な要素です。
設定手順
準備
①管理画面の左側のメニュー「サイト設定」から設定していきます。「サイト設定」にカーソルを合わせると、いくつかのメニューが表示されるので「デザインエディタ」をクリックします。
②デザインエディタの画面が新しく開きました。左側のメニューから「サイト基本情報」をクリックします。
③会社ロゴ、キャッチフレーズ、サイトタイトル、サイトアイコンはすべてこの中で設定します。画面右側がプレビューになっているので、見た目を確認しながら作業できます。
ここで編集した内容をサイトに公開したいときは、画面上部の「公開」ボタンをクリックします。
以下から、それぞれの編集方法を見ていきましょう。
サイトタイトル、キャッチフレーズ
「サイト基本情報」の中に、それぞれ入力する箇所があります。画面に沿って入力します。
会社ロゴ
①今はテスト用の画像が設定されているので「ロゴを変更」ボタンをクリックします。
②現在サイト内で使用できる画像の一覧（メディアライブラリ）が開くので、ロゴに指定したい画像を選択します。
まだ一覧にない場合は、画像をアップロードします。
.
「ファイルをアップロード」タブをクリックした後、追加したい画像をドラッグアンドドロップで画面に移動させます。
または「ファイルを選択」ボタンをクリックして、追加したい画像を選択します。
そのままアップロードが始まり、メディアライブラリに画像が追加されます。
既に使用したい画像がある、または画像のアップロードが終わったら「メディアライブラリ」で、ロゴに使用したい画像を選びます。選択した画像は、画面右側に詳細が表示されます。
画面右下の「選択」ボタンで決定します。
代替テキストは、サイト訪問者の通信状況などなんらかの事情で画像が表示されない時、代わりに表示されるテキストです。
空欄でも運用に問題はありませんが「社名ロゴ」など、簡単なテキストを入れておくとサイト訪問者には親切です。
③画像を切り抜いて使用するかと決めます。
そのまま使う場合は、右下のボタンから「切り抜かない」をクリックします。切り抜きたい場合は、切り抜く範囲を決めて「画像切り抜き」をクリックします。
④ロゴ画像が仮決定されました。
（！）この時点ではまだ実際のサイトに反映されていないのでご注意ください。実際のサイトに公開するには、画面上部の「公開」ボタンをクリックします。
※プレビューで確認して画像の大きさが希望通りでない場合は、画像編集で対応できます。詳しくはこちら。
サイトアイコン
①サイトアイコンを設定します。
画面の説明にもある通り、使用する画像サイズは 512×512 ピクセル以上が望ましいです。
「サイト基本情報」の下部から「サイトアイコンを選択」をクリックします。
②画像の選択、決定方法はさきほどの会社ロゴと同じです。使用したい画像をアップロード、選択したら画面右下の「選択」ボタンをクリックします。
今回「代替テキスト」の設定は不要です。
③サイトアイコンが仮決定されました。
これまでの設定内容で問題なければ、画面上部の「公開」ボタンをクリックします。
これで実際のサイトに、会社ロゴ、キャッチフレーズ、サイトタイトル、サイトアイコンが反映されました。
