「BusinessPress」は国産の無料WordPressテーマです。
GPLライセンス・無料・商用利用可・カスタマイズ自由。
ブロックエディター（Gutenberg）に完全対応。
レスポンシブデザイン。
コーポレート型（ビジネスサイト）テーマ。
架空のWEBサイトを制作するという脳内設定シリーズ。
前回に引き続き、BusinessPressでのサイト制作「その７」。
前回は、トップページのコンテンツ作成の途中まで進みました。
これを最終回までに、以下の状態にまで作り上げます。
＊TAKADAパソコン教室 – ○○県○○市 初心者でも安心なPC教室
（架空のサンプルサイトです）
今回もコンテンツ作成の続きです。
前回同様にブロックエディター（Gutenberg）を使って作っていきます。
～ 目次 ～
- 「受講までの流れ」の見出し作成
- 「受講までの流れ」の内容を作成
- 「お申込・お問合せ」の作成
- 「お申込・お問合せ」ブロックの各表示パターン
- 「お申込・お問合せ」ブロックの再利用ブロック化
- ブロックで困ったときは（その３）
- 今回はここまで
「受講までの流れ」の見出し作成
まずは「受講までの流れ」を作成します。
この箇所↓
その見出しから作ります。
ここは前回・前々回の、見出しと手順は同じです。
「受講までの流れ」の内容を作成
続いて「流れ」の内容部分。
ここのブロックは「フロー」を使います。
プラグイン「VK Blocks」によって追加されたブロックです。
ブロックを入れると、
「項目のタイトル」
「説明文」
「画像」
これをそれぞれ入れていきます。
さらに右の設定欄にて「矢印を表示する」を選択。
さらにブロックをグループ化し、
そのグループを「幅広」に変更します。
ページを更新すると以下のように表示されます。
この要領で「フロー」ブロックを積み重ねていきます。
そして最後の「フロー」ブロックのみ、
「矢印を表示しない」にします。
ページを更新すると以下のように表示されます。
「お申込・お問合せ」の作成
次は、この箇所です。
白背景で縦長ページがだらだら続くコンテンツの中では一際目立つ箇所で、
「申込・お問合せください！！！」
と、アピールしています。
ここのブロックは「カバー」を使います。
「カバー」を入れると、まずは背景画像を入れていきます。
背景画像は、PC表示を考えて横は2200px以上ほしいところです。
このサイトでは「2200px×819px」の画像を入れています。
画像を入れると、上に文字を載せることができます。
ここは
「お申込・お問合せはこちらからTEL : 000-0000-0000」
と入れます。
この中の電話番号は目立たせたいので
エンターキーを押して段落を入れて
「お申込・お問合せはこちらから」
「TEL : 000-0000-0000」
２行に分けてから、右の設定欄から文字の大きさと太さを調整します。
このサイトでは、上の行の文字を小さく、下の行は太字にしています。
さらに、文章の最後でわざとエンタキーを押します。
すると、画像右に「＋」マークが現れて、
画像内にもう一つ別なブロックを入れられるようになります。
「＋」をクリックし、「ボタン」ブロックを選択。
ボタンに「無料体験学習お申込」と入れ、さらにその右の「＋」をクリック。
右側のボタンには「お問い合わせ」と入力します。
ボタンの形状や色は、それぞれのボタンを選択した状態で右の「設定欄」から入力。
このサイトでは、色は
◇左のボタン：メインカラー（#00bcd4）
◇右のボタン：アクションカラー（#ff6f61）
角丸半径は「10」pxに設定しています。
さらに、２つのボタン全体のブロックを選択し、
（選択すると薄い青い枠線が表示されます）
「中央揃え」をクリック。
これで２つのボタンがセンター寄りになります。
最後に、画像全体のブロックを選択して「全幅」をクリック。
さらに右の「設定欄」にてメディア設定を「固定背景」にします。
これを設定すると、パララックス効果で背景画像が固定され、スクロールされず、格好良くなります。
ページを更新すると以下のように表示されます。
「お申込・お問合せ」ブロックの各表示パターン
この「お申込・お問合せ」ブロック、「固定背景画像」を使っているため、一部ブラウザや一部端末によって表示パターンが若干異なります。
◇IE11：該当箇所のスクロールがやや粗くなります。
◇iPhone：固定背景画像が効かなくなり、スクロールされます。
「IE11」は、特有のスムーズスクロールという機能が影響して、スクロールが粗くなってしまいます。
「iPhone」では、固定背景画像が真っ黒になるというバグがあるため、仕様上あえて固定背景画像を無効化させているようです。
なのでiPhoneで見ると、この箇所の画像は固定されません。
これが面倒くさく感じる人は、「固定背景画像」は設定しなくても良いと思います。
「お申込・お問合せ」ブロックの再利用ブロック化
この「お申込・お問合せ」ブロックですが、他の箇所や他のページでも同じものを使います。
何度も作るのが面倒くさいブロックなので、手間を省くため、これを「再利用ブロック」に設定します。
「お申込・お問合せ」ブロックを選択し、「再利用ブロックに追加」をクリック。
任意の名称を入れて「保存」ボタンをクリック。
ここで必ずページを更新。
こうすると、後で同じものが必要な時に再利用が可能となります。
ただし一旦、再利用化すると、そのブロック内の編集が出来なくなります。
ご注意ください。
ブロックで困ったときは（その３）
「再利用化」とは別に、同じようなブロックをサクッと入れたいときには「コピー」又は「複製」という機能も使えます。
たとえば、今回作成した「受講までの流れ」などでは同じものが続くので、
ブロックを選択⇒「コピー」又は「複製」
「コピー」はクリップボードへのコピー。
「複製」は同一のブロックがもう一つ作成されます。
どちらでも似たようなものですが、私は「複製」の方が分かりやすいのでこちらを使っています。
今回はここまで
今回はトップページのコンテンツのうち、
「受講までの流れの見出し」（見出しブロック）
「受講までの流れの内容」（フローブロック）
「お申込・お問合せ」（カバーブロック）
この３つを作成しました。
次回もコンテンツ作成の続きを解説します
おそらくトップページのコンテンツ作成に関しては、次回で完結すると思います（たぶん）。
