【連載その4】WordPressとLightningでホームページを自作する方法！「サービス編」

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

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

すでにあるコンテンツのうち、「子ページ一覧」以外は不要なので、削除します。
編集画面左上の「三本線のアイコン（リスト表示）」をクリックします。

リスト表示の「段落」をクリックします。

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

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

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

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

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

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

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

カバーブロックが設置されます。
アップロードから画像「office-pro-img11.jpg」をアップロードします。

画像の中央に表示されている「タイトルを入力…」をクリックして、「必要なときに必要な分だけ」と入力します。

段落「必要なときに必要な分だけ」を選択した状態で、段落アイコンにマウスポインタを重ねます。

段落アイコンをクリックし、「見出し」を選んで変換します。

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

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

画面右の設定サイドバーにある「タイポグラフィ」の「サイズデフォルト」の並びにあるマーク「カスタムサイズを設定」をクリックします。

単位を「REM」に変更します。
※Lightningの場合、見出し（H2）は1.75remで設定されているため、remに変更するとサイズを調整しやすいでしょう。

サイズ（カスタム）に「2」と入力します。

見出し「必要なときに必要な分だけ」のサイズが変更されて、作業のあとなので、少し大きくなりました。

カバーブロックの下にレスポンシブスペーサーを追加します。
下記のように、カバーブロックの背景画像の部分をクリックして選択します。

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

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

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

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

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

貼り付けたテキストをドラッグですべて選択し、「テキストの配置を変更」をクリックします。
「テキスト中央寄せ」に変更してください。

段落「オフィスで使用する家具は～」の上にあるレスポンシブスペーサーを選択します。

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

複製したブロックが選択された状態となります。
このままの状態で「下に移動」を4回クリックし、「スタートアップ企業はもちろん～」の下部まで移動します。

移動後、画面右の設定サイドバーから「余白の設定」で大をクリックします。

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

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

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

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

まず、トップページにある【オフィスプロ 3つの強み】のまとまり（グループ）をコピーします。
【オフィスプロ 3つの強み】の上部をクリックします。選択されると青い枠線が表示されます。

トップページの編集画面はこのあとも使いますので、閉じないでください。

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

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

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

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

貼り付けた【オフィスプロ 3つの強み】が選択された状態となっています。
画面右の設定サイドバーから背景色を「カスタムカラー1」に変更します。

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

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

3つのカラムの下部にあるレスポンシブスペーサーをクリックします。
「上に移動」を1回クリックし、「主な特長」の下部まで移動します。

移動してきたレスポンシブスペーサーの「⋮」から「複製」をクリックします。

複製されたレスポンシブスペーサーの「上に移動」を2回クリックし、「主な特長」の上まで移動します。

移動後、画面右の設定サイドバーから「余白の設定」で「小」をクリックします。

カラム全体を選択して編集していきます。
「主な特長」のタイトルの下にあるカラム（3つの写真とテキストのグループ）を選択します。

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

▼全幅の解除前

▼全幅の解除後

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

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

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

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

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

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

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

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

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

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

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

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

続いて、見出しのサイズを調整します。

画面右の設定サイドバーにある「タイポグラフィ」の「サイズデフォルト」の並びにあるマーク「カスタムサイズを設定」をクリックします。

単位を「REM」に変更します。

サイズ（カスタム）に「1.2」と入力します。

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

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

現時点で左のカラム内は、以下のようになります。

カラム内でアイコンと見出しの配置をより良くするために、各余白を調整します。
見出し「1点からレンタル可能」を選択している状態で「ブロックの余白」をクリックします。

「上sm」「下0」をそれぞれクリックすると適用されます。

もう一度プレビューで表示を確認します。
椅子のアイコンと「1点からレンタル可能」の間に適度な余白ができました。
また、「1点からレンタル可能」の下の余白は解除されました。

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

以下のように、左のカラムの背景をクリックして選択します。

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

真ん中のカラムの背景を選択します。
キーボードの「ctrl」と「V」キーを押して貼り付けます。
※右クリックしても「貼り付け」がないため、キーボードで操作してください。

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

右のカラムを選択している状態で「カラムを選択」をクリックします。

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

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

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

ボタン「詳しく見る」を選択して「⋮」から「前に挿入」をクリックします。

カーソルが点滅します。「*料金プランによる」と入力します。
入力後「テキストの配置を変更」をクリックします。

「テキスト右寄せ」をクリックすると、「*料金プランによる」が右寄せになります。

ボタン「詳しく見る」は、後ほど編集して利用したいため、「主な特長」の背景となるブロックから取り出しておきます。
ボタン「詳しく見る」を選択した状態で下方向へドラッグします。

「主な特長」の背景色とその下のブロックの間にドラッグアンドドロップします。

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

ブラウザの別タブで表示しているトップページの編集画面に戻ってください。

一番上のレスポンシブスペーサーブロックを選択します。

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

ブラウザの別タブで表示している「サービス」ページの編集画面に戻ります。
【主な特長】の背景をクリックした状態で、キーボードの「Enter」キーを押します。

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

カーソルが点滅している状態で、右クリックして「貼り付け」をクリックします。

このあと、見出しをコピーしてレスポンシブスペーサーの下に貼り付けます。
レスポンシブスペーサーが選択された状態で、キーボードの「Enter」キーを押し、カーソルを表示させておきます。

見出し「主な特長」をクリックで選択し、キーボードのshiftキーを押しながら、その下のレスポンシブスペーサーをクリックします。
複数のブロックをグループとしてまとめて選択できます。

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

カーソルが点滅しているところで右クリックして「貼り付け」をクリックします。

見出し「主な特長」を選択して「サポートオプション」と入力します。

見出し「サポートオプション」の下にあるレスポンシブスペーサーの下部をクリックすると「+」マークが表示されます。

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

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

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

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

メディアとテキストブロックをクリックして選択します。

背景色を以下のように設定します。

「コンテンツ…」と表示されている箇所をクリックして、カーソルを表示させます。
「＼こんな方におすすめ／」と入力してください。
「配置を変更」から「テキスト中央寄せ」をクリックします。

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

さらに「こんな方におすすめ」を選択した状態で、下向き矢印から「蛍光マーカー」をクリックします。
カラーパレットが表示されても、何も選択する必要はありません。
カスタム（FFFD68）が選択されているので、そのまま閉じます。

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

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

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

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

メディアとテキストの下部にて、ブロックを追加する「+」マークをクリックします。
「レスポンシブスペーサー」をクリックします。

画面右の設定サイドバーから、余白の設定にて「大」をクリックします。

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

ブラウザの別タブで表示しているトップページの編集画面に戻ってください。
「サービス案内」があるカラム全体を選択します。

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

ブラウザの別タブで表示している「サービス」ページの編集画面に戻ります。
メディアとテキストブロックの下にあるレスポンシブスペーサーが選択された状態で、キーボードの「Enter」キーを押します。

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

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

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

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

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

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

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

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

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

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

カラムの下部をクリックすると「+」マークが表示されます。

「レスポンシブスペーサー」をクリックします。

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

レスポンシブスペーサーのの下部をクリックすると「+」マークが表示されます。
検索窓に「枠線」と入力し、「枠線ボックス」をクリックします。

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

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

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

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

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

「組み立て・設置：3,000円〜／点」のうしろにカーソルを置き、キーボードの「Enter」キーを2回押します。
『ブロックを選択するには「/」を入力』が表示されます。

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

見出し「サポートオプション」の上にあるレスポンシブスペーサーをクリックします。

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

枠線ボックスを選択した状態でキーボードの「Enter」キーを押します。

カーソルが点滅している状態で右クリックして「貼り付け」をクリックします。

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

見出し「サポートオプション」を選択して「⋮」から「コピー」をクリックします。

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

カーソルが点滅している状態で右クリックして「貼り付け」をクリックします。

見出し「サポートオプション」を選択して「料金プラン」と入力します。

見出し「料金プラン」の下部をクリックすると「+」マークが表示されます。
「レスポンシブスペーサー」をクリックします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次に、抜粋を設定します。
「オフィスプロの料金プランをご紹介します。」と入力します。

最後に、「ページ属性」で親ページを設定します。
入力欄をクリックすると、固定ページの候補が表示されます。
「サービス」を選択してください。

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

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

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

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

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

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

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

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

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

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

見出し「サービス案内」をクリックして、以下のように編集します。
※テキスト以外は、画面右の設定サイドバーから設定してください。

見出し「サービス」を選択した状態で、上方向（レスポンシブスペーサーの下）へドラッグします。

レスポンシブスペーサーの下へドロップします。

見出し「サービス」の下部をクリックすると「+」マークが表示されます。
「レスポンシブスペーサー」をクリックします。

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

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

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

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

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

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

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

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

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

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

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

「最短3日でお届け」のうしろにカーソルを置き、キーボードの「Enter」キーを2回押します。
『ブロックを選択するには「/」を入力』が表示されます。

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

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

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

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

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

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

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