「BusinessPress」は国産の無料WordPressテーマです。
GPLライセンス・無料・商用利用可・カスタマイズ自由。
ブロックエディター(Gutenberg)に完全対応。
レスポンシブデザイン。
コーポレート型(ビジネスサイト)テーマ。
架空のWEBサイトを制作するという脳内設定シリーズ。
前回に引き続き、BusinessPressでのサイト制作「その7」。
前回は、トップページのコンテンツ作成の途中まで進みました。
これを最終回までに、以下の状態にまで作り上げます。
*TAKADAパソコン教室 – ○○県○○市 初心者でも安心なPC教室
(架空のサンプルサイトです)

今回もコンテンツ作成の続きです。
前回同様にブロックエディター(Gutenberg)を使って作っていきます。
目次
「受講までの流れ」の見出し作成
まずは「受講までの流れ」を作成します。
この箇所↓

その見出しから作ります。
ここは前回・前々回の、見出しと手順は同じです。

「受講までの流れ」の内容を作成
続いて「流れ」の内容部分。
ここのブロックは「フロー」を使います。
プラグイン「VK Blocks」によって追加されたブロックです。

ブロックを入れると、

「項目のタイトル」
「説明文」
「画像」
これをそれぞれ入れていきます。
さらに右の設定欄にて「矢印を表示する」を選択。

さらにブロックをグループ化し、

そのグループを「幅広」に変更します。

ページを更新すると以下のように表示されます。

この要領で「フロー」ブロックを積み重ねていきます。
そして最後の「フロー」ブロックのみ、

「矢印を表示しない」にします。
ページを更新すると以下のように表示されます。

「お申込・お問合せ」の作成
次は、この箇所です。

白背景で縦長ページがだらだら続くコンテンツの中では一際目立つ箇所で、
「申込・お問合せください!!!」
と、アピールしています。
ここのブロックは「カバー」を使います。

「カバー」を入れると、まずは背景画像を入れていきます。

背景画像は、PC表示を考えて横は2200px以上ほしいところです。
このサイトでは「2200px×819px」の画像を入れています。
画像を入れると、上に文字を載せることができます。

ここは
「お申込・お問合せはこちらからTEL : 000-0000-0000」
と入れます。
この中の電話番号は目立たせたいので
エンターキーを押して段落を入れて
「お申込・お問合せはこちらから」
「TEL : 000-0000-0000」
2行に分けてから、右の設定欄から文字の大きさと太さを調整します。
このサイトでは、上の行の文字を小さく、下の行は太字にしています。
さらに、文章の最後でわざとエンタキーを押します。

すると、画像右に「+」マークが現れて、

画像内にもう一つ別なブロックを入れられるようになります。
「+」をクリックし、「ボタン」ブロックを選択。

ボタンに「無料体験学習お申込」と入れ、さらにその右の「+」をクリック。

右側のボタンには「お問い合わせ」と入力します。
ボタンの形状や色は、それぞれのボタンを選択した状態で右の「設定欄」から入力。

このサイトでは、色は
◇左のボタン:メインカラー(#00bcd4)
◇右のボタン:アクションカラー(#ff6f61)
角丸半径は「10」pxに設定しています。
さらに、2つのボタン全体のブロックを選択し、
(選択すると薄い青い枠線が表示されます)

「中央揃え」をクリック。

これで2つのボタンがセンター寄りになります。
最後に、画像全体のブロックを選択して「全幅」をクリック。

さらに右の「設定欄」にてメディア設定を「固定背景」にします。

これを設定すると、パララックス効果で背景画像が固定され、スクロールされず、格好良くなります。
ページを更新すると以下のように表示されます。

「お申込・お問合せ」ブロックの各表示パターン
この「お申込・お問合せ」ブロック、「固定背景画像」を使っているため、一部ブラウザや一部端末によって表示パターンが若干異なります。
◇IE11:該当箇所のスクロールがやや粗くなります。
◇iPhone:固定背景画像が効かなくなり、スクロールされます。
「IE11」は、特有のスムーズスクロールという機能が影響して、スクロールが粗くなってしまいます。
「iPhone」では、固定背景画像が真っ黒になるというバグがあるため、仕様上あえて固定背景画像を無効化させているようです。
なのでiPhoneで見ると、この箇所の画像は固定されません。
これが面倒くさく感じる人は、「固定背景画像」は設定しなくても良いと思います。
「お申込・お問合せ」ブロックの再利用ブロック化
この「お申込・お問合せ」ブロックですが、他の箇所や他のページでも同じものを使います。
何度も作るのが面倒くさいブロックなので、手間を省くため、これを「再利用ブロック」に設定します。
「お申込・お問合せ」ブロックを選択し、「再利用ブロックに追加」をクリック。

任意の名称を入れて「保存」ボタンをクリック。

ここで必ずページを更新。
こうすると、後で同じものが必要な時に再利用が可能となります。
ただし一旦、再利用化すると、そのブロック内の編集が出来なくなります。
ご注意ください。
ブロックで困ったときは(その3)
「再利用化」とは別に、同じようなブロックをサクッと入れたいときには「コピー」又は「複製」という機能も使えます。
たとえば、今回作成した「受講までの流れ」などでは同じものが続くので、

ブロックを選択⇒「コピー」又は「複製」
「コピー」はクリップボードへのコピー。
「複製」は同一のブロックがもう一つ作成されます。
どちらでも似たようなものですが、私は「複製」の方が分かりやすいのでこちらを使っています。
今回はここまで
今回はトップページのコンテンツのうち、
「受講までの流れの見出し」(見出しブロック)
「受講までの流れの内容」(フローブロック)
「お申込・お問合せ」(カバーブロック)
この3つを作成しました。

次回もコンテンツ作成の続きを解説します
おそらくトップページのコンテンツ作成に関しては、次回で完結すると思います(たぶん)。
