【第3章】制作環境をつくる②
テーマをインストール
※画像は、クリックすると大きくなるので参考にしながら作成してください。
・ダッシュボードを開いて、左のサイドバーから『外観』→『テーマ』を選択します。
・テーマのページを開いたら、左上にある『テーマを追加』をクリック。
・右上の『テーマを検索』から“Astra”を検索。(動画では、同ページに既出)
・『Astra』(青紫の背景が特徴的なキャプチャー)をクリックし、次のページ左上にある『インストール』をクリックし、インストールが終わるとボタンが『有効化』に変わるのでクリックする。ページが自動で切り替わり、『テーマを追加』のボタンがあるページに戻ったら有効化が完了です。
テーマ(Astra)の設定
・左のサイドバーにある『Astra』をクリックするとAstraの設定画面にうつります。
・『クイック設定』内にある『サイト基本情報 カスタマイズ』をクリックします。
・ページ左上にある『ペンマーク』をクリックしたらサイト基本情報の設定画面にページが切り替わります。
・このページでは、『サイトタイトルとロゴ』、『サイトアイコン』、『色』、『タイポグラフィ』を設定します。
・『サイトタイトルとロゴ』をクリックすると左のサイドバーに設定画面が表示されます。
・『カスタマイズ中・ロゴ』というタイトルの下に『GENERAL』と『DESIGN』が表示されていますが、『GENERAL』の方を設定します。『GENERAL』を選択すると『ロゴを選択』ボタンが出てくるのでクリックします。
・クリックすると、メディアライブラリが表示され、ここに使用するロゴをアップロードしてロゴを設定します。アップロードの仕方としては、真ん中に指示があるように『ファイルをドロップしてアップロード』または『ファイルを選択』どちらかを選んでアップロードをしていきます。今回は、『ファイルを選択』のボタンをクリックしてアップロードします。
・『ファイルを選択』を選ぶと自分のパソコンのファイルが表示されるので、その中から使用したいロゴを選択し、『開く』をクリックするとメディアライブラリ内にロゴがアップロードされます。
・アップロードできたら使用したいロゴをクリックし、青色の枠線＋チェックマークが付いたら選択できています。画面の右側に『添付ファイルの詳細』が出てくるので、その下にある『代替テキスト』を設定していきます。
・『代替テキスト』は、主にSEO対策の為に必要な設定です。その画像がどんな画像なのか識別できるよう『エステサロンロゴ』など適切なわかりやすいテキストを入れておきましょう。
・代替テキストが入力出来たら、右下にある青色の『選択』ボタンをクリック。
・画像の切り抜き設定の画面に変わるので、必要に応じてどちらか選択します。今回は、『切り抜かない』を選択しました。ボタンを選択後、『GENERAL』の設定画面に戻ります。
・左サイドバーのロゴのところに先ほど設定したロゴが表示されていればOKです。その下に『レティーナ端末で別のロゴを使用しますか？』という文章が出ています。右側にあるチェックバーにチェックをします、バーが青色になったらチェックができています。
※レティーナ端末とは・・・高精細なApple製品のことで、画面が滑らかでキレイに見えるのが特徴です。
・Retina 用ロゴの下にある『画像を選択』をクリックするとメディアライブラリが表示されます。先程とは違い、アップロードされている画像が表示されるのでロゴに使用した画像と同じものをチェックして右下の『画像を選択』でレティーナ用ロゴの設定が完了です。
・次はサイトタイトルを設定します。「エステサロン〇〇公式ホームページ」のようにサイトのタイトルを入力。サイトを検索した際に、検索結果で表示されるのでわかりやすいものを推奨します。タイトルまで設定し終わったら右側のブロックに移ります。
・右側にある『サイトアイコン』のブロックからサイトアイコンを設定します。画像のようにタブに表示されるアイコンです。サイトアイコンをクリックすると左サイドバーに設定画面が表示されるので『サイトアイコンを設定』のボタンをクリックしましょう。
・メディアライブラリが表示されます。左上の『ファイルをアップロード』を選択するとロゴを設定した時と同じ流れで画像が設定できます。サイトアイコンは正方形に収まる形が好ましいので、準備しておきましょう。
・次は、『色』の設定です。画面中央辺りにある色の設定ブロックをご覧ください。左から『ブランド』『代替ブランド』『ヘッダー』『テキスト』など９つの項目が並んでいます。まずは、一番左にある『ブランド』から色設定を行います。
・ブランドを選択すると左サイドバーに『グローバル パレット』が表示されます。パレットから好きな色をクリックして使用しても、カラーコードを入力してもどちらでも良いです。今回は、カラーコードを入力していきます。グローバル パレットの下の方に『#』が付いた枠があるのでそこにカラーコードを打ち込みます。『C59F78』と入れましょう。カラーコードを打ち込めたら左サイドバーの上部にある『ペンマーク』をクリックして基本情報設定のページに戻ります。
・基本情報設定に戻ったら『ブランド』のカラー設定と同じ要領で順番に色の設定をしていきます。今回は、『ブランド』『代替ブランド』『セカンダリー』『繊細な背景』のカラーのみ設定しています。
※代替ブランド カラーコード『747474』
※セカンダリー カラーコード『EDE8E5』
※繊細な背景 カラーコード『EDE8E5』
・カラーコードを入力し、設定できたらカラー設定ブロックの下にある『タイポグラフィ』を設定します。ブロック内の一番上にある大きな『見出し』の文字の右横に『ペンマーク』があるのでそれをクリック。すると左サイドバーにタイポグラフィの設定画面が表示されます。
・プリセットの下にある『基本フォント』を設定します。まず、基本フォント内の一番上にある『本文フォント』をクリックすると、下に吹き出しが出てきます。『フォントファミリー』の選択枠をクリックするとフォントが表示されます。一番上の空枠内からフォントが検索できるので『jp』と入力しましょう。すると『Noto Serif JP』というフォントが出てくるのでそちらを選択。
・本文フォントの下に『見出しのフォント』があるのでそれも同じ『Noto Serif JP』に設定しましょう。フォントが設定できたら左サイドバーの上部にある青色の『公開』をクリック。『公開済み』になったら設定完了です。
※フォントは『Noto Serif JP』か『Noto Sans JP』を使用することがほとんどです。
『Noto Serif JP』は明朝体、『Noto Sans JP』ゴシック体と考えてください。
・基本情報の設定は終了なので左側の『×』をクリック。サイトのレビューページに移ったら、上部黒いバーの左にある『サイトのタイトル』が表示されているボタンをクリックしたらWordPressのダッシュボードに戻ることができます。
プラグインのインストール
・ダッシュボードの左サイドバーにある『プラグイン』をクリックするとプラグインの画面に移ります。ここで、サイトを作る際に必要な機能をインストールしていきます。上部にある『プラグインを追加』をクリックしましょう。するとインストール可能なプラグインが一覧で出てきます。『プラグインの検索』という検索窓があるのでそこにプラグイン名を入力して検索します。
・はじめに【Password protected】というプラグインをインストールします。
・まずは『password』と検索してみましょう。(基本は英語で検索します) 『Password protected』を探します。該当プラグインが見つかったら『今すぐインストール』をクリックします。インストールが完了したら『有効化』に変わるのでクリックして有効化しましょう。
・有効化されたらそのまま自動的に設定画面に移ります。『許可して続ける』『スキップ』２つのボタンが出てきますが、ここは『スキップ』を選択。
・設定ページに切り替わったら上から順番に必要な箇所の設定していきます。
〇パスワード保護の状況・・・チェックバーをクリックしてパスワードをかけます。丸が紫色になっていたらパスワードがかかっている状態です。
〇許可する権限・・・『管理者を許可する』『ログインしたユーザーを許可する』にチェックを入れます。
〇新しいパスワード・・・ここに設定したいパスワードを入れます。下にも確認の為同じパスワードを入れます。
〇二度目以降は不要にする・・・チェックしておきましょう。
〇許可をする日数・・・30日くらいで設定しておきましょう。
・設定出来たら、下部の『変更を保存』をクリックして、左サイドバーの『プラグイン』からプラグインのページに戻ります。戻ったら先程のように再度『プラグインを追加』をクリックします。
※『Password protected』は、サイトを検索してもパスワードを入力しないと閲覧ができないよう設定することができます。すでにサイトを公開しているのでこちらのプラグインを最初にインストールし、すぐに閲覧パスワードを設定していきます。
【Elementor】
・プラグインの検索窓で『Elementor』と入力。『Elementor Website Builder』を『今すぐインストール』。『有効化』をクリックして有効化が完了すると自動的にプラグインのページに戻ります。設定は後からします。他のプラグインも同じ要領でインストールして設定は後から行います。
※『Contact Form 7』
※『Yoast SEO』・・・有効化はサイトが完成してから行うので、有効化せず置いておいてください。
※『Redirection for Contact Form 7』・・・有効化すると設定画面に移りますが、触らず左サイドバーのプラグインのボタンからプラグイン一覧のページに戻ってください。
※『Ultimate Addons for Elementor Lite』
※『The Post Grid』・・・有効化すると設定画面に移りますが、左サイドバーの『プラグイン』ボタンからプラグイン一覧のページに戻ります。
・上記のプラグインのサムネイルは下の画像にまとめてあるので参考にしてください。
・デフォルトで最初からインストールされている『Akismet Anti-spam: Spam Protection』『Hello Dolly』『TypeSquare Webfonts for エックスサーバー』は各プラグインタイトルの下にある『削除』ボタンで削除してください。削除→OK でプラグインが消えます。
Elementorの設定
・左サイドバーに『Elementor』というボタンが表示されているのでクリック。
『Elementor』のボタンの下に複数項目が表示されるのでその中から『設定』を選ぶとElementorの設定画面に移ります。画面に『一般』『連携』『高度な設定』などタブが表示されるので、まずは『一般』のタブを選択して『一般』から設定していきます。
・『投稿タイプ』では『投稿』『固定ページ』『Elementor Header＆ Footer Builder』にチェックを入れましょう。それ以外のところは触らなくて大丈夫です。下部の青色の『変更を保存』をクリックします。
・次は、『機能』のタブをクリックします。設定項目タブの少し下に青色の『Activate All』『DeActivate All』『デフォルトに戻す』の３つのボタンがあります。その中の中央にある『Deactivate All』をクリックします。これでElementorの設定は完了です。左サイドバー上部にある『ダッシュボード』からWordPressのダッシュボードに戻ります。
固定ページの作成
・ダッシュボードに戻ったら、左サイドバーの『固定ページ』から固定ページ一覧のページに移ります。今回は、ここで作成する固定ページを使ってサイトを構築していきます。
・固定ページ一覧の画面の左上部(固定ページというタイトルの右横)にある『固定ページを追加』をクリックすると固定ページ作成画面に移ります。
・『タイトル追加』と書かれた入力フォームがあるので、そこに作成したいページのタイトルを入れます。
・まずはTOPページから作成していくので『TOPページ』とタイトル入力フォームに入れましょう。入力できたら、固定ページのアイキャッチ画像を設定していきます。アイキャッチ画像とは、ページの内容を画像を見ただけで視覚的に伝えられるような看板画像のことです。ページの右サイドバーに『アイキャッチ画像を設定』というボタンがあるのでクリックします。
・『アイキャッチ画像を設定』をクリックすると、メディアライブラリが開きファイルのアップロード画面が表示されます。ここに使用する画像をアップロードしてアイキャッチ画像を設定していきます。アップロードの仕方としては、真ん中に指示があるように『ファイルをドロップしてアップロード』または『ファイルを選択』どちらかの方法を選んでアップロードをしていきます。今回は、『ファイルを選択』のボタンをクリックしてアップロードします。
・『ファイルを選択』を選ぶと自分のパソコンのファイルが表示されます。その中から、使用したい画像を選択し、『開く』をクリックするとメディアライブラリ内に画像がアップロードされます。
・アップロードした画像に青色の枠線＋チェックマークが付いたら選択できています。もし、付いていなければクリックしてチェックしましょう。画面の右側に『添付ファイルの詳細』が出てくるので、その下にある『代替テキスト』を設定していきます。代替テキストが入力できたら下部の青い『アイキャッチ画像を設定』のボタンをクリックして設定を完了させましょう。完了したら、作成中の固定ページの設定画面(今回ならTOPページとタイトル入力した画面)に自動的に戻ります。
・次に『スラッグ』を設定します。スラッグとは、サイトのURLの一部として使われる文字列のことです。具体的にはURLの中で、そのページを表すのがスラッグです。スラッグは日本語は使わず、ローマ字で入力していきます。ここで設定したスラッグがサイトのURLに反映されます。(例えば、https://example.com/toppage 赤文字の部分が設定したスラッグになります。)
・右サイドバーにある『スラッグ』から変更します。スラッグと書かれた右横に青文字でタイトルが現段階で入っていると思います。その青文字をクリックするとスラッグの入力フォームが表示されるので、今入っている文字列を消して新しく作成さる固定ページに合った文字列を入力していきます。今回はTOPページを作成するので『top』とスラッグの入力フォームに入れましょう。入力フォームの下に『パーマリンク』というものがあります。それが、この固定ページのURLとなります。そちらも変更されていることを確認できたら、右サイドバーの右上にある青色の『公開』をクリックしたら完了です。ページの一番左上にあるサイトアイコンをクリックすると固定ページ一覧の画面に戻ることができます。TOPページが固定ページ一覧の中に入っていればOKです。
・TOPページと同じ要領でサイト構築に必要なページを作成していきます。
※LILASについて(スラッグ：about)
※お問い合わせ(スラッグ：contact)
※ご利用の流れ(スラッグ：flow)
※メニュー(スラッグ：menu)
※フェイシャル(スラッグ：facial)
※ボディ(スラッグ：body)
※店舗概要(スラッグ：information)
※サンクスページ(スラッグ：thanks)
・必要な固定ページの作成が完了し、固定ページ一覧の中にあるデフォルトで入っている『サンプルページ』と『プライバシーポリシー』を削除します。削除の仕方は、サンプルページにカーソルを合わせるとタイトルの下に『編集』『クイック編集』『ゴミ箱へ移動』『表示』のボタンが出てきます。その中の『ゴミ箱へ移動』をクリックすると一覧から削除されます。『プライバシーポリシー』も同様に一覧から削除しましょう。
メニューの作成
・サイトのメニューを作成します。左サイドバーの『外観』→『メニュー』を選択し、メニュー設定の画面に移りましょう。
・メニュー設定の画面に移ったら、真ん中あたりにある『メニュー構造』の下にある『メニュー名』の入力フォームにメニュー名を入れます。今回は『メインメニュー』と入れます。下の『メニュー設定部分』にチェック欄が６つ縦に並んでいますが、その中から『メインメニュー』を選んでチェックしてください。チェックができたら左下の青いボタン『メニューを作成』をクリックします。
・『メニューを作成』をクリックしたら左側に『メニュー項目を追加』のブロックが表示されます。先程作成した固定ページ名がチェックできるようになっているので、『TOPページ』『LILASについて』『メニュー』『フェイシャル』『ボディ』『店舗情報』『お問い合わせ』この７つの固定ページをチェックしてから右下の『メニューに追加』をクリックします。メニューの設定ブロックの中に追加した固定ページのタイトルが表示されます。
・上から順にメニューに表示される仕組みになっています。固定ページの名前をクリックしたまま動かす(ドラッグする)と自由に順番を変えることができます。縦並びに
①TOPページ
②LILASについて
③メニュー
④フェイシャル
⑤ボディ
⑥店舗情報
⑦お問い合わせ
の順番になるようドラッグし順番をかえます。
・①～⑦まで順番に並べられたら、『フェイシャル』と『ボディ』を『メニュー』のサブ項目として設定していきます。『フェイシャル』をクリックしたまま右に少し動かすと他の項目から少し右側にずれて配置することができます。これでサブ項目に設定できました。『ボディ』も『フェイシャル』と同じように動かしてサブ項目に設定しましょう。
・次は項目の名前を変更します。今回は『TOPページ』のみ変更します。『TOPページ』の項目の右側に矢印(▼)があるのでそこをクリックします。すると追加設定オプションが表示されます。その中の『ナビゲーションラベル』の入力フォームに『HOME』と入れます。入力できたら右側の白い余白の部分をクリックして追加設定オプションの表示が消し、左下にある青いボタン『メニューを保存』をクリックして設定を完了させます。
