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

「HOME」の「編集」を右クリックして「新しいタブで開く」をクリックします。ブラウザの別タブでトップページの編集画面が開きます。

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

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

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

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

「固定ページ一覧」が表示されているブラウザのタブに戻ります。

「私たちの強み」の「編集」をクリックします。

「私たちの強み」ページの編集画面が表示されます。

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

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

ブラウザの新規タブでページが表示されます。

『Lightning』の場合、ページ上下にあらかじめ適度な余白が設定されています。
「私たちの強み」ページではこの余白は不要なため、解除します。

編集画面が表示されているブラウザのタブに戻ります。

右側パネルで「固定ページ」タブをクリックします。

「余白設定」にて「サイトコンテントの上下余白を無しにする」にチェックを入れます。

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

先ほどと同様にプレビューをクリックします。
すでに開いている別タブにページが表示されます。 【オフィスプロ 3つの強み】上部の余白がなくなっていることを確認してください。

【オフィスプロ 3つの強み】のカラムを編集します。

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

メモ

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

「配置」で「なし」に変更します。

カラムの「全幅」が解除された状態となります。

▼全幅の解除前

▼全幅の解除後

各カラムのパディング（カラム内の余白）と背景色の設定を解除します。

左のカラムを選択して、右側パネルの「スタイル」をクリックします。

サイズの「⋮」から「パディング リセット」をクリックします。設定していたパディングを一度に解除できます。

続いて、「色」の「背景」をクリックします。

今「白」が設定されています。「白」をクリックすると、背景色を解除できます。

真ん中と右のカラムについても、それぞれパディングと背景色の設定を解除してください。

パディングと背景色の解除後、カラムは下記のような状態となります。

３つの画像の上に、それぞれ段落ブロックで「01」「02」「03」を設置します。

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

丸抜き画像の上にカーソルが点滅し、テキストを入力できる状態となります。

「01」と入力後、「01」を選択して「テキストの配置」から「テキスト中央寄せ」をクリックします。

続いて「01」を選択した状態で、「太字」をクリックします。

さらに、文字の色とサイズを変更します。

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

タイポグラフィは「カスタムサイズを設定」をクリックして指定してください。

下記のような状態となり、「01」は完成です。

次に、真ん中の丸抜き画像の上に「02」を設置します。

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

真ん中の丸抜き画像を選択して「⋮」から「前に追加」をクリックします。

コピーした「01」を貼り付けます。

「1」を選択した状態でキーボードの「2」を押して「02」の完成です。
テキストの色やサイズはそのまま引き継がれます。

同様に「03」を設置してください。

ブロックの種類によっては、変換して別のブロックとして使えます。
ここでは、見出しをVKボタンに変換することで、効率よく作っていきましょう。

見出し「プロによるコーディネート提案」を選択した状態で、ブロックツールバーの見出しアイコンをクリックします。

「変換」が表示されるので、「段落」を選び、まず段落に変換します。

次に、ブロックツールバーの段落アイコンをクリックして、VKマークのある「ボタン」に変換します。

このように一旦段落にすれば、テキストをそのまま活かしてVKボタンに変換できます。

画面の右側パネルから以下のように編集します。

「アイコン」の「文字の後」にFont Awesomeのアイコンを設定します。
アイコンを選択をクリックします。

「Font Awesome アイコンリスト」をクリックします。

新しいタブでFont Awesomeの検索画面が開きます。
「angle」と検索し、検索結果のなかから「angle-down」をクリックしてください。

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

コードをコピーして、「文字の後」にコピーしたコードを貼り付けてください。
※<i class="fa-solid fa-angle-down"></i>と記載されている部分

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

VKボタン「プロによるコーディネート提案」を選択して「⋮」から「コピー」をクリックします。

見出し「豊富なラインナップ」をクリックし、「⋮」から「前に追加（旧：前に挿入）」をクリックします。

コピーしたVKボタンを貼り付けます。

さらに、見出し「安心の料金設定」の上にも貼り付けます。

真ん中と右のVKボタンのテキストを、以下のように編集します。

見出し「豊富なラインナップ」「安心の料金設定」は不要です。
それぞれ選択し、「⋮」から「削除」をクリックします。

下記のテキストも不要です。
それぞれ選択して「⋮」から「削除」をクリックします。

3つのボタンの下に、それぞれ高さの低いレスポンシブスペーサーがあります。
これらも不要なため、それぞれ選択して「⋮」から「削除」をクリックします。

さらに、ボタン「詳しく見る」も、その上のレスポンシブスペーサーも不要です。
2つ選択してまとめて削除してみましょう。

1つめのレスポンシブスペーサーをクリックで選択し、キーボードのshiftキーを押しながら、2つめのVKボタンをクリックします。
「⋮」から「削除」をクリックします。

丸抜き画像とボタンの間が少し狭いため、余白を調整しましょう。

左の画像の下にあるレスポンシブスペーサーをクリックします。

右側パネルの余白の設定で「S」に変更します。

真ん中と右の画像下のレスポンシブスペーサーも、同様に「S」に変更してください。

【オフィスプロ 3つの強み】の下部にレスポンシブスペーサーを追加します。

まず、3つのボタンの下部にあるレスポンシブスペーサーをクリックします。
次に、ブロックツールバーの左端にあるカバーのアイコンをクリックすると、カバーブロックを選択できます。

その状態でキーボードのEnterキーを押すと、カバーの外側にカーソルが移動し、『ブロックを選択するには「/」を入力』が表示されます。

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

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

このレスポンシブスペーサーは、次に作るセクションとの間隔をあけるためのものです。
「ドキュメント概観」をクリックしてリストビューを開き、カバーブロックの外側に配置していることを確認してください。

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

レスポンシブスペーサーの下部をクリックして、カーソルを表示させます。

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

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

さらに、見出しの先頭「01」は、以下のように編集してください。

編集後、見出しの先頭「01」は以下のようになります。

見出しなどのテキストは、画面幅に応じて改行位置を指定できます。
今回は、以下のように設定してみましょう。

▼PC表示

▼スマホ表示

改行位置の指定は簡単です。
「1」と「プ」の間にある半角スペースの後ろにカーソルを置き、「画面サイズ毎の改行」をクリックします。

上記をひとつずつクリックしていくと、改行指定が挿入されます。

参考：VK Blocks 画面サイズ毎の改行指定

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

見出し「01 プロによるコーディネート提案」をクリックし、「⋮」から「後に追加」をクリックします。

「+」をクリックして検索窓に「メディア」と入力し、「メディアとテキスト」をクリックします。

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

初期状態では画像の幅が大きいため、少し小さくします。
「メディアの幅」を「50」から「30」に変更します。

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

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

▼テキスト

ブロックツールバーからメディアとテキストのアイコンをクリックします。

以下のように、画像の右側エリアに背景色を指定します。

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

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

キーボードの「shift」キーを押しながら、下記3つのブロックを選択し、「⋮」から「複製」をクリックします。

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

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

メディアとテキストブロックの画像の左下をクリックして、カーソルを置きます。

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

レスポンシブスペーサーを選択した状態で「⋮」から「後に追加」をクリックします。

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

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

見出し「人気のアイテム」の最後にカーソルを置き、キーボードの「Enter」キーを押すと、『ブロックを選択するには「/」を入力』が表示されます。

見出しの下にカーソルが点滅している状態でテキストを入力すると、段落ブロックとして追加できます。
以下のように入力してください。

▼テキスト

段落ブロックの下部をクリックして、カーソルを表示させます。

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

メモ

「カラム」が出てこない場合は、「/」のあとに続けて「カラム」と入力すると出てきます。

以下のように表示されます。「3カラム：均等割」をクリックします。

各カラムに、それぞれ画像ブロックを設置していきます。

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

以下の画像をアップロードします。また、画像の下にはキャプションを入力します。

キャプションは、ブロックツールバーの「キャプションを追加」をクリックして入力してください。

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

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

「ドキュメント概観」をクリックして、リストビューを開きます。
キーボードの「shift」キーを押しながら、下記3つのブロックを選択します。

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

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

カラムブロックの下に移動したことを確認します。

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

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

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

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

リンクURLを指定します。「/price/」と入力して送信をクリックします。

「アイコン」の「文字の後」に、Font Awesomeのアイコンを設定します。
Font Awesomeのページで「angle」で検索してください。「angle-right」があります。クリックします。

該当コードのコピーをして、「文字の後」にコピーしたコードを貼り付けてください。
※<i class="fa-solid fa-angle-right"></i>と記載されている部分

見出し「03 安心の料金設定」の上にある、レスポンシブスペーサーブロックをクリックして選択します。

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

「下に移動」を2回クリックします。

メディアとテキストブロックの下に移動したことを確認します。

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

見出し「01 プロによるコーディネート提案」を選択して、「高度な設定」をクリックします。

「HTMLアンカー」を入力します。アンカーは、任意の1〜2単語を空白スペースなしで設定します。ここでは「coordination」と入力します。

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

ボタン「プロによるコーディネート相談」を選択し、「リンクURL」をクリックします。

「#coordination」と入力し「送信」をクリックします。

編集画面右上の「プレビュー」から「新しいタブでプレビュー」をクリックします。

ボタン「プロによるコーディネート相談」をクリックして、該当見出しへ移動するか確認します。

残り2つのボタンも同様に、HTMLアンカーとリンクURLをそれぞれ設定します。
プレビューで動作確認も行ってください。

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