「BusinessPress」は国産の無料WordPressテーマです。
GPLライセンス・無料・商用利用可・カスタマイズ自由。
ブロックエディター（Gutenberg）に完全対応。
レスポンシブデザイン。
コーポレート型（ビジネスサイト）テーマ。
架空のWEBサイトを制作するという脳内設定シリーズ。
前回に引き続き、BusinessPressでのサイト制作「その８」。
前回は、トップページのコンテンツ作成の途中まで進みました。
これを最終回までに、以下の状態にまで作り上げます。
＊TAKADAパソコン教室 – ○○県○○市 初心者でも安心なPC教室
（架空のサンプルサイトです）
今回もコンテンツ作成の続きです。
前回同様にブロックエディター（Gutenberg）を使って作っていきます。
～ 目次 ～
- 「受講生の声」を作成
- 「受講生の声」：見出しを作成
- 「受講生の声」：受講生感想を作成
- 「受講生の声」：担当講師のアンサーを作成
- 「よくあるご質問」を作成
- 「よくあるご質問」：見出しを作成
- 「よくあるご質問」：Q＆Aの部分を作成
- 「お申込・お問合せ」の再利用ブロックを使用
- コンテンツ間の間隔調整
- ブロックで困ったときは（その４）
- 今回はここまで
「受講生の声」を作成
今回、まずは「受講生の声」を作成します。
この箇所↓
３つのブロックで構成されています。
１，見出し（＊幅広）
２，受講生感想（＊幅広）
３，講師からのアンサー・評価（＊普通）
この後は「２」「３」を２回繰り返します。
「受講生の声」：見出しを作成
見出しから作ります。
ここは「その５～７」での、見出し作成と手順は同じです。
「受講生の声」：受講生感想を作成
続いて「受講生の感想」部分。
ここのブロックは「枠線ボックス」を使います。
プラグイン「VK Blocks」によって追加されたブロックです。
ブロックを入れると、
「項目のタイトル」
「住所・氏名・年齢等」
「感想文」
これをそれぞれ入れていきます。
「住所・氏名・年齢等」と「感想文」の箇所は、エンターキーを押すとそれぞれの段落に分かれます。
「枠線ボックス」全体を選択して、右の設定欄から
スタイルを「直線 角丸 タブ」に。
線の色は、受講生が男性なら「青」、女性なら「オレンジ」を選びます。
ブロックを「グループ化」し、
「幅広」に変更
ここから、個々の文字色と文字の太さを変更します。
まず、項目タイトルの文字列をドラッグで選択し、下記箇所をクリック↓
ここは部分的な装飾をする場合などに使います。
で、「文字色」をクリック。
「黒」をクリック。
これで項目タイトルは黒字になります。
今度は「住所・氏名・年齢等」をドラッグし、太字に変更。
さらに「住所・氏名・年齢等」を選択した状態で、右の設定欄から「青」をクリック。
（＊ここの色も、受講生が男性なら青、女性ならオレンジを選びます）
これで「住所・氏名・年齢等」の文字は、太い青字になります。
ページを更新してください。
以下のように表示されます。
「受講生の声」：担当講師のアンサーを作成
ここのブロックは「カラム」を使います。
カラムを入れると「30/70」をクリック。
カラムは「その６」で一度解説してるので詳しい説明は端折ります。
今回は「30/70」を使います。
右の「＋」と、左の「＋」が表示されるので
それぞれ、
◇右の「＋」：画像
◇左の「＋」：見出し（担当講師・杵築より）・文字（アンサーの文章）
と入れていきます。
見出しは
「H3」「装飾無し」
「背景色：#e1ffff（薄いメインカラー）」
を使ってください。
ここのブロックは「幅広」にはせず、通常のままでOKです。
主役はあくまでも受講生の感想文で、アンサーは脇役なのでわざと小さいサイズのままにしておきます。
で、ページを更新。
この後は
「受講生感想」
「担当講師アンサー」
この２つを繰り返していきます。
「よくあるご質問」を作成
次は、この箇所です。
２種類のブロックで構成されています。
１，見出し（＊幅広）
２，Q&Aの部分（＊幅広）
この後は「２」を数回繰り返します。
「よくあるご質問」：見出しを作成
見出しから作ります。
ここは今までの、見出し作成と手順は同じです。
「よくあるご質問」：Q＆Aの部分を作成
Q＆A（質問と答え）の部分を作成します。
ここは「新FAQ」ブロックを使います。
似たようなブロックに「旧FAQ」がありますが、こっちは古いバージョンなので「新FAQ」を使ってください。
質問と回答の箇所にそれぞれ文字を入れます。
実は、「新FAQ」ブロックは、ブロック同士が入れ子構造になっています。
で、それぞれのブロックを選択すると分かりますが、子ブロックである「質問」と「回答」は簡単にクリックできるのに対して、それを囲む「新FAQ」ブロック全体はクリックするのに苦労します。
そういう時は、ブロックの下に表示されている薄い線をクリックしてみてください
よーく見ないと気づかない薄線ですが、こいつをクリックすると一発で選択できます。
ま、ややこしいですな。ホントに(^_^;)
「新FAQ」ブロック全体をクリックすると、右側の設定欄より
「背景塗り角丸」を選択。
ここで「Q」と「A」の形状を決定します。
そして、いつものように「グループ化」
さらに「幅広」に。
ページを更新すると以下のように表示されます。
「よくあるご質問」の箇所はこれで完成です。
以後、この「新FAQ」ブロックを繰り返して作成していきます。
「お申込・お問合せ」の再利用ブロックを使用
「よくあるご質問」の下には、前回に作った「お申込・お問合せ」をもう一度入れます。
ブロック作成用の「＋」をクリックして、「再利用可能」のタブを開き、以前に作っておいた「お申込・お問合せブロック」をクリック。
ページを更新すると以下のように表示されます。
コンテンツ間の間隔調整
これでトップページのコンテンツは完成です。
ただ、よ～く見るとそれぞれのコンテンツとコンテンツの間が微妙に狭かったりします。
なんだか余裕が無くて、もうちょっと間隔・余白がほしいところですね。
そういう場合は「スペーサー」ブロックか、
「レスポンシブスペーサー」ブロックをコンテンツ間に入れて、間隔を作ります。
両方とも間隔を空けるためのブロックです。
両者の違いは、
◇スペーサー
⇒シンプルに間隔を作る。
◇レスポンシブスペーサー
⇒見る端末（PC・タブレット・スマホ）ごとに間隔を作る。レスポンシブ設定。
となります。
どちらを使っても良いです。
間隔は右側の設定欄から設定可能です。
コンテンツ間の間隔・余白はサイトの業種や、作る側の美意識にも左右されるので、ここはご自身のセンスで入れてみてください。
また、コンテンツ間にスペーサー等を入れる場合は、ブロックを選択した上で
「前に挿入」「後に挿入」を使うと便利です。
ちなみに、このサンプルサイトの場合は、全て「スペーサー」で間隔を空けています。
ブロックで困ったときは（その４）
WordPressのブロックエディターを使う場合にしばしば悩まされるのが、ブロックの入れ子構造です。
今回作成した「よくあるご質問」のQ&Aの箇所も、最終的には、幅広にするためグループ化したことから、
なんと３重構造になっています。
そしてそれぞれのブロックが選択可能になるため、誤クリックが生じやすいです。
ブロックの入れ子構造でよくある間違いは、だいたい以下の３パターン。
１，ブロックの下に別なブロックを作ろうとしたら、間違ってブロックの中にブロックを作ってしまった。
２，ブロックの中に別なブロックを作ろうとしたら、間違ってブロックの外にブロックを作ってしまった。
３，誤クリックで、全然違うブロックを選択していた。
この記事シリーズに沿ってサイトを作成される人は、サンプルサイトと表示が違うものなった場合、上記３点のどれかを疑ってみててください。
だいたい誰でも、ブロック作成で何回かはヘマをするのが普通です。
要は慣れですよ、慣れ。
今回はここまで
今回はトップページのコンテンツのうち、
◇「受講生の声：見出し」（見出しブロック）
◇「受講生の声：受講生感想」（枠線ボックスブロック）
◇「受講生の声：講師アンサー」（カラムブロック）
◇「よくあるご質問：見出し」（見出しブロック）
◇「よくあるご質問：Q&A」（新FAQブロック）
◇「お申込・お問合せ」（カバーブロックの再利用）
この６つを作成しました。
これでトップページは完成です。
長かったですね～(^｡^;)
次回は「ブログ」の作成について解説します。
