こんにちは。プログラマーNです。
今回はWordPressで店舗サイト(店舗のホームページ)を作成する方法(第6回目)です。
わかりやすく、すぐに作成できるような内容ですので、ご覧下さい。
↓使用しているサーバー、テーマ↓
レンタルサーバー… エックスサーバー![](https://www11.a8.net/0.gif?a8mat=3H3PEY+8RJREA+CO4+609HU)
PR
テーマ…BusinessPress
今回も引き続き、トップページを作成していきます。
(トップページ内の画像上にテキストやボタン配置(カバー)、お客様の声を作成、再利用ブロックでカバーを作成)
トップページの作成
画像上にテキスト、ボタン配置 (カバー)
「カバー」ブロックは簡単に画像の上にテキスト、ボタンを載せることができます。
さらに画像を固定する設定により、サイトの画面をスクロールさせたときに、画像に動きが出るので、かっこよく、是非、使用したいブロックです。
![](https://www.babystep36.com/wp-content/uploads/2021/02/113-800x313.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/114.jpg)
「+」→「カバー」を選択
![](https://www.babystep36.com/wp-content/uploads/2021/02/115-800x303.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/116-800x367.jpg)
画像を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/02/117-800x384.jpg)
テキストを入力→フォントサイズ調整→「Enter」キー→「+」ボタンを押します。
(右側「ブロック」タブでフォントサイズが調整できます)
![](https://www.babystep36.com/wp-content/uploads/2021/02/118-800x437.jpg)
「ボタン」を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/02/119-800x452.jpg)
「ボタン」のテキストは直接入力し、それ以外の設定は右側「ブロック」タブで「色設定」などを設定します。
![](https://www.babystep36.com/wp-content/uploads/2021/02/120-1.jpg)
ボタンの色は「カスタマイズ」で設定した「リンクカラー」、「リンクホバーカラー」の色を使いました。
「お問い合わせ」ボタンは「リンクカラー」、「ご予約はこちら」ボタンは「リンクホバーカラー」です。
↓カスタマイズの色設定↓
![](https://www.babystep36.com/wp-content/uploads/2021/02/121-800x737.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/125.jpg)
「リンク」で「ボタン」のリンク先を設定します。
![](https://www.babystep36.com/wp-content/uploads/2021/02/122-1-800x428.jpg)
「ボタン」を配置した「ブロック」を選択し、「配置を変更」→「中央揃え」にします。
①「カバー」全体を選択→②右「ブロック」タブ「固定画像」をON→③「配置を変更」を「全幅」
![](https://www.babystep36.com/wp-content/uploads/2021/02/123-800x266.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/124-800x266.jpg)
プレビューで確認すると、サイト画面をスクロールし、画像が固定されているので、見栄えが良いですね。
↓「カバー」ブロックの詳細設定は下記をご覧ください。
お客様の声
お客様の声の見出しを作成します。(「幅広」まで完了する)
![](https://www.babystep36.com/wp-content/uploads/2021/02/126.jpg)
「ブロック」で「枠線ブロック」を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/02/127-800x157.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/128.jpg)
右「ブロック」タブで「スタイル」、「色」を設定します。
「色」は男性…青、女性…赤にしてみます。
![](https://www.babystep36.com/wp-content/uploads/2021/02/129-800x269.jpg)
「枠線ブロック」でタイトル、本文を入力します。
「枠線ブロック」全体をグループ化し、「幅広」にします。
![](https://www.babystep36.com/wp-content/uploads/2021/02/130-800x369.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/131-800x266.jpg)
↓↓プレビューで確認↓↓
![](https://www.babystep36.com/wp-content/uploads/2021/02/132-800x261.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/133-800x431.jpg)
同じように「枠線ブロック」でお客様の声を作成します。
再利用ブロック
もう一度「カバー」を作成したいとします。
作成済みの「カバー」を使用したいので、前回作成した「カバー」を選択→「再利用ブロックに追加」→「再利用ブロック」の名前を入力→「保存」でブロックを更新します。
![](https://www.babystep36.com/wp-content/uploads/2021/02/134-800x258.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/135-800x490.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/136-800x456.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/137.jpg)
「+」→すべて表示→「再利用」タブで保存した「カバー」を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/02/138-800x570.jpg)
「再利用ブロック」のカバーが設定できました。
動画はこちら
(「動画の第4回目」は「当ブログの第6回目」(今ブログ)です。)
今回は以上です。次回はメニューページを作成していきます。
↓使用しているサーバー、テーマ↓
レンタルサーバー… エックスサーバー![](https://www11.a8.net/0.gif?a8mat=3H3PEY+8RJREA+CO4+609HU)
PR
テーマ…BusinessPress
![](https://www.babystep36.com/wp-content/uploads/2021/02/BusinessPress_11-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/BusinessPress_10-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/BusinessPress_9-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/BusinessPress_8-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/BusinessPress_7-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/02/BusinessPress_5-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/01/BusinessPress_4-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/01/BusinessPress_3-1-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/01/BusinessPress_2-160x90.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/01/BusinessPress_1-1-160x90.jpg)
コメント