こんにちは。プログラマーNです。
WordPressのテーマ、「Snow Monkey」でヨガスタジオのホームページを作成する方法の第6回目です。(全7回)
ご自身でホームページを作成する場合、どのようにすれば作成できるか迷いませんか?
内容をしっかり把握してしまえば、それほど難しくはないです。
この記事のシリーズをご覧になることで、ホームページを楽に作成することができます。
【デモサイト】
WEBサイト「仮想Yoga」
![](https://www16.a8.net/0.gif?a8mat=3H3PEY+8RJREA+CO4+6BU5T)
PR
「コース・クラス」ページ
「コース・クラス」ページの内容紹介
第2回目の内容で「コース・クラス」ページを作成しました。
「コース・クラス」ページでは下記のような内容にします。
- 価格表
- 再利用ブロックを使用し、「お問い合わせ」、「ご予約ボタン」設置
「コース・クラス」ページの設定
4つの価格表を表示してみます。
「価格表」を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/07/001-1.jpg)
(下記のように表示されます)
![](https://www.babystep36.com/wp-content/uploads/2021/07/002-1-800x214.jpg)
画像、文章(タイトル、金額、内容など)を入力します。
![](https://www.babystep36.com/wp-content/uploads/2021/07/003-1-800x814.jpg)
価格表を増やす際は、右側の「+」を押します。
![](https://www.babystep36.com/wp-content/uploads/2021/07/004-1.jpg)
4つの価格表を1行におさめると、横にスクロールしてしまいますので、2行にします。
2行×2列の価格表にします。
下の「+」を押し、「価格表」ブロックを選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/07/005-1-800x372.jpg)
(下記のように表示されます)
![](https://www.babystep36.com/wp-content/uploads/2021/07/006-1-800x284.jpg)
1行目の価格表と同じように設定します。
![](https://www.babystep36.com/wp-content/uploads/2021/07/007-1-800x405.jpg)
再利用ブロックで、「お問い合わせ」、「ご予約」ボタンを設置します。
![](https://www.babystep36.com/wp-content/uploads/2021/07/008-1.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/07/009-1-800x301.jpg)
「インストラクター」ページ
4人のスタッフを紹介します。
「インストラクター」ページの設定
あらかじめ作成されているパターンを使用します。
パターンタブ「カラム」→「画像を含むカラムのテキスト」を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/07/010-1.jpg)
(下記のように表示されます)
![](https://www.babystep36.com/wp-content/uploads/2021/07/011-1-800x407.jpg)
画像を選択し、画像を変更していきます。
![](https://www.babystep36.com/wp-content/uploads/2021/07/012-1-800x764.jpg)
ツールバーの「置換」を選択後、(メディアライブラリを開く or アップロードで)画像を変更します。
![](https://www.babystep36.com/wp-content/uploads/2021/07/013-1.jpg)
(下記のように該当の画像に変更)
![](https://www.babystep36.com/wp-content/uploads/2021/07/014-1-800x726.jpg)
右メニュー(ブロックタブ選択)の「スタイル」で「流体シェイプ3」を選択してみます。
![](https://www.babystep36.com/wp-content/uploads/2021/07/015-1.jpg)
(下記のように表示されます)
![](https://www.babystep36.com/wp-content/uploads/2021/07/016-1.jpg)
スタッフの画像を増やしたいので、「+」ボタンを押します。
![](https://www.babystep36.com/wp-content/uploads/2021/07/017-1-800x377.jpg)
4人のスタッフを表示しました。
![](https://www.babystep36.com/wp-content/uploads/2021/07/018-1-800x405.jpg)
「スタジオ」ページ
スタジオの画像を表示します。
「スタジオ」ページの設定
「インストラクター」ページと同じようにパターンを使用します。
パターンタブ「ギャラリー」→「2つ並べて表示された画像」を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/07/019-1.jpg)
(下記のように表示されます)
![](https://www.babystep36.com/wp-content/uploads/2021/07/020-1-800x343.jpg)
画像を変更します。
画像選択後、右上の「画像の置き換え」を押します。
![](https://www.babystep36.com/wp-content/uploads/2021/07/021-1-800x689.jpg)
(画像変更後、下記のように表示されます)
下に画像を追加する箇所(アップロード or メディアライブラリ)があります。
画像を追加していきます。
![](https://www.babystep36.com/wp-content/uploads/2021/07/022-1-800x335.jpg)
画像選択後、右下の「ギャラリーを追加」で画像が追加されます。
![](https://www.babystep36.com/wp-content/uploads/2021/07/023-1-800x399.jpg)
(下記のように表示されます)
![](https://www.babystep36.com/wp-content/uploads/2021/07/024-1-800x370.jpg)
右メニュー(ブロックタブ)で「カラム」の数が変更できます。
「2」にしてみます。
![](https://www.babystep36.com/wp-content/uploads/2021/07/025-1-800x305.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/07/026-1-800x326.jpg)
まとめ
- 「コース・クラス」ページの設定
- 価格表
- 「お問い合わせ」、「ご予約」ボタンを設置(再利用ブロック)
- 「インストラクター」ページの設定(パターン)
- 「スタジオ」ページの設定(パターン)
- 「初めての方へ」の詳細内容(パターン)
次回のヨガスタジオのホームページを作成する方法の第7回目は、「アクセス」、(「ニュース」)、「お問い合わせ」ページを作成していきます!
次回の第7回目でヨガスタジオのホームページを作成する方法のシリーズは完了です。
ヨガスタジオのホームページを作成する方法 シリーズ
![](https://www.babystep36.com/wp-content/uploads/2021/05/【ヨガスタジオ】仮想店舗ホームページ作成-WordPress-1-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/05/【ヨガスタジオ】仮想店舗ホームページ作成-WordPress-2各ページ型のみ-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/06/【ヨガスタジオ】仮想店舗ホームページ作成-WordPress-3メニュー、ヘッダー、フッター-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/06/【ヨガスタジオ】仮想店舗ホームページ作成-WordPress-4トップページ-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/07/【ヨガスタジオ】仮想店舗ホームページ作成-WordPress-5初めての方へページ-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/07/【ヨガスタジオ】仮想店舗ホームページ作成-WordPress-7「アクセス」「ニュース」「お問い合わせ」ページ-160x90.jpg)
コメント