サイト全体で共通する部分のデザインを設定します。
たくさんの項目がありますが、ここでは重要な項目のみ設定していきます。
STEP1：WordPressのメニューから外観＞カスタマイズを選択
下のような画面が表示されます。
- 左端に並んでいるのが外観カスタマイズのメニューで、右側にプレビューが表示されます。
- 設定を変更するたびに右側のプレビューに反映されるので表示を確認しながら変更ができます。
- 変更する項目は左側のメニューから選ぶほか、プレビュー画面上の編集ボタン（鉛筆のアイコン）をクリックして選ぶこともできます。
- 変更内容は画面左上の
を押すまで実際のサイトには反映されません。
- 画面左下の
ボタンで、プレビュー画面のサイズを切り替えできます。
※ プレビュー画面では一部のアイコンが□として表示されますので、該当部分は公開後のサイトでご確認ください。
STEP2：ロゴの設定
左側のメニューから「Lightning デザイン設定」をクリックするか、プレビュー画面ロゴ付近の編集ボタンをクリックします。
【 ロゴ画像がない場合 】
「ヘッダーロゴ画像」欄の削除ボタンを押すと、プレビュー画面のロゴ画像部分がサイト名のテキストに変わります。
表示が変わったことを確認し、「＜」の戻るボタンを押してください。
※ すぐ上の「×」は外観カスタマイズ終了のボタンです。作業を続ける場合は「＜」ボタンを使用してください。
【ロゴ画像がある場合】
「画像を変更」をクリックするとファイル選択画面が開きます。
番号順にクリックし、画像ファイルをアップロードすると画像ファイル一覧が表示されます。
設定したい画像の右上にチェックがついていることを確認し「画像を選択」ボタンをクリックします。
プレビュー画面にロゴ画像が反映されますので、表示を確認して「＜」の戻るボタンを押してください。
※ すぐ上の「×」は外観カスタマイズ終了のボタンです。作業を続ける場合は「＜」ボタンを使用してください。
STEP3：スライドショーの設定
左側のメニューから「Lightning トップページスライドショー」をクリックするか、プレビュー画面のスライドショー上の編集ボタンをクリックします。
まずスライドショー全体の設定をします。
スライドが不要な場合は「表示設定」で「スライドを非表示にする」を選択してください。
この場合、ほかの設定は不要ですので戻るボタンを押してSTEP4へ進んでください。
次にそれぞれのスライドの設定をします。
いろいろな設定ができますが、必須項目はスライド画像のみです。
最初にスライド画像欄の「画像を変更」ボタンを押し、画像を選択してください。
そのあと、プレビュー画面で画像とのバランスを見ながら文字やボタンを調整します。
- 不要な項目は空欄にすることで表示されなくなります
- PCとスマホで同じ画像を使用したい場合は、「モバイル用スライド画像」（任意）を削除してください。
- スライド枚数を減らしたい場合は、スライド画像欄の削除ボタンで画像の設定を解除してください。
- スライドを1枚だけ設定した場合は停止した状態で表示されます。
すべてのスライドを設定し終えたら戻るボタンを押して、外観カスタマイズのトップページへ戻ります。
STEP4：サイトアイコン（ファビコン）の設定
ファビコンはブラウザのタブやブックマーク、検索結果などで使用されるアイコンです。
※ サイトアイコン用の画像が準備できていない場合はSTEP5へお進みください。
外観カスタマイズメニューの「サイト基本情報」をクリックします。
「サイトアイコンを選択」をクリックし、画像を選択します。
そのまま利用する場合は「切り抜かない」ボタンをクリックしてください。
選択した画像の切り抜き設定画面が表示されますので、点線の枠を使用したい位置・サイズに変更し、「画像切り抜き」をクリックします。
設定した画像がブラウザのタブに表示されたことを確認し、戻るボタンで外観カスタマイズのトップページへ戻ります。
STEP5：色設定
外観カスタマイズメニューの「色」をクリックします。
「背景色」はサイト全体の背景色、キーカラーは見出しのラインやボタンなどアクセントになる部分に設定されます。（下の画像はキーカラーを赤に設定した例）
「色を選択」をクリックすると色選択ブロックが表示されます。
①でおおまかな色を選ぶと、②と③の色も変わります。
②の丸や③の四角い枠を動かして好みの色を選択して下さい。
※「カラーパレット設定」は投稿（記事）を書くときに文字色や背景でよく使いそうな色を登録しておける機能です。使用できる場所が限られるため、ここでは設定を省略します。
プレビュー画面の見出しやボタンに色が反映されたことを確認し、戻るボタンで外観カスタマイズのトップページへ戻ります。
STEP6：デフォルトサムネイル設定
新着情報一覧で、アイキャッチ画像が設定されていない場合に表示される画像です。
※ 変更する必要がない場合はSTEP7へお進みください。
外観カスタマイズメニューのExUnit設定＞デフォルトサムネイル設定を開きます。
画像を変更ボタンか画像部分をクリックすると、アップロード済みの画像一覧が開きますので、サイトアイコンと同様に画像をアップロードまたは選択し、画像を選択ボタンをクリックしてください。
選択した画像が表示されていることを確認し、戻るボタンを2度クリックして外観カスタマイズのトップページへ戻ります。
STEP7：画面左上の「公開」ボタンをクリック
ここまでの変更が保存され、サイトに反映されます。
ます。
※ フッターのロゴやSNSボタンの編集が残っていますが、この2つはトップページの編集の際にあわせて作業します。
以上で外観のカスタマイズは終了です。