WordPressテーマ「BusinessPress」でWEBサイトを制作(その7)続々・トップページのコンテンツ作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その7)続々・トップページのコンテンツ作成

BusinessPress」は国産の無料WordPressテーマです。

BusinessPress

GPLライセンス・無料・商用利用可・カスタマイズ自由。
ブロックエディター(Gutenberg)に完全対応。
レスポンシブデザイン。
コーポレート型(ビジネスサイト)テーマ。

架空のWEBサイトを制作するという脳内設定シリーズ。
前回に引き続き、BusinessPressでのサイト制作「その7」。

前回は、トップページのコンテンツ作成の途中まで進みました。

これを最終回までに、以下の状態にまで作り上げます。
TAKADAパソコン教室 – ○○県○○市 初心者でも安心なPC教室
(架空のサンプルサイトです)

今回もコンテンツ作成の続きです。
前回同様にブロックエディター(Gutenberg)を使って作っていきます。

~ 目次 ~

  • 「受講までの流れ」の見出し作成
  • 「受講までの流れ」の内容を作成
  • 「お申込・お問合せ」の作成
  • 「お申込・お問合せ」ブロックの各表示パターン
  • 「お申込・お問合せ」ブロックの再利用ブロック化
  • ブロックで困ったときは(その3)
  • 今回はここまで

「受講までの流れ」の見出し作成

まずは「受講までの流れ」を作成します。
この箇所↓

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

「受講までの流れ」の内容を作成

続いて「流れ」の内容部分。
ここのブロックは「フロー」を使います。
プラグイン「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つを作成しました。

次回もコンテンツ作成の続きを解説します

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

 

ken
ブロックの中にさらにブロックを入れて・・と。こういう「入れ子構造」ができるのがブロックの良さであり、かつ、その解説を面倒くさくさせています(ー_ー;)

 

関連記事
WordPressテーマ「BusinessPress」でWEBサイトを制作(その12)追加応用編

WordPressテーマ「BusinessPress」でWEBサイトを制作(その12)追加応用編

2020.10.01
WordPressテーマ「BusinessPress」でWEBサイトを制作(その11)各固定ページの作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その11)各固定ページの作成

2020.09.28
WordPressテーマ「BusinessPress」でWEBサイトを制作(その10)続・ブログページの作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その10)続・ブログページの作成

2020.09.23
WordPressテーマ「BusinessPress」でWEBサイトを制作(その9)ブログページの作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その9)ブログページの作成

2020.09.17
WordPressテーマ「BusinessPress」でWEBサイトを制作(その8)続々続・トップページのコンテンツ作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その8)続々続・トップページのコンテンツ作成

2020.09.10
WordPressテーマ「BusinessPress」でWEBサイトを制作(その6)続・トップページのコンテンツ作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その6)続・トップページのコンテンツ作成

2020.08.27
WordPressテーマ「BusinessPress」でWEBサイトを制作(その5)トップページのコンテンツ作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その5)トップページのコンテンツ作成

2020.08.24
WordPressテーマ「BusinessPress」でWEBサイトを制作(その4)プラグインの各設定

WordPressテーマ「BusinessPress」でWEBサイトを制作(その4)プラグインの各設定

2020.08.19
WordPressテーマ「BusinessPress」でWEBサイトを制作(その3)テーマの各設定

WordPressテーマ「BusinessPress」でWEBサイトを制作(その3)テーマの各設定

2020.08.12
WordPressテーマ「BusinessPress」でWEBサイトを制作(その2)ページ構成・配色構想

WordPressテーマ「BusinessPress」でWEBサイトを制作(その2)ページ構成・配色構想

2020.08.06
WordPressテーマ「BusinessPress」でWEBサイトを制作(その1)準備編

WordPressテーマ「BusinessPress」でWEBサイトを制作(その1)準備編

2020.08.03
テーマの知識が無いと困る!? 今後のWordPress制作

テーマの知識が無いと困る!? 今後のWordPress制作

2017.08.09

 

PRリンク