WordPressの有料テーマのひとつSWELL 。
シンプルで洗練されたデザインが特徴で、
初心者から上級者まで幅広いユーザーに支持されています。
SWELL が選ばれる理由についは下記の記事で、
詳しく説明してます。読んでみて下さい。
![](https://toshi-traveler.com/wp-content/uploads/2022/10/24585120_m-300x200.jpg)
この記事では初めてSWELL を触る初心者向けに、
美容室ヘアサロンのサイトを制作する方法を解説します。
コーディングは一切せず、ノーコードWEB制作での実践方法なので、
プログラミングスキルに自信がなくても心配無用です。
読み終わったころには、
- サイトを制作する手順がわかる!
- SWELL を使ったWebサイトの制作方法が理解できる!
- デザインセンスがなくても綺麗なサイトが作れる!
ようになっているはずです。
また、少し凝ったデザインにしたい!CSSを使ってこだわりたい!
という方向けに中級編もあるので、初級編が終わった方はぜひご覧ください。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/Group-71-1-300x158.jpg)
SWELLテーマを未所持の人へ
\ SWELL公式サイト /
制作するサイトのイメージ
初級編で制作するWebサイトのスクリーンショットを掲載します。
今回は美容室ヘアサロンのWebサイトを制作していきます。
実際のサイトはこちらから確認できます。
制作テキストの流用にも活用してください。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/69d076ca-b0be-4ad2-82c1-e08127517923-301x1024.jpg)
WEBサイトを制作するための事前準備
SWELLを使ってWebサイトを作るために必要なものは以下になります。
- サーバーの準備
- サブドメインの設定とWordPressのインストール
- SWELLテーマの準備
- サイト内で使用する画像の準備
- 画像のアップロード
サーバーの準備
サイト制作をする前にレンタルサーバーが必要、という方は下記の記事を参考にしてください。
![](https://toshi-traveler.com/wp-content/uploads/2022/03/スクリーンショット-2022-03-30-20.35.37-300x197.png)
サブドメインの設定とWordPressのインストール
WordPressを構築する方法としては大きく2つあります。
レンタルサーバーを契約してサーバー上で構築する方法と、
ローカル環境(お持ちのPC内)で構築する方法です。
今回は、レンタルサーバーを契約してサーバー上で構築する方法でサイト制作を行っていきます。
レンタルサーバーを契約して制作を進めていくには、
サブドメインの設定とWordPressのインストールが必要になってきます。
サブドメインの設定とWordPressのインストールについては以下の記事を参考に準備を進めてください。
![](https://toshi-traveler.com/wp-content/uploads/2024/04/wordpress-subdomain-test.jpg)
SWELLテーマの準備
SWELLを購入して使用するには、以下のステップを踏みます。
- 公式サイトで購入する
- 親テーマと子テーマをダウンロードする
- 使用するサイトにWordPressをインストール
- ログインしてサイトにSWELLをアップロード
\ SWELL公式サイト /
SWELLについて詳しく知りたい方は、下記の記事を参考にしてください。
![](https://toshi-traveler.com/wp-content/uploads/2022/10/24585120_m-300x200.jpg)
SWELL公式サイトにアクセスして、
「DOWNLOAD」の文字をクリックすると購入ページに飛びます。
【「利用規約」に同意します。】にチェックを入れ【SWELLを購入する】ボタンを押したら、
支払い画面に移ります。
支払い方法はクレジットカード( VISA / Master / AMEX / JCB )に対応してます。
いずれかを選んで決済に進んでください。
購入を完了したら、SWELLダウンロードページに飛べるので
【SWELLをダウンロードする】をクリックしてください。
これで親テーマをダウンロード出来たので、続いて子テーマもダウンロードしましょう。
親テーマ・子テーマ共にzipファイルのままにしておいてください(解凍しない)。
子テーマがないと、テーマを更新した際に作ったデザインが全て消えてしまいます。
逆に子テーマがあると親テーマをいくら更新しても
子テーマにデザインが残っている状態なので、デザインが消えません。
必ず子テーマもダウンロードするようにしてください。
使用するサイトにWordPressをインストール
使用するサイトにWordPressをインストールしましょう。
インストールは契約したサーバーで、
WordPressをインストールする項目があるのでそちらを利用します。
わからない場合は、
「サーバー名 WordPress インストール」で検索すると方法がヒットする
ので調べてみましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/swelldown-1024x565-1.png)
WordPressをインストール出来たら、
ログイン画面に入りIDとパスワードを入力してログインします。
WordPress管理画面に入ったら、
「外観」→「テーマ」の順番に押して、
「新規追加」→「テーマのアップロード」でダウンロードしたSWELLのテーマを親テーマ、
子テーマの順にサイトへインストールします。
子テーマを有効化したら、SWELLの購入~使用にかけては終了です。
ここからは上で紹介したSWELLの機能を参考に自由にカスタマイズしてください。
SWELL設定の「アクティベート」でユーザー認証をしておきましょう。
ユーザー認証をすると、SWELLテーマが更新された際に更新できるようになります。
逆にアクティベートを済ませておかないと更新されても更新できない状況になってしまいますので
ユーザー認証はできるだけ早めに済ませておくようにしましょう。
\ SWELL公式サイト /
画像のアップロード
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-26-11.52.44-1024x251.png)
管理画面の左側メニューにある「メディア」、
「新しいメディアファイルを追加」を開きます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-26-11.54.38-1024x427.jpg)
「ファイルを選択」からダウンロードした画像を開く、
または、画像をドラッグ&ドロップで追加します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-26-11.51.56-1024x459.jpg)
メディアライブラリに追加した画像を選択して、
「代替テキスト」に画像が表示されなかったとき、
代わりに表示するテキストを入力します。
main.jpg = スタイリングチェアと鏡
mv-sp.jpg = スタイリングチェアと鏡
concept.jpg = 花を持った女性
hair.jpg = 髪をカットしている様子
g-1.jpg = ショートヘアの女性
g-2.jpg = パーマをかけた女性
g-3.jpg = パーマをかけた女性
g-4.jpg = パーマをかけた女性
g-5.jpg = パーマをかけた女性
g-6.jpg = ショートヘアの女性
各画像の代替テキストに、上記テキストを入力して下さい。
美容室ヘアサロンのWEBサイトを制作するための初期設定
それでは早速、Webサイトを制作していくための設定をしていきましょう
WordPressの基本設定
表示とタイムゾーンの設定
WordPress管理画面に入ると英語で表示されているので、日本語に変更します。
一緒に時間も日本時間に合わせましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-11-6.32.16.png)
「Settings」→「Site Language」のセレクトボックスから「日本語」を選択。
「Timezone」のセレクトボックスから「UTC+9」を選択して日本時間に合わせます。
noindex設定
noindex設定とは、検索エンジンに検索されないようにするための設定です。
作りかけのWebサイトや、非公開のデモサイトなどに設定しておくと、
検索エンジンに表示されないようになります。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-25-16.53.38-1024x418.png)
左側メニューの「設定」「表示設定」を開きます。
検索エンジンでの表示のチェックボックスにチェックを入れて、
変更を保存します。
サイト基本情報
サイトのタイトルを設定
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-6.16.55.png)
管理画面の左側メニューから、
「外観」「カスタマイズ」「WordPress設定」「サイト基本情報」
の順番で進んでいきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-6.21.03.png)
サイトのタイトルを「Graceful」にします。
キャッチフレーズの設定
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-25-17.10.04.png)
キャッチフレーズに「心地よい空間で美を追求する」を入れ、
公開をクリックして保存しましょう。
ファビコンの設定
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-26-12.09.10.png)
「サイトアイコンを選択」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-26-12.13.45.jpg)
メディアライブラリから画像を選択します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-14-4.46.48.png)
アイコンを設定できました。
基本カラーの変更
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-6.38.55.png)
「外観」「カスタマイズ」「サイト全体設定」「基本カラー」
の順番にクリックして進んでいきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-6.42.18.png)
メインカラーの「色を選択」をクリックして、
右側のカラーコード入力欄に「#816d51」を入力します。
カラーはカラーパレットから選ぶこともできます。
ヘッダーバーを非表示にする
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-23.03.18.png)
管理画面の左側メニューから、
「外観」「カスタマイズ」「ヘッダー」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-23.05.22.png)
左側メニューを下にスクロールしていくと、
「ヘッダーバー設定」が出てくるので「SNSアイコンリストを表示する」
をクリックしてチェックを外します。
「キャッチフレーズ設定」の「キャッチフレーズの表示位置」を表示しないにします。
「公開」をクリックして保存します。
サイドバーを非表示
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-4.53.19.png)
今回のデザインではトップページにサイドバーは必要ないので非表示にします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-4.47.12.png)
管理画面の左側メニューから、
「外観」「カスタマイズ」「サイドバー」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-4.49.41.png)
「トップページにサイドバーを表示する」「固定ページにサイドバーを表示する」
のチェックを外します。
「公開」をクリックして保存します。
記事スライダーを非表示
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-13-5.02.16.jpg)
この記事スライダーも非表示にしていきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-5.03.52.png)
管理画面の左側メニューから、
「外観」「カスタマイズ」「トップページ」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-5.08.34.png)
「記事スライダー」をクリックし、
「記事スライダーを設置するかどうか」の「設置しない」にチェックを入れます。
「公開」をクリックして保存します。
必要なページを固定ページで作成する
この記事で制作するページは、
「トップページ」「メニュー(料金)」「ギャラリー」「ブログ」の4ページです。
それぞれの固定ページを作成していきます。
まずはトップページから作りましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-11-9.18.46.png)
左側メニューから「固定ページ」を選び「新規固定ページを追加」を選択します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-11-9.20.29-1024x361.png)
「タイトルを追加」に「トップページ」と入力します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-11-9.21.54.png)
右側メニューの「URL」をクリックし、「パーマリンク」を「home」に書き換えます。
右側メニューにURLが表示されていない時は「概要」をクリックで表示されます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-11-9.23.07.png)
右上の「公開」をクリックして保存します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-11-9.24.27.png)
左上にあるWordPressのアイコンを選択して固定ページの一覧に戻ると、
トップページが追加されています。
以上の流れで、他の固定ページも作成します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-5.38.46.png)
メニュー = menu
ギャラリー = gallery
ブログ = blog
上記を参考に「メニュー」「ギャラリー」「ブログ」の固定ページを作ってみましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-11-9.25.04.png)
不要な固定ページは消しておきましょう。
マウスを合わせるとタイトル下に「ゴミ箱へ移動」が表示されるので、
クリックで一覧から消すことができます。
ホームページ設定
作成した固定ページ「トップページ」が、
トップに表示されるように設定していきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-5.59.36.png)
管理画面の左側メニューから「外観」、「カスタマイズ」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-6.02.02.png)
「WordPress設定」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-6.03.51.png)
「ホームページ設定」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-6.05.35.png)
「固定ページ」にチェックをして、
ホームページと投稿ページのセレクトボックスからそれぞれ
「トップページ」、「ブログ」を選択します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-6.08.56.png)
公開をクリックして保存します。
グローバルナビゲーションの設定
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-22.34.38.png)
左側メニューの「外観」からメニューをクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-22.30.06.png)
メニュー名は「ヘッダーメニュー」とし
「グローバルナビ」にチェックを入れ「メニューを作成」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-22.31.23.png)
「メニュー項目を追加」の固定ページのタブを開き、
「すべて表示」をクリック。
「ブログ」「ギャラリー」「メニュー」をチェックし、
「メニューに追加」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-12-22.32.54.png)
「メニュー構造」に追加した固定ページを「メニュー」「ギャラリー」「ブログ」
の順番に並び替えます。
入れ替えたい固定ページをドラッグしたまま移動で順番の入れ替えができます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-18-23.00.08.png)
つづいて、「アクセス」「コンタクト」セクションへの
ページ内リンクを作成します。
管理画面から「外観」「メニュー」を開きます。
「メニュー項目を追加」の「カスタムリンク」のタブを開きましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-18-23.03.59.png)
URLには、WebサイトのURLの末尾に「#access」を付けて
記入します。
リンク文字列にはグローバルナビゲーションに表示される
名前を記入します。
「メニューに追加」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-18-23.10.27.png)
アクセスが追加されました。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-18-23.12.11.png)
contactセクションの内部リンクを作ります。
URLには、WebサイトのURLの末尾に「#contact」を付けて
記入します。
「メニューに追加」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-18-23.17.04.png)
アクセス、コンタクトが追加されました。
「メニューを保存」をクリックしましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-18-23.21.07-1024x60.png)
ヘッダーにナビゲーションが表示されています。
グローバルナビゲーションの設定は完了です。
カテゴリーを追加
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-5.28.05.png)
「投稿」「カテゴリー」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-5.30.31.png)
「名前」「スラッグ」にnewsと入力します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-5.32.40.png)
「新規カテゴリーを追加」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-5.34.42.png)
続いてcolumnと入力し「新規カテゴリーを追加」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-5.37.51.png)
newsとcolumnが追加されました。
新規投稿の追加
ブログページ用に記事をいくつか作成しておきましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-5.47.10.png)
「投稿」「新規投稿を追加」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-5.55.09.png)
タイトルは「ホームページをリニューアルしました」。
記事の内容にテキストを入力します。
テキストはこちらから流用してください。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-5.59.43.png)
右側メニューから「カテゴリー」を開くと、
さっき作成したカテゴリーが追加されています。
「news」をクリックしてチェックを入れます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-6.27.08.png)
「アイキャッチ画像を設定」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-6.30.47.png)
ファイルをドロップするかファイルを選択して、
アイキャッチにする画像をアップロードします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-6.35.21-1024x640.png)
画像が選択されていることを確認して右下の「アイキャッチ画像を設定」をクリックします。
右上の「公開」をクリックして記事を公開します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-6.48.36-1024x393.png)
「新規投稿を追加」からあと2、3記事作成しておきましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-6.18.31.png)
もともと入っていた記事は不要なので「ゴミ箱へ移動」します。
不要テーマの削除
サイトのセキュリティ向上のため、不要なテーマは削除しておきましょう。
「SWELL」「SWELL CHILD」とデフォルトテーマの最新のもの(ここではTwenty Twenty-Four)以外のテーマは削除しておきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/04/デフォルトテーマ-1024x610.jpg)
削除したいテーマをクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/04/デフォルトテーマ削除-1024x645.jpg)
ページ下部の「削除」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/04/デフォルトテーマこんな感じで-1024x354.jpg)
このような形になっていれば、最小の構成になります。
プラグインのインストールと削除
アップロードした画像の圧縮をしてくれるプラグインと、
日本語の文字化けを防いでくれたりなど、
日本語環境の強化をしてくれるプラグインを入れていきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-26-6.49.36-1024x426.jpg)
管理画面の左側メニューから「プラグイン」を開きます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-26-6.50.25-1024x487.png)
デフォルトで入っている3つのプラグインは、
今回は不要なので「削除」で消しましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-26-9.20.11-1024x412.jpg)
「新規プラグインを追加」を開きます。
検索窓に「WP Multibyte Patch」を入力します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-26-9.22.02-1024x453.png)
今すぐインストールをクリックし、有効化します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-26-9.27.31-1024x390.jpg)
つぎに検索窓に「Image Optimizer」を入力して、
有効化までしましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-26-9.30.10-1024x319.jpg)
プラグインの一覧に追加されました。
EWWW Image Optimizerの設定
EWWW Image Optimizerはアップロードした画像を圧縮して、
画像データの容量を軽くしてくれます。
Webページの表示速度に関わるところなので、
初期設定をしておきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-26-10.23.22-1024x571.png)
「設定」の「EWWW Image Optimize」を開き、
「サイトの高速化」と「今は無料モードのままにする」にチェックを入れ、
「次へ」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-26-10.26.24-982x1024.png)
「幅の上限」と「高さの上限」をそれぞれ「0」にして、
「設定を保存」します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-26-10.29.21-1024x823.png)
「完了」をクリックして、初期設定は終わりです。
トップページの作成
いよいよここからはトップページを編集していきます。
ブロックエディタの基本だけでもキレイなサイトが作れてるので、
使い方に慣れていきましょう。
フォントを変更
フォントはWebサイトの雰囲気を決める重要な要素となります。
今回のサイトではキレイで上品な印象を与えたいのでフォントを変更します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-9.26.54.png)
管理画面の左側メニューから、
「外観」「カスタマイズ」「サイト全体設定」「基本デザイン」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-9.28.46.png)
フォント設定の「ベースとなるフォント」のセレクトボックスから明朝体を選択します。
「公開」をクリックして保存します。
これで日本語は明朝体、欧文はセリフ体が使われるようになりました。
メインビジュアルの設定
ユーザーが訪れたいときに最初に目にするメインビジュアルを設定していきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-9.38.48.png)
管理画面の左側メニューから、
「外観」「カスタマイズ」「トップページ」「メインビジュアル」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-9.41.20.png)
各スライドの設定「スライド画像1(PC)」の「画像を選択」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-9.49.43.png)
ファイルをアップロード、もしくはメディアライブラリから
メインビジュアル用の画像を選択して「画像を選択」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-19-14.59.39.jpg)
スマートフォン用に「スライド画像(SP)」に
スマートフォン用の画像を設定します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-9.52.02.png)
メインテキストは不要なので「さぁ、始めよう。」というテキストは消しておきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-9.56.21.png)
メインビジュアルの高さは画像の高さのままにしたいので、
表示設定を変更します。
「メインビジュアルの高さ設定」のセレクトボックスから
「画像・動画サイズのまま」を選択します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-10.01.11.png)
最後に、メインビジュアルにはデフォルトでフィルター処理のドット、
オーバーレイカラーが設定されているので、フィルター処理は「なし」を選び、
不透明度の値を「0」にします。
「公開」をクリックして保存すれば、メインビジュアルは完成です。
トップページを編集
ブロックエディタは初心者の方でも簡単に扱うことができるので、
実際に作りながら慣れていきましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-10.11.42.png)
右側メニューの「固定ページ」「固定ページ一覧」からトップページの「編集」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-10.20.07.png)
タイトルの下にブロックを使ってトップページを編集していきます。
Conceptセクションを作成
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-10.28.13-1024x335.png)
「+」マークをクリックするとブロックが出てきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-10.30.39.png)
「すべて表示」をクリックすると左側にブロックの一覧が表示されます。
今回は「フルワイド」を選択します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-10.32.58.png)
検索窓を使ってブロックを検索することもできるので、
慣れてきたら使ってみましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-19-21.54.48.png)
「+」をクリックし「メディアとテキスト」を選択します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-19-22.03.55.png)
アップロードまたはメディアライブラリから画像を選択します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-10.44.30.png)
表示させる画像を選択します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-13-10.45.47-1024x649.jpg)
左側半分に画像を配置することができました。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-19-22.07.31.png)
つぎに右側の「+」をクリックし「見出し」を選択します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-10.50.29.png)
「Concept」と入力します。
このままだとデモサイトのデザインと違うので変更していきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-10.52.58-1024x348.png)
右側の一覧の「ブロック」をクリックし、
「円のアイコン(スタイル)」をクリックします。
スタイルの「セクション用」をクリックすると、
シンプルなデザインに変更できました。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-10.59.14.png)
「テキスト左寄せ」を選択しテキストを左揃えにします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-13-11.02.51.jpg)
見出しの下にブロックの「段落」を追加しテキストを入れます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-19-22.11.05.png)
見出し(concept)の下にブロックをうまく追加できないときは、
「3本線」をクリックすると階層が表示されるので、
見出し(concept)の「3点リーダー」をクリックし「後に追加」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-11.43.17.png)
背景色がグレーになっているので白に変更していきます。
「フルワイド」を選択した状態で右側メニューの「ブロック」をクリック、
下にスクロールしていくと「背景色」があるので
クリックするとカラーパレットが表示されます。
カラーコードにFFFFFFを入力すると、
背景色を白にすることができます。
ここで一度トップページがどのように表示されるか確認をしましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-11.52.34.png)
「更新」をクリックした後に赤枠のアイコンをクリックすると、別タブでトップページを表示することができます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/FireShot-Capture-032-Graceful-demosite2.toshi-traveler.com_-745x1024.jpg)
お疲れ様です!
Conceptセクションはこれで完成です!
Hair Menuセクションの作成
つづいて次のセクションを作っていきます。
Conceptセクションと配置が逆にしてリズムを作ります。
複製して作成していきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-19-22.15.48.png)
3点リーダーをクリックし「複製」します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-19-22.17.36.png)
「置換」をクリックして
メディアライブラリから画像を選択します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-19-22.20.47.png)
「見出し」にHair Menuと入力します。
「段落」にテキストを入力します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-12.45.45.png)
段落の下に新しいブロック「SWELL ボタン」を追加します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-12.47.37-1024x316.png)
ボタンのテキストに「MORE」と入力します。
右側メニューの「スタイル」で「MOREボタン」を選択します。
ボタンの外観はこれでOKです。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-12.57.17.png)
ボタンをクリックしたときのリンク先を設定します。
「リンク先」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-12.59.39.png)
URLを入力し決定キーを押してリンク先が設定されました。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-13.02.51.png)
リンク先のURLが分からないときは、
固定ページの編集画面から確認できます。
ここでは固定ページ「メニュー」のURLを知りたいので、
「固定ページ一覧」から「メニュー」の「編集」をクリックし、
URLをコピーしましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-19-22.22.25.jpg)
「メディアを右に表示」で左右の表示を入れ替えます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-13.13.26.png)
Hair Menuセクションの「フルワイド」ブロックを選択し
背景色を「#FAF9F8」に変更します。
Hair Menuセクションの完成です。
Galleryセクションの作成
ここでは新しいブロックを使っていきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-14.01.59-1024x226.png)
前のセクションと同様に「フルワイド」を追加し「見出し」にGalleryと入力します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-14.04.25.png)
「見出し」の下に「リッチカラム」を追加します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-14.09.46.png)
右側メニューの設定からPC表示のときの列数を3に変更します。
タブレット、スマートフォンそれぞれの列数もここで変更できます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-14.13.19.png)
各カラムの「+」から「画像」を追加し配置していきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-13-14.16.39-1024x471.jpg)
カラムを複製することで下段に追加することができます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-13-14.19.32.jpg)
置換をクリックし画像を変更します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-14.22.24.png)
「リッチカラム」の下に「SWELL ボタン」を追加します。
テキストは「MORE」と入力、スタイルは「MOREボタン」、リンク先は固定ページ「ギャラリー」のURLを設定します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-13-14.28.04-1024x290.jpg)
「フルワイド」を選択した状態で右側メニューの「背景画像の設定」を開きます。
「メディアから選択」をクリックし画像を設置します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-13-14.31.56-1024x525.jpg)
デフォルトで「オーバレイの不透明度」が50に設定されているので「0」にします。
「背景効果」の「固定背景」にチェックを入れるとスクロールしたときに背景は固定された状態になります。
これでGalleryセクションの完成です。
Blogセクションの作成
次は投稿記事の一部を表示させていきます。
今回は新着記事と人気記事をタブの切り替えで表示できるようにしていきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-15.11.52.png)
「見出し」を追加しタイトルは「Blog」とします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-14.46.35.png)
「タブ」ブロックを追加します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-14.48.29.png)
タブ1には「new」、タブ2には「pickup」を入力します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-14.51.33-1024x318.png)
newのタブを選択した状態で「投稿リスト」のブロックを追加します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-14.55.38-1024x705.png)
右側メニューの「表示設定」を開き、「表示する投稿数」を「3」、「レイアウトを選択」は「カード型」、「投稿の表示順序」を新着順にします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-15.00.28.png)
pickupのタブを選択し「投稿リスト」を追加します。
こちらは「人気順」にチェックを入れます。
記事が見つかりませんでした。と表示がありますが、投稿記事を作ったばかりで閲覧されていないためこのような表示になります。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-15.06.36-1024x385.png)
タブのスタイルを変更したいので、「タブ」を選択し右側メニューの「スタイル」を「下線」にします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-15.16.01.png)
「SWELL ボタン」ブロックを追加します。
テキストは「MORE」、スタイルは「MOREボタン」、リンク先は固定ページ「ブログ」のURLを設定します。
Blogセクションもこれで完成です。
Accessセクションの作成
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-17.12.25-1024x360.png)
「フルワイド」を追加し「背景色」をFAF9F8にします。
「見出し」にはAccessを入れましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-19-6.04.35.png)
「見出し」を選択した状態で、高度な設定タブを開き
「HTMLアンカー」にaccessと入力します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-19-6.08.24.png)
グローバルバビゲーションの設定で、
カスタムリンクのURLに「#access]を設定しています。
ページのどの場所を閲覧していても、
HTMLアンカーにaccessを設定した場所に飛ぶことができます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-17.15.44.png)
「カラム(50/50)」を追加し、左のカラムにはgoogleマップを埋め込みます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-16.45.14.png)
Googleマップを埋め込む方法を解説します。
まずは、埋め込みたい場所をGoogleマップで表示します。
「共有」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-17-16.46.13.jpg)
「地図を埋め込む」をクリックして、画像サイズを小、中、大、カスタムの中から選びます。
今回は「小」にしています。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-16.47.13.png)
「HTMLをコピー」をクリックしてコピーします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-16.48.22.png)
左のカラムに「カスタムHTML」を追加します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-16.49.00.png)
コピーしたHTMLを貼り付けます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-17-16.49.14.jpg)
「プレビュー」をクリックすると、地図が表示されました。
これでGoogleマップの埋め込みができました。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-18.07.08-1024x389.png)
つづいて右のカラムに「段落」でテキスト入れます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-18.08.24.png)
テキストは「Bのアイコン」で太くできます。
「SWELL アイコン」から「テキスト色」でテキストの色を変更できます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-18.11.05.png)
今回は「カラーコード」に「#816D51」を指定します。
「段落」内での改行は「shift+return(決定キー)」でできます。
そのままreturn(決定キー)を押すと、新しく「段落」が追加されます。
Contactセクションの作成
トップページ最後のセクションになります。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-19.08.02-1024x190.png)
「フルワイド」を追加して、「見出し」にContact、「段落」にテキストを入力します。
「背景色」は「#FAF9F8」です。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-19.23.52.png)
「上下のPADDING量」は「20」にします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-19-6.20.12.png)
「見出し」を選択した状態で、
「HTMLアンカー」にcontactを設定します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-19.10.02-1024x318.png)
「カラム(50/50)」を追加してそれぞれに「SWELL ボタン」を追加します。
ボタンのスタイルは「MOREボタン」です。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-19.13.12.png)
「左のカラム」のリンク先は電話番号にします。
リンク先を電話番号にするには番号の前に「tel:」をつけて入力します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-17-19.16.14.png)
「右のカラム」のリンク先はメールアドレスにします。
リンク先をメールアドレスにするには番号の前に「mailto:」をつけて入力します。
これでトップページの完成です!
ここまでくるとブロックエディタの扱いに慣れてきたと思います!
残りも頑張っていきましょう!
下層ページの作成
ここからは下層ページ「メニュー」「ギャラリー」「ブログ」の3ページを作っていきます。
下層ページのヘッダーデザインを変更
まずは下層ページのヘッダーデザインを変更していきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-17.32.22-1024x201.png)
少しシンプルすぎるので画像を配置していきましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-17.35.17.png)
左側メニューの「外観」「カスタマイズ」「投稿・固定ページ」「タイトル」と進んでいきます。
固定ページのタイトルの表示位置を「コンテンツ上」にします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-17.39.07-1024x278.png)
「公開」をクリックして保存するとこのように表示されます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-17.43.18.png)
つづいて管理画面の左側メニューの「外観」「カスタマイズ」「サイト全体設定」「コンテンツヘッダー」に進み「画像を選択」します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-17.53.44.png)
カラーオーバーレイの色を「#ffffff」、オーバーレイカラーの不透明度を「0.1」にします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-13-17.56.54-1024x282.jpg)
下層ページのヘッダーデザインを変更できました。
メニューページを作成
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-16.22.25.png)
左側メニューの「固定ページ一覧」を開き、メニューの「編集」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-16.28.23-1024x214.png)
「見出し」ブロックを追加しHair Menuと入力します。
「スタイル」はセクション用にします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-16.30.48.png)
「テーブル」ブロックを追加します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-16.50.14.png)
カラム数「2」、行数「4」にして「表を作成」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-16.42.46-1024x482.png)
右側メニューの「設定」を開き「ヘッダーセクション」にチェックを入れます。
右側メニューの「セルの結合・変換」を開き、うえ二つのセルを選択し「セルを結合」をクリックします。
セルはShiftキー、またはCtrl(command)キーで複数選択することができます。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-16.54.31.png)
ヘッダーセクションには「カット」と入力。
各セルにテキストを入力します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-16.57.11.png)
テーブルを4つ複製します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-17.03.40.png)
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-17.03.49.png)
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-17.04.00.png)
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-17.04.08.png)
各テーブルにテキストを入力して完成です。
ギャラリーページを作成
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-18.06.38.png)
「固定ページ一覧」からギャラリーページを編集します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-13-18.08.40.png)
「ギャラリー」ブロックを追加します。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-13-18.11.39-1024x712.jpg)
ギャラリーに挿入する画像をメディアライブラリから選択します。
キャプションにそれぞれ数字を記入します。
最後に「ギャラリーを挿入」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-13-18.16.50-1024x620.jpg)
「更新」して表示を確認するとキレイに配列されています。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-13-18.18.11-1024x616.jpg)
画像をクリックすると画面いっぱいに広がって見やすいです。
次の画像も見ることができ、こういう機能がデフォルトで実装されているのはありがたいですね!
これでギャラリーページも完成しました!
ブログページを作成
ブログページでは、記事が増えたとき用にサイドバーを表示させます。
美容室ヘアサロンサイトを制作するための事前準備で固定ページのサイドバーは非表示にしていますが、
個別で表示、非表示の設定ができるのでやっていきましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-14-3.56.00.png)
「固定ページ一覧」のブログの「編集」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-14-4.04.26.png)
右側の固定ページタブを開き「表示の上書き設定」の「サイドバーを表示」にします。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-14-4.16.52-1024x546.jpg)
この設定は「サイドバーを非表示」でおこなったものより優先されるので、「更新」してブログページを確認するとサイドバーが表示されています。
ブログページも完成となります。
サイト制作後のチェック
サイト制作が完了しましたので、制作後のチェックを行っていきましょう。
確認したい項目の代表的なものとしては、以下の項目が挙げられます。
確認したい項目
- OGP画像が設定されているか
- 表示が崩れている箇所はないか
- サイトのバックアップ対策は行われているか
- 管理画面へのセキュリティ対策は行われているか
OGP画像が設定されているか
OGPとは、SNSなどでシェアされたときに作られるリッチオブジェクト(見え方)を設定できるもの仕組みです。
OGPを設定するメリットとしては、以下のものがあげられます。
- SNSなどで目立つ・気づかれやすくなる
- 気づいた人による更なる拡散・シェアが期待できる
- シェアされたコンテンツや製品が魅力的に見える
SWELLでは、「SEO SIMPLE PACK」というプラグインを使ってOGPを簡単に設定することができるので実装しておきましょう。
SEO SIMPLE PACKのインストール
管理画面の「プラグイン」から「新規プラグインを追加」を選択して、プラグインの検索欄に「SEO SIMPLE PACK」と入力します。
SEO SIMPLE PACKが表示されたら、「今すぐインストール」をクリックして「有効化」します。
![](https://toshi-traveler.com/wp-content/uploads/2024/04/インストール-1024x386.jpg)
有効化できたら、管理画面の「SEO PACK」の「OGP設定」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/04/OGP設定.jpg)
OGP設定画面が開いたら、「画像を選択」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/04/画像設定-1024x456.jpg)
OGPの推奨画像サイズは、1200×630pxです。
調整できる方はPhotoshopなどで設定したい画像を調整しておきましょう。
今回はメディア内にある、「blog-1.jpg」の画像をOGP画像として選択します。
![](https://toshi-traveler.com/wp-content/uploads/2024/04/画像を選択-1024x324.jpg)
OGP画像が設定できたら、「設定を保存する」をクリックします。
これでOGP画像の設定が完了しました。
![](https://toshi-traveler.com/wp-content/uploads/2024/04/設定を保存-1024x619.jpg)
OGPが設定されているかは、「ラッコツールズ」「SEO META in 1 CLICK」などで確認できます。
※BASIC認証が設定されていると、うまく表示ができない事があります。
表示が崩れている箇所はないか
作成されたWebサイトは、PCやスマホなど様々なデバイスで閲覧されることが想定されます。
サイト公開前に以下のような環境で、サイトの表示を確認をしておきましょう。
・PC(1920px以上、1919px~1441px、1440px~1025px)
※Chromeの検証ツールなどを活用して確認、Mac・Windows双方で確認できるとGood!
・タブレット
・スマホ
※PCと同様にMac・Windows双方で確認できるとGood!
サイトのバックアップ対策は行われているか
WordPressでは、不測の事態に備えて定期的にバックアップを取っておくことが推奨されます。
方法としては、サーバーのバックアップ機能やプラグインを活用した方法があります。
ここでは、バックアッププラグインの代表的なものをご紹介します。
- BackWPup
- UpdraftPlus
- All-in-One WP Migration
それぞれに特徴がありますので、必要に応じてサイトのバックアップを進めていきましょう。
管理画面へのセキュリティ対策は行われているか
WordPressサイトへの攻撃の多くは、ログイン画面に対して行なわれます。
そのためログイン画面のURLをデフォルトのものから変更していないと、一斉攻撃の対象になりやすいためサーバーにアップ後は対策を検討していきましょう。
ログイン画面のURL変更は、「SiteGurad WP Plugin」プラグインで設定できるため実装していきます。
![](https://toshi-traveler.com/wp-content/uploads/2024/04/siteguard.jpg)
「プラグイン」➔「新規プラグインを追加」を選択して、プラグインの検索…に「SiteGurad WP Plugin」と入力しプラグインをインストール ➔ 有効化します。
![](https://toshi-traveler.com/wp-content/uploads/2024/04/ログインページ変更.jpg)
プラグインが有効化されると、管理画面にSiteGuardの項目が追加されるので選択し「ログインページ変更」をクリックします。
![](https://toshi-traveler.com/wp-content/uploads/2024/04/URL変更.jpg)
変更後のログインページ名のところに、「login_○○○○○」と設定がされているかと思います。
こちらはSiteGuardで自動設定されるもののため、パスワード生成ツールなどを使って複雑化をしておきましょう。
変更したログインページ名は、忘れずにログイン情報として記録しておきましょう。
![](https://toshi-traveler.com/wp-content/uploads/2024/04/リダイレクトしないにチェック.jpg)
また、この状態では「サイトURL」+「wp_admin」と入力するとログイン画面に入れてしまうため
オプションの「管理者ページからログインページへリダイレクトしない」にチェックを入れることにより
先程の「サイトURL」+「wp_admin」での侵入を防ぐことができるようになります。
最後に「設定を保存」をクリックして、ログイン画面へのセキュリティが効いているか確認しましょう。
![](https://toshi-traveler.com/wp-content/uploads/2022/07/download-300x153.jpg)
まとめ
初級編はここで終了となります。
コードを書くこともなく、
ブロックエディタだけで美容室ヘアサロンのサイトを作ることができました!
ブロックの組み合わせと画像の入れ替えで
雰囲気の違うサイトを作ることもできるので、ぜひ挑戦してみてくださいね。
ここまで完了できたら、
アウトプットを兼ねてぜひX(旧Twitter)で とし @ToshiTraveler をメンションしてくださいね。
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-27-14.39.03.jpg)
しっかりアウトプットしてくれた方は、僕のフォロワー数 1万人超えのアカウントで拡散します!
アウトプット事例
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-27-14.17.06.jpg)
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-27-14.17.49.jpg)
![](https://toshi-traveler.com/wp-content/uploads/2024/03/2024-03-27-14.19.24-786x1024.jpg)
ぜひアウトプットしてみくてください!
次の中級編では、IT関係のWebサイトを制作していきます。
興味がある方は、ぜひこちらもチャレンジしてみてください!
![](https://toshi-traveler.com/wp-content/uploads/2024/03/Group-71-1-300x158.jpg)
無料登録でプレゼント
筆者としが運営するWEB制作支援コミュニティの公式LINEでは、無料登録でプレゼントを複数手に入れることができます。興味がある方は下記よりご登録ください。
\ LINE登録はこちら /
プレゼントの例はこちら。
・有益情報が満載の動画が多数のYouTube『とし Web制作フリーランス育成コーチ 』
・あなたの性格タイプがわかり営業に活かせる『ソーシャルスタイル診断』
・案件獲得ができるようになる『案件獲得ロードマップ』
・副業、フリーランスで成功した人たちの成功インタビューを集めた『講座生実績』
など様々なコンテンツを提供中です。
公式LINEご登録後のたった10秒のアンケートにご回答後に写真のメニューから選択できます。
ご興味ある方は、ぜひ確認してみてください。
![](https://toshi-traveler.com/wp-content/uploads/2022/07/download_file.jpg)
\ LINE登録はこちら /