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

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

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

BusinessPress

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

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

前回で、ブログページを作成完了させました。
今回はトップページ以外の各固定ページを作っていきます。

基本的に、今回は複数ページにまたがるので、サラッと簡潔に記述します。
ブロックの構成・種類・設定内容のみの箇条書き解説になります。

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

~ 目次 ~

  • 講座紹介ページの作成
  • 講師紹介ページの作成
  • 無料体験学習お申込とお問い合わせページの作成
  • アクセスページの作成
  • 今回はここまで

講座紹介ページの作成

講座紹介

このページのブロックは以下のように構成されています。

1,「リスト」
2,「見出し」
3,「フロー」
4,「カバー」再利用化

1,「リスト
◇スタイル⇒チェック
◇リストアイコンの色⇒オレンジ
◇グループ化して幅広

2,「見出し
◇「その5」の見出しと同じ

3,「フロー
◇「その7」の「受講までの流れ」とほぼ同じ
◇違うのは、矢印の表示⇒矢印を表示しない

4,「カバー」再利用化
◇「その7」で作成、再利用化
◇「その8」で再利用の使用手順

講師紹介ページの作成

講師紹介

このページのブロックは以下のように構成されています。

1,「スタッフ」
2,「カバー」再利用化

1,「スタッフ
◇レイアウト⇒画像 左
◇色⇒プロフィールタイトル⇒濃いメインカラー(#049ca8)
◇グループ化して幅広

2,「カバー」再利用化
◇「その7」で作成、再利用化
◇「その8」で再利用の使用手順

無料体験学習お申込とお問い合わせページの作成

無料体験学習お申込
お問い合わせ

この2つのページのブロックは以下のように構成されています。

1,「見出し」
2,「段落」
3,「見出し」
4,「ショートコード」

1,「見出し
◇「その5」の見出しと同じ

2,「段落
◇段落を2つ使う
◇上の電話番号はアクションカラー(#ff6f61)

3,「見出し
◇「その5」の見出しと同じ

4,「ショートコード
◇ブロック「ショートコード」を使用。ショートコード記述用のブロック
◇プラグイン「Contact Form 7」のショートコードを書き込む
◇ここは幅広にせず、通常のまま。幅広にすると左に寄ってしまうため。

アクセスページの作成

アクセス

このページのブロックは以下のように構成されています。

1,「画像」
2,「見出し」
3,「段落」
4,「見出し」
5,「カスタム HTML」
6,「カバー」再利用化

1,「画像
◇画像の寸法⇒幅⇒600(px)
◇中央寄せ
◇ここは幅広にせず、通常のまま。

2,「見出し
◇「その5」の見出しと同じ

3,「段落
◇段落を2つ使う

4,「見出し
◇「その5」の見出しと同じ

5,「カスタムHTML
◇ブロック「カスタムHTML」を使用。htmlコード入力用ブロック。
◇Googleマップの「共有」⇒「地図を埋め込む」表示されたhtmlコードを記述
◇コード内の「width=”600″ height=”450″」を「width=”100%” height=”650″」に修正
◇グループ化し、幅広に。

6,「カバー」再利用化
◇「その7」で作成、再利用化
◇「その8」で再利用の使用手順

今回はここまで

今回はシンプル解説でしたが、以下の5ページを作成しました。

講座紹介
講師紹介
無料体験学習お申込
お問い合わせ
アクセス

\ よ~やく、これでサイトは完成です /

で、次回は最終回「応用編」として、気になった幾つかの箇所をCSSで調整します。

 

ken
やっとここまで来ました。ホッとしました(^。^;)

 

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

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

2020.10.01
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サイトを制作(その7)続々・トップページのコンテンツ作成

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

2020.09.04
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リンク