2022.11.14WordPressテーマ「BusinessPress」でWEBサイトを制作(その5)トップページのコンテンツ作成ツイートシェアはてブ送るPocket「BusinessPress」は国産の無料WordPressテーマです。*BusinessPress架空のWEBサイト制作シリーズ。前回に引き続き、BusinessPressでのサイト制作「その5」。前回はプラグインの設定まで進みました。これを最終回までに、以下の状態にまで作り上げます。初心者でも安心なPC教室(架空のダミーサイトです)今回はトップページのコンテンツ作成について。ブロックエディター(Gutenberg)を使って作っていきます。今回はここまでトップページのコンテンツを作成まず、トップページの編集画面を開きます。固定ページ⇒固定ページ一覧⇒トップクリックして開きます。コンテンツ内には何も無い状態です。「+」をクリックして、ブロックを一つ一つ追加していきます。画面左上にある「+」からクリックしてみてください。見る側はブロックエディターの基本的操作は出来るという前提で解説していきますが、取りあえず今回の「その5」のみは詳細に説明します。最初に「TAKADAパソコン教室の理念やPR文」の箇所をブロックで入れます。「+」をクリックし、ブロックを全て表示させ、このうち「段落」を選択。「段落」は普通に文章を入れる際に使います。準備しておいた文章を入れます。文章を入れると、段落ごとにブロックが形成されているのが分かると思います。この文章の場合は、上と下で2つの文章に分かれます。編集画面を「更新」して、確定させましょう。「プレビュー」を押すと、ページがどう表示されるのかが分かります。◇文字が小さくて見づらい◇コンテンツの幅が、画面幅に比べると狭いこの2つが分かると思います。文字の大きさを変更しましょう。画面右上の「設定」をクリック。右側に「ブロック」欄が表示されます。ブロック欄のタイポグラフィ右の「カスタムサイズを設定」のアイコンをクリック。「20」と入れ、ページの「更新」をクリック。これで文字が20pxになりました。同様に下の文字列も「20」pxにします。「px」の箇所をクリックすると「em」「rem」などへの単位の切替が可能です。コンテンツ幅をもっと広げます。ブロックにマウスのカーソルを置いて、「詳細設定」を開き、「グループ化」をクリック。「配置を変更」⇒「幅広」をクリック。同様に下の「段落」もグループ化⇒幅広に変更して、ページを更新します。すると表示が以下のように変化しました。文字が大きくなり、コンテンツの幅が広がりました。基本的に、このサイトでのブロックは「幅広」に設定します。一部例外もありますので、その場合のみ記述します。お知らせの見出しさて、次は「お知らせ」ブロックを作ります。お知らせの見出しと、お知らせの一覧で構成された箇所です。一覧では、投稿の中の「お知らせ」カテゴリーに属する記事のみを表示させます。「見出し」を入れます”お知らせ”と記述します。「見出し」はH1からH6まで選択可能ですが、ここはデフォルトの「H2」のままで大丈夫です。見出しのスタイルから「左右線」を選びます。色設定で「テキスト」を選択。上部の透明部分をクリック。色指定用の小さなウィンドウが開くので、ここにカラー番号を入れます。濃いメインカラー(#049ca8)に。この色の指定の手順は、覚えるまでが面倒かもしれません。(頑張ってください(^_^;))さらに、見出しを「幅広」に変更します。見出しはグループ化する必要はありません。そのまま「配置を変更」⇒「幅広」で、ページを更新。以下の表示になります。見出しの下に「お知らせ一覧」を入れます。事前に、投稿にてカテゴリーで「お知らせ」を作り、幾つかのダミー記事を適当に入れておきます。ブロックで「最新の投稿」を作成。「最新の投稿」もグループ化する必要はありません。「配置を変更」⇒「幅広」さらに、右側に「ブロック」欄を表示させ、内容をカスタマイズします。◇投稿日を表示⇒チェック入れ◇カテゴリー⇒「お知らせ」と入れる。カテゴリーは「お知らせ」と入れた後に、エンターキーを押すと確定されます。ページを更新すると、以下のように表示されます。投稿の中から、カテゴリーの「お知らせ」の記事のみが表示されます。この時、各記事のアイキャッチ画像も表示させようとすると、あまりレイアウトが綺麗に表示されないので、本サイトでは非表示のままにしています。ブロックで困ったときはたまにブロックで、間違って上下の順が逆になったりすることがあります。その場合は慌てず騒がず、ブロックの「移動ボタン」をクリックして、上下順を移動させてください。◇グループブロック(外側の囲い部分)◇グループの中のブロックこの2つ両方とも選択できてややこしいです。「グループブロック」は選択しずらいので、キレて短気を起こさないように気をつけてくださいwその場合は、画面左上の三本線の「リスト表示」アイコンをクリックすると、ページ内のブロックがズラズラッと一覧表示されます。ここから必要なブロックを選択してください。「教室の理念やPR文」(段落ブロック)「お知らせの見出し」(見出しブロック)「お知らせ一覧」(最新の投稿ブロック)この3つを作成しました。最初の「教室の理念やPR文」を詳細に説明しました。次回はコンテンツ作成の続きを解説します。kenブロックエディターの解説はどうしても画像が多くなります。今回はアイキャッチ含めて30以上の画像を載せました。新・WordPressテーマ「Lightning」でサイト制作:まとめページWordPressテーマ「BusinessPress」でWEBサイトを制作:まとめページ便利なWordPressプラグイン:まとめページ無料画像編集ソフト「PhotoScape」使用方法:まとめページランサーズ受注ノウハウ:まとめページブログ主プロフケンです。後半開始⇒帰郷して職業訓練⇒2人会社勤務⇒フリーランスとなる。◇Twitterは更新通知+小ネタ用です。