サイドメニューから「固定ページ」の「固定ページ一覧」をクリックします。

「サービス」の「編集」をクリックします。

すでにあるコンテンツのうち、「子ページ一覧」ブロック以外は不要なので、削除します。

編集画面左上の「ドキュメント概観」をクリックします。

リストビューにて、一番上の「段落」をクリックします。

キーボードのshiftキーを押しながら、下から2つめ「レスポンシブスペーサー」をクリックします。複数のブロックをまとめて選択できます。

※「子ページ一覧」はあとで使うブロックですので残します。

選択した「段落」の「⋮」から「削除」をクリックします。

「子ページ一覧」だけが残っている状態となります。

リストビューは「×」で閉じます。

ページタイトル「サービス」の最後にカーソルを当てた状態で、キーボードの「Enter」キーを押します。

「サービス」の下にカーソルが移動します。

「＋」マークをクリックします。
検索窓に「カバー」と入力し、「カバー」をクリックします。

カバーブロックが設置されます。

背景画像を設定します。
アップロードから画像「office-pro-img11.jpg」をアップロードします。

カバーブロックに背景画像を設定すると、画像の上に半透明の色が重なって表示されます。
この色は、画像に応じて自動で設定されます。

以下のように表示させたいため、重なっている色を黒に設定しましょう。

完成イメージ

カバー内の段落ブロックが選択されている場合は、ブロックツールバーの左端にあるカバーのアイコンをクリックします。カバーブロックが選択されます。

右側パネル「スタイル」をクリックします。
以下のように色を編集します。

画像の中央に表示されている「タイトルを入力…」をクリックして、「必要なときに必要な分だけ」と入力します。
背景に暗い色を指定しているので、視認性を高めるためにテキストの色が自動で白になります。

この段落を見出しに変換します。

ブロックツールバーの段落アイコンをクリックすると「変換」が表示されます。
「見出し」を選んでください。

「必要なときに必要な分だけ」が見出しブロックに変換されます。

右側パネルの「スタイル」にて、見出しを以下のように編集します。

カバーブロックの下にレスポンシブスペーサーを追加します。

下記のように、カバーブロックの背景画像をクリックして選択します。

「⋮」から「後に追加（旧：後に挿入）」をクリックします。

カバーブロックの下にカーソルが移動します。

「/」（半角スラッシュ）を入力すると、挿入するブロックの候補が表示されます。
「レスポンシブスペーサー」をクリックします。

レスポンシブスペーサーを選択している状態で、キーボードの「Enter」キーを押します。
『ブロックを選択するには「/」を入力』の先頭に、カーソルが表示されます。

下記テキストをコピーして貼り付けてください。

「配置」をクリックし、「テキスト中央寄せ」に変更してください。

段落の後ろ「～対応したい企業におすすめです。」にカーソルを置き、キーボードの「Enter」キーを押します。
カーソルが下に移動し、『ブロックを選択するには「/」を入力』が表示されます。

「/」（半角スラッシュ）を入力し、「レスポンシブスペーサー」をクリックします。

右側パネルの「余白の設定」で「L」をクリックします。

編集画面右上の保存をクリックして、保存します。

画面左上のWordPressのマークを右クリックして、「新しいタブで開く」をクリックします。

ブラウザの別タブで固定ページ一覧が開きます。

「HOME」の「編集」をクリックします。

まず、トップページにある【オフィスプロ 3つの強み】のセクションを丸ごとコピーしましょう。

「ドキュメント概観」をクリックしてリストビューを開き、上から5番目のカバーブロックを選択します。

「⋮」から「コピー」をクリックします。

トップページの編集画面はこのあと使用しませんので、ブラウザのタブを閉じてください。

「サービス」の編集画面が表示されているブラウザのタブに切り替えます。

段落「スタートアップ企業はもちろん～」の下にあるレスポンシブスペーサーを選択した状態で、キーボードの「Enter」キーを押します。

『ブロックを選択するには「/」を入力』の先頭に、カーソルが表示します。
右クリックして「貼り付け」をクリックします。

編集画面右上の保存をクリックして、いったん保存します。

貼り付けた【オフィスプロ 3つの強み】を編集していきます。

カバーブロックが選択されていることを確認してください。

右側パネルで「スタイル」をクリックし、背景色を「カスタムカラー1」に変更します。

見出し「オフィスプロ 3つの強み」を選択している状態で「主な特長」と入力します。

「実績豊富な当社におまかせください！」は不要です。
クリックして「⋮」から「削除」をクリックします。

カラム全体を選択して編集していきます。

まず、左のカラム（プロによるコーディネート提案）の白い背景をクリックし、次に「親ブロックを選択：カラム」をクリックします。カラム全体が選択されます。

メモ

カラム全体の選択が難しい場合は、「ドキュメント概観」をクリックして、リストビューを開きます。
「カバー」内にある「カラム」をクリックすれば、選択できます。

「配置」をクリックして「なし」にします。

▼全幅の解除前

▼全幅の解除後

左カラムの丸抜き画像を選択した状態で、「⋮」から「前に追加（旧：前に挿入）」をクリックします。

「+」マークが表示されます。
検索窓に「アイコン」と入力し、「アイコン」をクリックします。

「配置」をクリックして「中央揃え」をクリックします。

画面右の設定サイドバーからFont Awesomeのアイコンを設定します。
「アイコン設定」にあるアイコンを選択をクリックします。

Font Awesome アイコンリストをクリックして検索画面を開きます。

「chair」と検索すると「chair」がヒットするのでクリックしてください。

※「Free」をクリックすると、無料プランで利用できるアイコンに絞って表示されます。

コードをコピーして、「アイコン ( Font Awesome 6 Free )」へ貼り付けてください。
※<i class="fa-solid fa-chair"></i>と記載されている部分

以下のように椅子のアイコンに変わります。

Font Awesomeのアイコンの設定手順は、トップページの作成記事で詳しく解説しています。
「【オフィスプロ 3つの強み】を作成」の「STEP.11 ボタンを編集する」を参照してください。

設置したアイコンブロックを以下のように編集します。

アイコン下の丸抜き画像をクリックして「⋮」から「削除」をクリックします。

見出し「プロによるコーディネート提案」を選択して「1点からレンタル可能」と入力します。

このままでもいいのですが、文字のサイズを少し小さくするとよりよいでしょう。
このあと編集する見出しのうち、文字数が多いと、以下にように改行されてしまうためです。

見出し「1点からレンタル可能」を選択した状態で、右側パネルの「スタイル」をクリックします。

「タイポグラフィ」で文字のサイズを確認します。
ここの見出しは、Lightningのデモサイトでは「21px」と設定されています。

この連載では、見出しのタイポグラフィの単位は基本的に「rem」にしています。
そのため、ここも「rem」に変更して「1.2」と入力しましょう。

見出し「1点からレンタル可能」のサイズが変更されて、少し小さくなります。

見出し「1点からレンタル可能」の下にあるレスポンシブスペーサーは不要なため、削除します。
クリックします。

「⋮」から「削除」をクリックします。

さらに、段落「現状をヒヤリングし～」も不要です。
選択して「⋮」から「削除」をクリックします。

一旦、プレビューで今の状態を確認してみましょう。
編集画面右上のプレビューから「新しいタブでプレビュー」をクリックします。

以下のようになっていることを確認してください。左のカラムは完成です。

左のカラムをコピーし、ほかのカラムに貼り付けます。こうすることで効率よく作業できます。

左のカラムの背景をクリックして選択します。

「⋮」から「コピー」をクリックします。

真ん中のカラムの背景を選択し、キーボードの「ctrl」と「V」キーを押して貼り付けます。

※右クリックしても「貼り付け」がないため、キーボードで操作してください。

同様に、右のカラムにも貼り付けると、以下のようになります。

完成形イメージをもう一度確認しましょう。

アイコンを6つ表示するには、カラムを2つ縦に並べるとできます。

完成形イメージ

カラムを複製します。
右のカラムを選択している状態で「親ブロックを選択：カラム」をクリックします。

カラム全体が選択された状態となります。

「⋮」から「複製」をクリックします。

上と下のカラムがくっついて表示されるため、あいだに余白を追加します。

ブロックツールバーの「ブロックの余白」から「上S」をクリックします。

各アイコンと見出しを以下のように編集します。

2つめのカラムの下にあるレスポンシブスペーサーを選択します。

「⋮」から「前に追加（旧：前に挿入）」をクリックすると、カラムの下にカーソルが点滅します。

「*料金プランによる」と入力します。

「*料金プランによる」の上がつまっているため、少し空けます。
ブロックツールバーの「ブロックの余白」から「上XS」をクリックします。

さらに、「テキスト右寄せ」をクリックして「*料金プランによる」を右に移動させます。

ボタン「詳しく見る」の上にあるレスポンシブスペーサーは不要です。

選択して「⋮」から「削除」をクリックします。

ボタン「詳しく見る」は、後ほど編集して利用したいため、【主な特長】の外側に取り出します。

ボタンブロックを選択した状態で下方向へドラッグします。

【主な特長】とその下のブロックの間にドラッグアンドドロップします。

【主な特長】の外側にボタンブロックが移動します。

リストビューで確認すると、カバーブロックの下にボタンブロックがある状態です。

編集画面右上の保存をクリックして保存します。

ボタン「詳しく見る」をクリックして、「⋮」から「前に追加」をクリックします。

『ブロックを選択するには「/」を入力』が表示されます。

「/」（半角スラッシュ）を入力し、「レスポンシブスペーサー」をクリックします。

右側パネルの余白の設定で「L」をクリックします。

レスポンシブスペーサーが選択された状態で、キーボードの「Enter」キーを押してください。
『ブロックを選択するには「/」を入力』が表示されます。

「/」（半角スラッシュ）を入力し、「見出し」をクリックします。

「サポートオプション」と入力します。

以下のように編集します。

見出し「サポートオプション」をクリックして、「⋮」から「後に追加」をクリックします。

『ブロックを選択するには「/」を入力』が表示されます。
「/」（半角スラッシュ）を入力し、「レスポンシブスペーサー」をクリックします。

レスポンシブスペーサーが選択された状態で、キーボードの「Enter」キーを押してください。

レスポンシブスペーサーの右下にある「+」マークをクリックし、検索窓に「メディア」と入力します。
「メディアとテキスト」をクリックします。

アップロードをクリックして、画像「office-pro-img12.jpg」をアップロードします。

「メディアを右に表示」をクリックします。

背景色を設定します。

右側パネル「スタイル」をクリックし、以下のように編集します。

「コンテンツ…」と表示されている箇所をクリックして、カーソルを表示させます。

「＼こんな方におすすめ／」と入力してください。
「テキストの配置」から「テキスト中央寄せ」をクリックします。

「＼こんな方におすすめ／」を選択した状態で「太字」をクリックします。

さらに「こんな方におすすめ」を選択した状態で、下向き矢印から「蛍光マーカー」をクリックします。

カラーパレットが表示し、カスタムの色（FFFD68）でマーカーを引いたような装飾がつきます。
色を変更する必要はないため、カラーパレット外をクリックして閉じます。

「＼こんな方におすすめ／」の「／」の後ろにカーソルを表示させて、キーボードの「Enter」キーを押します。

「+」マークをクリックして、検索窓に「リスト」と入力します。
「リスト」をクリックします。

以下のように入力します。

ブロックツールバーの左端にある「親ブロックを選択：リスト」をクリックし、リスト全体を選択します。

以下のように編集します。

メディアとテキストブロックを選択し、「⋮」から「後に追加」をクリックします。

「/」（半角スラッシュ）を入力し、「レスポンシブスペーサー」をクリックします。

右側パネルの余白の設定で「L」をクリックします。

編集画面右上の保存をクリックして保存します。

次に、以下のコンテンツを作ります。
トップページにあるブロックをコピーすれば、効率よく作成できます。

完成形イメージ

左上にあるWordPressのマークを右クリックし、「新しいタブで開く」をクリックします。

別タブで固定ページの一覧画面が表示されます。

「HOME」の「編集」をクリックし、編集画面を開きます。

「サービス案内」があるカラム全体を選択します。

丸枠のついたファイルのアイコンをクリックし、ブロックツールバーの左端にある「親ブロックを選択：カラム」をクリックします。

さらに、その状態から左端のカラムアイコンをクリックすると、カラム全体を選択できます。

「⋮」から「コピー」をクリックします。

ブラウザの別タブで表示している「サービス」ページの編集画面に戻ります。

メディアとテキストブロックの下にあるレスポンシブスペーサーを選択した状態で、キーボードの「Enter」キーを押します。

『ブロックを選択するには「/」を入力』の先頭に、カーソルが表示されます。
右クリックして「貼り付け」をクリックします。

左のカラムにあるファイルのアイコンをクリックします。

画面右の設定サイドバーからFont Awesomeのアイコンを設定します。
「アイコン設定」にあるアイコンを選択をクリックします。

Font Awesome アイコンリストをクリックして検索画面を開きます。

「clipboard」と検索すると「clipboard-check」がヒットするのでクリックしてください。

該当コードのコピーをして、「アイコン ( Font Awesome 6 Free )」へ貼り付けてください。
※<i class="fa-solid fa-clipboard-check"></i>と記載されている部分

以下のようなアイコンに変わります。

見出し「サービス案内」を選択して「あなたに代わって選びます」と入力します。

以下のように編集して、見出しの文字サイズを少し小さくします。

段落「弊社が提供するサービスついて～」を選択して、以下のように編集します。

真ん中と右のカラムにも同様に作業してください。

「ドキュメント概観」をクリックしてリストビューを開きます。

カラム全体を選択し、キーボードの「Enter」キーを押します。
『ブロックを選択するには「/」を入力』の先頭に、カーソルが表示されます。

「/」（半角スラッシュ）を入力し、「レスポンシブスペーサー」をクリックします。

編集画面右上の保存をクリックして保存します。

レスポンシブスペーサーを選択した状態でキーボードの「Enter」キーを押します。
『ブロックを選択するには「/」を入力』の先頭に、カーソルが表示されます。

「/」（半角スラッシュ）のあとに「枠線」と入力し、「枠線ボックス」をクリックします。

「見出しを入力してください」の先頭にカーソルが表示されます。
「オプション料金」と入力します。

画面右の設定サイドバーから以下のように編集します。

枠線ボックス内にある『ブロックを選択するには「/」を入力』の先頭をクリックします。
「/」（半角スラッシュ）を入力し「リスト」をクリックします。

以下のように入力します。

ブロックツールバーの左端にある「親ブロックを選択：リスト」をクリックし、リスト全体を選択します。

以下のように編集します。

リスト全体を選択した状態でキーボードの「Enter」キーを押します。
『ブロックを選択するには「/」を入力』が表示されます。

「※オプションはどの料金プランでもご利用いただけます。」と入力します。

ブロックツールバーの左端にある「親ブロックを選択：枠線ボックス」をクリックします。
枠線ボックスが選択されます。

「⋮」から「後に追加」をクリックします。
『ブロックを選択するには「/」を入力』が表示されます。

「/」（半角スラッシュ）を入力し、「レスポンシブスペーサー」をクリックします。

右側パネルの「余白の設定」で「L」をクリックします。

編集画面右上の保存をクリックして、保存します。

ボタン「詳しく見る」の上にあるレスポンシブスペーサーを選択して、キーボードの「Enter」キーを押します。

「/」（半角スラッシュ）を入力し、「見出し」をクリックします。

「料金プラン」と入力します。

以下のように編集します。

見出し「料金プラン」を選択した状態で、キーボードの「Enter」キーを押します。
『ブロックを選択するには「/」を入力』が表示されます。

「/」（半角スラッシュ）を入力し、「レスポンシブスペーサー」をクリックします。

レスポンシブスペーサーを選択した状態で、キーボードの「Enter」キーを押し、カーソルを表示させます。

「ご希望のアイテム数によって3つの料金プランからお選びください」と入力します。

「テキストの配置」から「テキスト中央寄せ」をクリックします。

ボタン内のテキスト「詳しく見る」を選択して「料金プランを比較する」と入力します。

リンクURLを編集します。「/advantage/」を「/price/」と変更して送信をクリックします。

「料金プラン」の上にあるレスポンシブスペーサーをクリックします。

「⋮」から「複製」をクリックします。

複製したブロックが選択された状態となっています。
「下に移動」をクリックし、

編集画面右上の保存をクリックして、保存します。

画面左上のWordPressのマークを右クリックして、「新しいタブで開く」をクリックします。

ブラウザの別タブで固定ページ一覧が開きます。

固定ページ「料金」の「編集」をクリックします。

まず、アイキャッチ画像を設定します。
画面右の設定サイドバーから「アイキャッチ画像を設定」をクリックします。

「office-pro-img07.jpg」を選択し、右下にあるボタンアイキャッチ画像を設定をクリックします。

次に、抜粋を設定します。
「抜粋を追加…」をクリックすると入力欄が表示されます。
「オフィスプロの料金プランをご紹介します。」と入力します。

最後に、親ページを指定します。

「なし」をクリックすると、親ページを選択できる画面が表示されます。
「サービス」を選択してください。

編集画面右上の保存をクリックして、保存します。

「料金」ページの編集画面はこのあと使用しませんので、ブラウザのタブを閉じてください。

「サービス」の編集画面が表示されているブラウザのタブに切り替えます。

ブラウザの「更新マーク」をクリックして、ページを再読み込みします。

「料金」ページが一覧に追加されたことを確認します。

編集画面右上の保存をクリックして、保存します。

HOME（トップページ）の編集画面が表示されているブラウザのタブに切り替えます。

「オフィスプロ3つの強み」の上にあるレスポンシブスペーサーをクリックします。

「⋮」から「複製」をクリックします。

複製したブロックが選択された状態となっています。「下に移動」をクリックします。

「オフィスプロ3つの強み」の下部に、複製したレスポンシブスペーサーが移動したことを確認してください。

見出し「サービス案内」の前にあるアイコンを、以下のように編集します。

見出し「サービス案内」を「サービス」と編集します。

アイコンと見出し「サービス」はどうなっているのか、リストビューで確認してみましょう。
「ドキュメント概観」をクリックします。

アイコンと見出し「サービス」は、横並びブロックを使ってグループ化されて、カバーブロックの内側にあります。この横並びブロックをカバーブロックの外側に取り出しましょう。

横並びブロックが選択されている状態で、上方向（レスポンシブスペーサーの下）へドラッグします。

カバーとレスポンシブスペーサーの間にドロップし、カバーブロックの外側に取り出します。

横並びブロックを選択した状態で「︙」から「後に追加」をクリックします。

「/」（半角スラッシュ）を入力し「レスポンシブスペーサー」をクリックします。

レスポンシブスペーサーを選択した状態で、キーボードの「Enter」キーを押します。
「/」（半角スラッシュ）のあとに「メディア」と入力し、「メディアとテキスト」をクリックします。

メディアライブラリをクリックして、画像「office-pro-img12.jpg」を選択します。

「メディアを右に表示」をクリックします。

「コンテンツ…」の先頭にカーソルを表示させ、「必要なときに必要な分だけ」と入力します。

段落ブロックのアイコンをクリックして「見出し」に変換します。

また、以下のように編集します。

見出し「必要なときに必要な分だけ」のうしろにカーソルを置き、キーボードの「Enter」キーを押します。

以下のように編集します。

「オフィス開設時や働き方の変化にも柔軟に対応できます。」の後ろにカーソルを表示させて、キーボードの「Enter」キーを押します。
「/」（半角スラッシュ）を入力し「リスト」をクリックします。

以下のように入力します。

ブロックツールバーの左端にある「親ブロックを選択：リスト」をクリックし、リスト全体を選択します。

以下のように編集します。

リスト全体を選択した状態で「⋮」から「後に追加」をクリックします。
『ブロックを選択するには「/」を入力』が表示されます。

【オフィスプロ3つの強み】にあるボタン「詳しく見る」を選択し、「⋮」から「コピー」をクリックします。

「最短3日でお届け」の下にカーソルを置き、右クリックして「貼り付け」をクリックします。

リンクURLを編集します。「/advantage/」を「/service/」と変更して送信をクリックします。

「サービス」の上にあるレスポンシブスペーサーをクリックします。

「⋮」から「複製」をクリックします。

複製したブロックが選択された状態となっています。
「下に移動」を3回クリックします。

編集画面右上の保存をクリックして、保存します。