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

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

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

BusinessPress

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

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

前回はプラグインの設定まで進みました。

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

今回はトップページのコンテンツ作成について。
ブロックエディター(Gutenberg)を使って作っていきます。

~ 目次 ~

  • トップページのコンテンツを作成
  • 教室の理念やPR文
  • お知らせの見出し
  • お知らせ一覧
  • ブロックで困ったときは
  • 今回はここまで

トップページのコンテンツを作成

まず、トップページの編集画面を開きます。

WordPress管理画面より、
固定ページ固定ページ一覧トップ

クリックして開きます。

まだ、コンテンツ内には何も無い状態です。
」をクリックして、ブロックを一つ一つ追加していきます。

見る側はブロックエディターの基本的操作は出来るという前提で解説していきますが、取りあえず最初のブロックのみは詳細に説明します。

教室の理念やPR文

最初に「TAKADAパソコン教室の理念やPR文」の箇所をブロックで入れます。

」をクリックし、ブロックを全て表示させ、

このうち「段落」を選択。
「段落」は普通に文章を入れる際に使います。

あらかじめ準備しておいた文章を入れます。

文章を入れると、段落ごとにブロックが形成されているのが分かると思います。
この文章の場合は、上と下で2つの文章に分かれます。

一旦、編集画面を「更新」して、確定させましょう。

プレビュー」を押すと、ページがどう表示されるのかが分かります。

見てみると、
文字が小さくて見づらい
コンテンツの幅が、画面幅に比べると狭い
この2つが分かると思います。

まず、文字の大きさを変更しましょう。
画面右上の「設定」をクリック。

右側に「ブロック」欄が表示されます。

上の文字列をドラッグで選択して、ブロック欄のプリセットサイズから「」を選択。

これで文字が大きくなりました。

同様に下の文字列も「」にします。

さらに、コンテンツ幅をもっと広げます。

ブロックにマウスのカーソルを置いて、「詳細設定」を開き、「グループ化」をクリック。

段落」ブロックがグループ化されるので、

配置を変更」⇒「幅広」をクリック。

同様に下の「段落」もグループ化幅広に変更して、ページを更新します。

すると表示が以下のように変化しました。

文字が大きくなり、コンテンツの幅が広がりました。

基本的に、このサイトでのブロックは「幅広」に設定します。
ただ一部例外もありますので、その場合のみ記述します。

お知らせの見出し

さて、次は「お知らせ」ブロックを作ります。

お知らせの見出しと、お知らせの一覧で構成された箇所です。
一覧では、投稿の中の「お知らせ」カテゴリーに属する記事のみを表示させます。

まずは「見出し」を入れます

お知らせ”と記述します。

「見出し」はH1からH6まで選択可能ですが、

ここはデフォルトの「H2」のままで大丈夫です。

右側に「ブロック」欄を表示させ、見出しのスタイルを選びます。
いろいろ選べます。

ここは「左右線」を選び、デフォルトスタイルも「左右線」に選択しておきます。

そして色設定で、

文字色」を、濃いメインカラー(#049ca8)に。

さらに、見出しを「幅広」に変更します。

一旦、グループ化した後に「幅広」

で、ページを更新
以下の表示になります。

お知らせ一覧

見出しの下に「お知らせ一覧」を入れます。

まず事前に、投稿にてカテゴリーで「お知らせ」を作り、幾つかのダミー記事を適当に入れておきます。

で、ブロックで「最新の投稿」を作成。

「最新の投稿」はグループ化する必要はありません。
そのまま「配置を変更」⇒「幅広

さらに、右側に「ブロック」欄を表示させ、内容をカスタマイズします。

◇投稿日を表示⇒チェック入れ

◇カテゴリー⇒「お知らせ」と入れる。

カテゴリーは「お知らせ」と入れた後に、エンターキーを押すと確定されます。

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

投稿の中から、カテゴリーの「お知らせ」の記事のみが表示されます。

この時、各記事のアイキャッチ画像も表示させようとすると、

あまりレイアウトが綺麗に表示されないので、本サイトでは非表示のままにしています。

ブロックで困ったときは

たまにブロックで、間違って上下の順が逆になったりすることがあります。

その場合は慌てず騒がず、ブロックの「移動ボタン」をクリックして、上下順を移動させてください。

また、グループ化したブロックなどは、
グループブロック(外側の囲い部分)
グループの中のブロック
この2つ両方とも選択できてややこしいです。

特に「グループブロック」は選択しずらいので、キレて短気を起こさないように気をつけてくださいw

今回はここまで

今回はトップページのコンテンツのうち、
「教室の理念やPR文」(段落ブロック)
「お知らせの見出し」(見出しブロック)
「お知らせ一覧」(最新の投稿ブロック)
この3つを作成しました。

最初の「教室の理念やPR文」を詳細に説明しました。

さて、次回はコンテンツ作成の続きを解説します。

 

ken
ブロックエディターの解説はどうしても画像が多くなります。今回はアイキャッチ含めて30画像を載せました。記録破りです(^_^;)

 

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

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

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