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

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

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

BusinessPress

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

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

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

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

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

~ 目次 ~

  • 二本の細線の作成
  • スペーサーを使った線は裏技
  • 「TAKADAパソコン教室の特徴」の見出しを作成
  • 「TAKADAパソコン教室の特徴」の3つの特徴部分を作成
  • ブロックで困ったときは(その2)
  • 今回はここまで

二本の細線の作成

では、トップページのお知らせコーナー下の「二本線」作成から続きを始めます。

「二本線」とは、サンプルサイトを見てもらうと分かりますが、これです↓

メインカラーとアクションカラーの2本の細い線です。

縦長のページの場合、コンテンツがダラダラと続くと飽きがくるので、途中でこの種のアクセントを入れます。

では、その作り方のご説明。
ブロックを追加し、「スペーサー」を選びます。

この「スペーサー」というのは、各ブロック間に間隔を入れるためのものです。
「間隔入れ用ブロック」だと思ってください。

これについては、次々回あたりで大いに解説しますが、今回は本来の機能として使いません。
細い線を入れるための裏技として使います。

スペーサーを入れて、

さらに右の設定欄から、「ピクセル値での高さ」を最小値の「20」に変更します。

スペーサーをグループ化し、

そのグループを「全幅」に変更。

で、右の設定欄から
色設定」⇒「背景色」をメインカラー(#00bcd4)に設定。

同じ手順で下に、もう1本のアクションカラー(#ff6f61)の線を入れます。

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

スペーサーを使った線は裏技

この「スペーサーを使った色付きの線」というのは、あくまでも裏技です。

背景色を付けて細い線を引くのは、今のブロックの種類の中では他に見当たらないため、やむえずこういう手法を取ってます。

いずれ、テーマやプラグインのアップデートなどで「色付き細線」の作成機能が追加されると良いですね。

「TAKADAパソコン教室の特徴」の見出しを作成

次に「TAKADAパソコン教室の特徴」を作成します。

ここは「見出し」と「3つの特徴」の2つのブロックで作ります。

まずは「見出し」から。
ここは前回の、お知らせの見出しと手順は同じです。

「TAKADAパソコン教室の特徴」の3つの特徴部分を作成

続いて3つの特徴部分。
ここのブロックは「カラム」を使います。

「カラム」を入れると、

パターンの選択で「33/33/33」の均等3分割を選びます。

3つのカラムが「+」で表示されます。

ここから、それぞれのカラムの中に
画像
見出し
段落
を、入れ子でこの3つのブロックを入れていきます。

左の「+」からクリックして、まずは「画像」から。
あらかじめ用意した画像を入れてください。

「画像」は入れるだけで、特に設定する必要は無いです。
ただ、出来るだけ800px以上の画像を入れてください。

続いて、カラム内のその下に「見出し」を入れます。
この箇所の見出しは「H3」に切替えてください

「無料体験学習が可能」と文字を入れて
テキストの配置」⇒「テキストの中央寄せ

さらに右の設定欄にて「装飾無し」を選択。

次に、カラム内のその下に「段落」を入れます。

ここは文章を入れるだけでよいです。
特に設定の必要はありません。

以後、真ん中のカラム・右のカラムに、同様に「画像」「見出し」「段落」の順で入れていきます。

そして最後に、3つのカラム全体を選択して「幅広」に変更。

この時、間違って個々のカラム内のブロックを「幅広」に変更すると、無惨なことになるので気をつけてください(^_^;)

で、ページを更新。
このように表示されました。

ブロックで困ったときは(その2)

ブロックの選択時に、意中のブロックが見当たらず、

「すべてを表示」をクリックして、左に表示されたブロック欄より選択することがあります。

そうすると、意図していた位置から、全然違うところにブロックが入ることがあります。
あれは悲しいですねw

その場合は、ブロック名を覚えていて、最初の検索欄より探せば確実です。

意図していた位置にブロックが入ります。

あれは明らかにWordPressの仕様上のミスなので、早く治してほしいですね。

それと、ブロックをいじってる際に、間違ったクリックや違う選択などをしてしまうことがあります。

「あ~ブロック消してやり直しかよ」などと考えずに、その場合はWordPressのバック機能を使ってください。

画面左上にあります。
編集上の選択を元に戻せます。

今回はここまで

今回はトップページのコンテンツのうち、
「二本の細い線」(スペーサーブロック)
「教室の特徴の見出し」(見出しブロック)
「教室の特徴(3つ)」(カラムブロック)
この3つを作成しました。

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

 

ken
もともとトップのコンテンツは「その7」で終わらせる予定でしたが、この調子だと「その8」までずれ込みそうです。最長シリーズの予感がしてきましたw

 

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

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

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