WordPressが「6.1」にバージョンアップ

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

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

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

BusinessPress

架空のWEBサイト制作シリーズ。
前回に引き続き、BusinessPressでのサイト制作「その7」。

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

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

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

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

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

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

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

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

ブロックを入れると以下のように表示されます。

  • タイトル⇒無料体験お申込 or お問合せ
  • 説明文⇒*適当な文章を入れてください
  • 画像⇒*適当な画像を入れてください

右の設定欄にて「矢印を表示する」を選択。

さらに

  • ブロックをグループ化

そのグループ化をしたブロックを

  • 幅広」に変更します。

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

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

  • 矢印を表示しない」にします。

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

「お申込・お問合せ」の作成

次は、この箇所です。

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

ここのブロックは「カバー」を使います。

ここは手順がややこしいので、小見出しを入れて何段階に分けて解説します。

まずは背景画像を入れる

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

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

上に文字を載せる

画像を入れると、上に文字を載せることができます。

  • お申込・お問合せはこちらからTEL : 000-0000-0000」

と文章を入れます。

この文章を、途中でエンターキーを押して2行に分けます。

分かれました↓

そして、右側の設定欄から

  • この2行の色をそれぞれ「」に変更

文字の大きさを変更

  • 1行目⇒20px

2行目はそのままで大丈夫です。

以下のようになります。

ボタンを入れる

さらに、2行目の文章の最後でわざとエンタキーを押します。

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

画像内にもう一つ別なブロックを入れられるようになります。

「+」をクリックし、「ボタン」ブロックを選択。

ボタンに文字を入れます。

  • 無料体験学習お申込

さらにボタン全体のブロックを選択。
ここはややこしいのですが
画面左のリスト表示だと以下になります。

選択すると薄い青い枠線が表示されます。

右の「」をクリック。

右側にもう一つボタンが表示されるので

  • お問い合わせ」と入力

さらに2つのボタンを、それぞれ選択して
リンク先のURLを入力し、エンターキーを押します。

  • 無料体験お申し込みページURL入れ
  • お問い合わせページURL入れ

ボタンの背景の色と角丸半径は、
それぞれのボタンを選択した状態で、右の「設定欄」から入力。

  • 左のボタン:メインカラー(#00bcd4
  • 右のボタン:アクションカラー(#ff6f61
  • 角丸半径:「10」px

さらに、2つのボタン全体のブロックを選択し、
(選択すると薄い青い枠線が表示されます)

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

これで2つのボタンがセンター寄りになります。

画像全体を「全幅」に

最後に、画像全体のブロックを選択して

  • 全幅」をクリック。

さらに右の「設定欄」にて

  • メディア設定の「固定背景」をONにします。

これを設定すると、パララックス効果で背景画像が固定され、スクロールされず、格好良くなります。

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

「お申込・お問合せ」ブロック:iOS端末での表示パターン

この「お申込・お問合せ」ブロック、「固定背景画像」を使っているため、iOS端末(iPhoneやiPad)では表示パターンが若干異なります。

「iOS端末」で見ると、この箇所の画像は固定されず、スクロールされます。

iOS端末では、固定背景画像が真っ黒になるというバグがあるため、仕様上あえて固定背景画像を無効化させているようです。

これが面倒くさく感じる人は、「固定背景画像」は設定しなくても良いかと思います。

「お申込・お問合せ」ブロックの再利用ブロック化

この「お申込・お問合せ」ブロックですが、他の箇所や他のページでも同じものを使います。

何度も作るのが面倒くさいブロックなので、手間を省くため、これを「再利用ブロック」に設定します。

カバーブロック全体を選択し、

  • 再利用ブロックに追加」をクリック。
  • 任意の名称を入れて「保存」ボタンをクリック

ここで必ずページを更新

こうすると、後で同じものが必要な時に再利用が可能となります。

ただし一旦、再利用化すると、そのブロック内の編集が出来なくなります。
ご注意ください。

ブロックで困ったときは 5

「再利用化」とは別に、同じようなブロックをサクッと入れたいときには「コピー」又は「複製」という機能も使えます。

たとえば、今回作成した「受講までの流れ」などでは同じものが続くので、

  • ブロックを選択⇒「コピー」又は「複製

「コピー」はクリップボードへのコピー。
「複製」は同一のブロックがもう一つ作成されます。

どちらでも似たようなものですが、私は「複製」の方が分かりやすいのでこちらを使っています。

今回はここまで

今回はトップページのコンテンツのうち、
「受講までの流れの見出し」(見出しブロック)
「受講までの流れの内容」(フローブロック)
「お申込・お問合せ」(カバーブロック)
この3つを作成しました。

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

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

ken
ブロックの中にさらにブロックを入れて・・と。こういう「入れ子構造」ができるのがブロックの良さであり、かつ、その解説を面倒くさくさせています(ー_ー;)
関連記事
WordPressテーマ「BusinessPress」でWEBサイトを制作(その12)追加応用編
WordPressテーマ「BusinessPress」でWEBサイトを制作(その11)各固定ページの作成
WordPressテーマ「BusinessPress」でWEBサイトを制作(その10)続・ブログページの作成
WordPressテーマ「BusinessPress」でWEBサイトを制作(その9)ブログページの作成
WordPressテーマ「BusinessPress」でWEBサイトを制作(その8)続々続・トップページのコンテンツ作成
WordPressテーマ「BusinessPress」でWEBサイトを制作(その6)続・トップページのコンテンツ作成
WordPressテーマ「BusinessPress」でWEBサイトを制作(その5)トップページのコンテンツ作成
WordPressテーマ「BusinessPress」でWEBサイトを制作(その4)プラグインの各設定
WordPressテーマ「BusinessPress」でWEBサイトを制作(その3)テーマの各設定
WordPressテーマ「BusinessPress」でWEBサイトを制作(その2)ページ構成・配色構想
WordPressテーマ「BusinessPress」でWEBサイトを制作(その1)準備編
テーマの知識が無いと困る!? 今後のWordPress制作
PRリンク