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

「ご契約の流れ」の「編集」をクリックします。

すでにあるコンテンツは「フロー」と呼ばれるブロックで作成されています。
シンプルなフローで構わないときは、このブロックを利用しても良いでしょう。

今回はオリジナルのフローを作るため、すべて削除します。
編集画面左上の「三本線のアイコン（リスト表示）」をクリックします。

WordPressの仕様変更に注意（追記：2023/05）

WordPress6.2より、三本線のアイコンの名称が「ドキュメント概観」に変更されました。

• 変更前：「三本線のアイコン（リスト表示）」をクリック
• 変更後：「三本線のアイコン（ドキュメント概観）」をクリック

▼変更前（WordPress6.1以前）

▼変更後（WordPress6.2以降）

リスト表示の「フロー」をクリックします。

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

選択した「レスポンシブスペーサー」の「⋮」から「ブロックを削除」をクリックします。

タイトル「ご契約の流れ」の下にカーソルが表示されます。
リスト表示には段落ブロックが現れます。

リスト表示は「×」で閉じます。

「/」（半角スラッシュ）を入力し、「アイコン」をクリックします。

※表示された候補に「アイコン」がない場合は、「/」の続きで「アイコン」と入力すると、アイコンに関係のあるブロックが一覧表示されるので、そこから選んでください。

「配置を変更」から「中央揃え」をクリックします。

「ブロックの余白」から「下sm」をクリックし、アイコンの下部に余白を設定します。

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

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

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

メモ

「Font Awesome アイコンリスト」をクリックした際に、下記のように検索窓が見当たらない場合は、以下をお試しください。

• ブラウザのタブをリロード（更新）する
• 一旦ブラウザのタブを閉じて「Font Awesome アイコンリスト」のクリックからやり直す

該当コードのコピーをして、「アイコン ( Font Awesome 6 Free )」へ貼り付けてください。

※<i class="fa-solid fa-1"></i>と記載されている部分

以下のように数字「1」のアイコンに変わります。

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

アイコンブロックを選択して、キーボードの「Enter」キーを押します。

カーソルが表示されます。

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

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

WordPressの仕様変更に注意（追記：2023/05）

WordPress6.2より、各ブロックを選択したときに表示される右側パネルの表示形式が変わりました。

• 変更前
  右側パネルにすべての設定項目が表示されています。
• 変更後
  設定項目は「設定」と「スタイル（Styles）」のタブに分かれています。タブを切り替えてください。

▼変更前（WordPress6.1以前）

▼変更後（WordPress6.2以降）

見出し「お問い合わせ」のうしろにカーソルを置き、キーボードの「Enter」キーを押します。
カーソルが表示されます。

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

「まずはお気軽に～」のうしろにカーソルを置き、キーボードの「Enter」キーを押します。
カーソルが表示されます。

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

「2カラム：等分」をクリックします。

左のカラムの「+」をクリックし「ボタン」をクリックします。
※「ボタン」が表示されない場合は、検索窓に「ボタン」と入力して検索してください。

右のカラムに、アイコンと電話番号を組み合わせた以下を作ります。

完成イメージ

お問い合わせフォームの右のカラムの「+」をクリックし「ボタン」をクリックします。
検索窓に「横」と入力し、「行」または「横並び」をクリックします。

「横」でも表示されない場合は、「行」で検索してください。
※WordPressの環境によっては表記が異なる場合があります。

行ブロック（横並びブロック）とは

WordPress標準のブロック。複数のブロックを横に並べてレイアウトできる。

横並びブロックの左の「+」をクリックしします。
検索窓に「アイコン」と入力し、アイコンをクリックします。

画面右の設定サイドバーからFont Awesomeのアイコンを設定します。
「アイコン設定」にある「アイコンを選択」をクリックします。
表示されているアイコン一覧の中から、スクエア型の電話アイコンをクリックします。

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

下記の画像を参考に、アイコンの並びをクリックします。
「+」マークが表示されます。

「+」をクリックし、「段落」をクリックします。

電話アイコンの並びにカーソルが表示されます。

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

横並びブロックの位置と余白を調整します。
まず、電話アイコンをクリックします。

次に、横並びのアイコンにマウスポインタを重ねると「行（横並び）を選択」と表示されます。
クリックします。

横並びが選択された状態となります。以下のように編集します。

もう一度、横並びブロックを選択します。

「⋮」から「後に挿入」をクリックします。

電話番号の下にカーソルが表示されます。

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

すべてのブロックをグループ化し、背景色と余白を設定します。
まず、編集画面左上の「リスト表示」をクリックします。

次に、リスト表示の「アイコン」をクリックします。

キーボードの「shiftキー」を押しながら、一番下の「カラム」をクリックし、すべてのブロックをまとめて選択します。

選択した「アイコン」の「⋮」から「グループ化」をクリックします。
これで、グループブロックとして扱えます。

リスト表示は「×」で閉じます。

以下のようにグループを選択します。

グループブロックを以下のように編集します。

リンクマークをクリックし、パディング（グループ内の余白）を個別に指定できるようにします。

WordPressの仕様変更に注意（追記：2023/05）

WordPress6.3より、パディングの個別設定の表示手順が変更されました。

• 変更前：「個別に指定する」をクリックすると、上・右・下・左とスライダーが表示されます。それぞれ「カスタムサイズを設定」をクリックし、単位を指定します。
• 変更後：初期状態で上下・左右のパディングに分かれて表示されています。それぞれ「カスタムサイズを設定」をクリックし、単位を指定します。

▼変更前（WordPress6.2以前）

手順1

手順2

手順3

手順4

▼変更後（WordPress6.3以降）

手順1

手順2

手順3

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

下記の画像を参考にして、背景をクリックし、グループブロックを選択します。

メモ

「グループ」ブロックの選択が難しい場合は、編集画面左上のリスト表示をクリックします。一番上の「グループ」をクリックすれば、選択できます。

「⋮」から「後に挿入」をクリックします。

グループブロックの下にカーソルが表示されます。

「/」（半角スラッシュ）を入力し「アイコン」をクリックします。

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

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

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

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

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

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

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

WordPressの仕様変更に注意（追記：2023/09）

WordPress6.3より、編集画面右上のプレビューの表示が変更されました。

• 変更前：「プレビュー」は、テキストで表示されています。
• 変更後：「プレビュー」は、アイコンで表示されています。

▼変更前（WordPress6.2以前）

▼変更後（WordPress6.3以降）

ブラウザの新規タブでページが表示されます。これで1つめのフローが完成です。
プレビューを表示しているブラウザのタブは閉じてください。

これで、導入の流れページの1つ目のフローは完成しました。
編集画面右上の更新をクリックして、保存します。

導入の流れページの2つ目のフローは、1つ目のフローを複製して作ります。
編集画面左上の「リスト表示」をクリックします。

キーボードの「shiftキー」を押しながら、「グループ」と「アイコン」をクリックします。
ブロックをまとめて選択できます。

「グループ」の「⋮」から「複製」をクリックします。

「×」でリスト表示を閉じます。

2つめのフローを編集します。
ボタンと電話番号を設置しているカラムは不要なため、削除します。

まず、左のカラムをクリックして選択します。
下記のように、ボタン「お問い合わせフォーム」の周辺のどこかをクリックすると、左のカラムを選択しやすいでしょう。

次に、カラムのアイコン「カラムを選択」をクリックします。これでカラム全体を選択できます。

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

2つめのフローを複製し、全部で6つのフローを作成します。
編集画面左上の「リスト表示」をクリックします。

まず、キーボードの「shiftキー」を押しながら、上から3つめの「グループ」と4つめの「アイコン」をクリックします。

「グループ」の「⋮」から「複製」をクリックします。

次に、キーボードの「shiftキー」を押しながら、上から2つめの「グループ」と6つめの「アイコン」をクリックして、複製します。

下から2つめの「グループ」をクリックしたまま、一番下の「アイコン」の下部へドラッグアンドドロップします。

線上にカーソルを合わせると＋ボタンが出ます。

以下のように並んでいることを確認し、「×」でリスト表示を閉じます。

• 「グループ」と「アイコン」の組み合わせが5つ並んでいる
• 一番下は「グループ」

各フローを以下のように編集します。

メモ

数字のアイコンは、Font Awesome アイコンリストから「2」～「6」までそれぞれ選び、コピーしたコードを貼り付けてください

プレビューで表示を確認してみましょう。
画面右上のプレビューから「新しいタブでプレビュー」をクリックします。

ブラウザの新規タブでページが表示されます。
表示を確認後、プレビューを表示しているブラウザのタブを閉じてください。

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

画面左上のWordPressのマークをクリックして、固定ページ一覧へ移動します。

「よくあるご質問」の「編集」をクリックします。

まず、3つめの質問「今のホームページを～」の下部にあるブロックは、すべて不要なため削除します。

編集画面左上の「リスト表示」をクリックします。

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

「レスポンシブスペーサー」の「⋮」から「ブロック削除」をクリックします。

続いて、3つめの「新FAQ」を選択して「⋮」から「複製」をクリックします。

さらに、4つめの「新FAQ」を選択して「⋮」から「複製」をクリックしましょう。

新FAQブロックが全部で5つ並んでいることを確認して、「×」でリスト表示を閉じます。

新 FAQブロックとは

『Lightning』の推奨プラグインVK Blocksによって提供されるブロック。質問と回答の組み合わせを簡単に作成できる。質問・回答ともに、テキストだけでなく、ボタンや画像などブロックの挿入もできる。
※「FAQ」で検索すると「旧FAQ」と「新FAQ」があります。新規でブロックを追加するときは「新FAQ」の方をご利用ください。

2つめの質問「原稿や写真は～」にあるボタン「オプション料金を確認する」は不要です。
ボタンをクリックして「⋮」から「ボタンを削除」をクリックします。

質問（Q）と回答（A）をそれぞれ以下のように編集します。

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