こんにちは。プログラマーNです。
WordPressのテーマ、「Snow Monkey」でヨガスタジオのホームページを作成する方法の第4回目です。(全7回)
ご自身でホームページを作成する場合、どのようにすれば作成できるか迷いませんか?
内容をしっかり把握してしまえば、それほど難しくはないです。
この記事のシリーズをご覧になることで、ホームページを楽に作成することができます。
【デモサイト】
WEBサイト「仮想Yoga」
![](https://www16.a8.net/0.gif?a8mat=3H3PEY+8RJREA+CO4+6BU5T)
PR
トップページ
トップページの内容
第2回目の内容でトップページを作成しました。
トップページでは下記のような内容にします。
- 「初めての方へ」の概要(画像有、画像を押すと「初めての方へ」ページへ遷移)
- 「コース・クラス」、「インストラクター」、「スタジオ」の概要(画像有、画像を押すと「コース・クラス」ページへ遷移)
- 最近の投稿した記事を表示し、記事を押すと「ニュース」ページの記事へ遷移
- お問い合わせボタンを画像の上に設置
「初めての方へ」の概要
「固定ページ」→「トップ」で「編集」を押します。
ブロックの選択は、本文をクリック後、右側の「+」を押します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/001-1-1-800x106.jpg)
「パネル」を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/002-1.jpg)
「パネル」ブロックが表示されました。
![](https://www.babystep36.com/wp-content/uploads/2021/06/003-1-800x196.jpg)
「画像」、「タイトル」、「内容」を入力します。
また、下記画面の赤枠を押すと、リンク先を設定できます。
![](https://www.babystep36.com/wp-content/uploads/2021/06/005-1.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/06/006-1.jpg)
入力後、「Enter」を押します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/007-1.jpg)
下記画面の「+」を押すと次のパネル項目が設定できます。
![](https://www.babystep36.com/wp-content/uploads/2021/06/008-1-800x207.jpg)
「項目」を選択します。
「項目(垂直レイアウト)」にしてみます。
![](https://www.babystep36.com/wp-content/uploads/2021/06/009-1.jpg)
1つ目のパネルと同じように追加し、3つのパネル項目を作成しました。
![](https://www.babystep36.com/wp-content/uploads/2021/06/010-1-800x792.jpg)
パネル全体を選択し、右側メニュー(「ブロック」タブ選択)の行あたりのカラム数を「3」にします。
(アニメーションも設定します)
![](https://www.babystep36.com/wp-content/uploads/2021/06/011-1.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/06/012-1-800x356.jpg)
「コース・クラス」、「インストラクター」、「スタジオ」の画像設置
「初めての方へ」の概要と「コース・クラス」の概要の間にスペースを設けます。
「スペーサー」ブロックを使用します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/013-1.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/06/014-1-800x188.jpg)
右側メニュー(ブロックタブ)の「ピクセル値での高さ」を「200」にします。
![](https://www.babystep36.com/wp-content/uploads/2021/06/015-1.jpg)
「項目」ブロックを選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/016-1.jpg)
(このように表示されます)
![](https://www.babystep36.com/wp-content/uploads/2021/06/017-800x114.jpg)
「タイトルを書く…」をクリックし、画像を選択します。
(※今から設定する画像はのちに削除します。画像は何でも良いです。
理由も後程後述します)
![](https://www.babystep36.com/wp-content/uploads/2021/06/018-1.jpg)
赤枠の「+」を押します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/019-1-800x435.jpg)
「バナー」を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/020-1.jpg)
右側「メニュー(ブロックタブ)」で、画像を選択します。
(※項目「バナー」を選択した画像は削除しません)
![](https://www.babystep36.com/wp-content/uploads/2021/06/021-2.jpg)
画像設定後、該当項目の子ブロックを選択し、ツールバーが表示されます。
![](https://www.babystep36.com/wp-content/uploads/2021/06/022-2.jpg)
赤枠のボタンを押し、「リンク先」を設定します。
リンク先は「コース・クラス」のページURLです。
![](https://www.babystep36.com/wp-content/uploads/2021/06/023-1.jpg)
最初に設定した画像を削除します。
削除理由は、「項目の種類」が「項目(バナー)」にしたかったのですが、「項目(スタンダード)」になっているためです。
![](https://www.babystep36.com/wp-content/uploads/2021/06/024-1-800x441.jpg)
赤枠の「縦三点リーダー」を押し、「ブロックを削除」を押します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/025-2.jpg)
該当項目の子ブロックが削除されました。
![](https://www.babystep36.com/wp-content/uploads/2021/06/026-1-800x316.jpg)
後は、前述の項目(バナー)で設定したように計3つの項目を作成します。
2つ目の項目は「インストラクター」(リンク先は「インストラクター」ページを設定)
3つ目の項目は「スタジオ」(リンク先は「スタジオ」ページを設定)
![](https://www.babystep36.com/wp-content/uploads/2021/06/027-1-800x251.jpg)
3つの画像をみると、3つ目の画像の高さが異なるため、画像の高さを同じようにします。
右側「メニュー(ブロックタブ)」で、「画像のアスペクト比」を「4:3」にします。
![](https://www.babystep36.com/wp-content/uploads/2021/06/028-1.jpg)
画像が同じ高さになりました。
![](https://www.babystep36.com/wp-content/uploads/2021/06/029-1-800x261.jpg)
項目全体を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/032-1-800x320.jpg)
右側「メニュー(ブロックタブ)」で、「行あたりのカラム数」を「3」にします。
![](https://www.babystep36.com/wp-content/uploads/2021/06/031-1.jpg)
最近の投稿
投稿した記事一覧を表示します。
(前述(「コース・クラス」、「インストラクター」、「スタジオ」の画像設置)のスペーサーを設置します。)
最近の投稿を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/033-1.jpg)
表示されました。
![](https://www.babystep36.com/wp-content/uploads/2021/06/034-1-800x365.jpg)
右側「メニュー(ブロックタブ)」で、「レイアウト」など設定できます。
(今回は何も変更しません)
![](https://www.babystep36.com/wp-content/uploads/2021/06/035-1.jpg)
(アニメーションは「フェード・イン」にしています)
![](https://www.babystep36.com/wp-content/uploads/2021/06/036.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/06/037-1.jpg)
(プレビューで確認)
該当の投稿(記事)を選択すると、その投稿(記事)のページへ移動します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/038-1-800x597.jpg)
お問い合わせ、ご予約
画像の上に「お問い合わせ」、「ご予約」ボタンを設置します。
下記でご用意しています動画がわかりやすいので、ぜひご覧ください。
(※前述「コース・クラス」、「インストラクター」、「スタジオ」の画像設置」と同じようにスペーサーを設置します)
「カバー」を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/039-1.jpg)
(カバーが表示されました。)
画像を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/040-1-800x232.jpg)
(右側に「+」ボタンが表示されない場合、カバー内ブロックの「Enter」を押し、次のブロックに進みます)
![](https://www.babystep36.com/wp-content/uploads/2021/06/041-1-800x323.jpg)
「+」ボタンを押します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/042-1-800x372.jpg)
「SNOW MONKEY BLOCKS[共通ブロック]」の「ボタン」を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/044-1.jpg)
(カバーブロック内にボタンが表示されました)
![](https://www.babystep36.com/wp-content/uploads/2021/06/043-1.jpg)
「ボタン」を下記内容に変更します。
- ボタンのテキストを入力
- 「ボタン」のツールバーでリンク先設定
- 「ボタン」のツールバーで位置を中央揃えにする
![](https://www.babystep36.com/wp-content/uploads/2021/06/047-1.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/06/050-1.jpg)
ツールバーの「SnowMonkeyのアイコン」を押すと、下記内容が変更できます。
![](https://www.babystep36.com/wp-content/uploads/2021/06/051-1.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/06/052-1.jpg)
「+」ボタンを押し、「ボタン」を追加します。
「お問い合わせ」ボタンと同じようにボタンを設定します。
リンク先は連携している予約システムのURLを設定します。
![](https://www17.a8.net/0.gif?a8mat=3H9YX6+EL4CC2+329G+60H7M)
![](https://www.babystep36.com/wp-content/uploads/2021/06/061.jpg)
![](https://www12.a8.net/0.gif?a8mat=3H9YX6+EL4CC2+329G+609HT)
PR
右側「メニュー(ブロックタブ)」で、「固定背景」をONにします。
(「固定背景」をONにすることにより、ページをスクロールすると、カバーブロックは他のブロック同様にスクロールしますが、画像は固定されているという状態です)
![](https://www.babystep36.com/wp-content/uploads/2021/06/053-1.jpg)
作成したカバーブロックは各ページで使用したいので、再利用ブロックに追加します。
カバーブロック全体を選択→ツールバー→「3点リーダー」ボタン→「再利用ブロックに追加」
![](https://www.babystep36.com/wp-content/uploads/2021/06/054.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/06/062-800x289.jpg)
右側「メニュー(ブロックタブ)」で「名前」を変更し、「更新」ボタンを押します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/056.jpg)
「保存」を押します。
![](https://www.babystep36.com/wp-content/uploads/2021/06/057.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/06/063-800x184.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/06/064-800x192.jpg)
まとめ
- トップページの内容
- 項目ブロックを使用し、「初めての方へ」の概要を設定
- 項目ブロックを使用し、「コース・クラス」、「インストラクター」、「スタジオ」の画像を設定
- 最近の投稿で投稿記事一覧を表示
- カバーブロックを使用し、画像の上に「お問い合わせ」、「ご予約」ボタンを設置
(「ご予約」ボタンのリンク先は連携した予約システム)
次回のヨガスタジオのホームページを作成する方法の第5回目は、「初めての方へ」ページを作成していきます!
ヨガスタジオのホームページを作成する方法 シリーズ
![](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/07/【ヨガスタジオ】仮想店舗ホームページ作成-WordPress-5初めての方へページ-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/07/【ヨガスタジオ】仮想店舗ホームページ作成-WordPress-6「コース・クラス」「インストラクター」「スタジオ」ページ-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/07/【ヨガスタジオ】仮想店舗ホームページ作成-WordPress-7「アクセス」「ニュース」「お問い合わせ」ページ-160x90.jpg)
コメント