WordPressのサイドメニューの「外観」から「カスタマイズ」をクリックします。

サイドメニューから「サイト基本情報」をクリックします。

サイトタイトルには、ホームページ全体のタイトルを入力してください。
キャッチフレーズには、ホームページのうたい文句や、提供するサービスのキャッチコピーなどを入力します。
※あとからいつでも変更できます。

公開をクリックして反映されたか確認して完了です。

サイドメニューから「色」をクリックします。

ベースカラーは「背景色」、メインカラーは「キーカラー」、アクセントカラーは「カスタムカラー」という項目から設定します。

それぞれの色は色を選択をクリックして設定できます。
カラーコードを直接入力するか、イメージに近い色をクリックしてください。

公開をクリックして設定完了です。

ロゴの左上にある「鉛筆マーク」をクリックします。

左メニューの画像を変更をクリックして、画像「office-pro-img01.png」ロゴをアップロードします。

ロゴが入っていることを確認し、公開をクリックして完了です。

ダッシュボードの「固定ページ」から「固定ページ一覧」をクリックします。

まず、不要な固定ページを下書きへ移します。

下記固定ページの先頭のチェックボックスに、それぞれチェックを入れます。全部で10あります。

「一括操作」から「編集」を選択し適用をクリックします。

一括編集画面が表示されます。「ステータス」を「下書き」に変更し、更新をクリックします。

「一括操作」の上にある「下書き」の数が「10」になっていることを確認してください。

次に、既存の固定ページのタイトルを編集します。
ここでは例として、固定ページ「サービス案内」の「クイック編集」をクリックします。

タイトルを「サービス」に変更して更新をクリックします。

同様に、下記固定ページのタイトルをそれぞれ編集し、更新してください。

最後に、必要な固定ページを新規作成します。
新規追加をクリックします。

例として「導入事例」という固定ページを作成します。
以下のようにそれぞれ入力して、公開をクリックします。

確認画面「公開してもよいですか ?」が表示します。公開をクリックします。

外観のカスタマイズをクリックする

「外観」の「カスタマイズ」をクリックします。

サイドメニューから「メニュー」をクリックします。

サイドメニューから「Header navigation」をクリックします。

ヘッダーメニューが表示されます。
不要なメニュータイトルを削除します。以下をすべて削除してください。

必要なメニュータイトルを追加します。項目を追加をクリックします。

サイドメニュー右側の「固定ページ」から「私たちの強み」をクリックします。
サイドメニュー左側の「お問合わせ」の下に「私たちの強み」が追加されたことを確認します。
同様に、以下固定ページのタイトルを、それぞれメニューへ追加してください。

メニュータイトルの位置を変更します。
「私たちの強み」にマウスポインターを重ねてクリックしたままドラッグします。
「ホーム」と「サービス」の間へドラッグアンドドロップします。

同様に、以下メニュータイトルの位置をそれぞれ変更してください。第2階層のメニューは、少し右へずらして配置することで第2階層になります。

補足

動作が重くてメニュータイトルを移動できない場合は、「外観」 > 「メニュー」からでも編集可能。

「編集するメニューを選択」で「Header Navigation」が選ばれていることを確認します。同様にドラッグアンドドロップでメニュータイトルを移動できます。

編集後、画面右下のメニューを保存をクリックしましょう。

第一階層のメニュータイトルの下部にテキストを設定します。それぞれ「説明」に入力してください。

※第2階層のメニュータイトルには、説明の入力は不要です。

補足

「説明」が表示されていない場合は、ひとつ前の画面に戻ってください。

「メニューをカスタマイズ中です」の右にある歯車マークをクリックし、「説明」にチェックを入れると、表示されます。

公開をクリックして反映されたか確認します。

サイドメニューの「メニュー」から「FooterNavigation」をクリックします。

「メニューを削除」をクリックします。

公開をクリックして反映されたか確認します。

ロゴの左側にある「鉛筆マーク」をクリックします。

サイドメニューの画像を選択から、ヘッダーで使用したロゴ画像を選択します。

「プロフィールテキスト」から住所など変更してください。

各種SNSについてはアカウントがあれば入力します。

アカウントがなければ、元々記載されていたURLは削除しましょう。

「Emailリンク先ページのURL」は「お問い合わせ」ページのURLを入力します。「https://ドメイン名/contact/」と入力してください。

公開をクリックして保存します。

サイドメニューから「メニュー」をクリックします。

メニューを新規作成をクリックします。

メニュー名に「フッターメニュー1」と入力しします。次をクリックしてください。
※任意のメニュー名で構いません。管理しやすい名前をつけてください

項目を追加をクリックすると、右側にさらに画面が表示されます。

右側に表示された「固定ページ」から「サービス」をクリックします。左側のメニュー名「フッターメニュー1」の下部に「サービス」が追加されます。

同様に、他の固定ページのタイトルを追加していきます。

上から順番に、以下となるように追加してください。

※異なる順番で並んだ場合は、ドラッグアンドドロップで移動するか、「並び替え」をクリックしても調整可能です。

「<」をクリックして、サイドメニューに戻ります。「フッターメニュー1」と同じ手順で、「フッターメニュー2」を作ります。

メニューを新規作成をクリックして、メニュー名に「フッターメニュー2」と入力します。

1つ目と同様に、以下の項目を上から順番に追加してください。

公開をクリックして保存します。

Twitterの左側にある「鉛筆マーク」をクリックします。

今回はフッターにメニューを設置するため、Twitterのタイムライン表示は不要となります。
「従来のウィジェットを削除」をクリックします。

ブロックを追加する「+」マークをクリックします。

検索欄に「ナビ」と入力して検索すると、ナビゲーションメニューブロックが表示されます。
クリックして追加します。

「タイトル」に「オフィス家具レンタル」と入力し、「選択」から「フッターメニュー1」を選びます。

Facebookの左側にある「鉛筆マーク」をクリックします。

Facebookのタイムライン表示は不要となります。 Twitterのタイムラインを削除した手順と同様に、削除してください。

先ほどと同様に、ナビゲーションメニューブロックを追加してください。
「タイトル」に「運営会社」と入力し、「選択」から「フッターメニュー2」を選びます。

公開をクリックして保存します。

サイドメニューから「Lightning トップページスライドショー」をクリックします。

画像上のテキストを編集します。
以下のように編集してください

「スライド [1] 」の画像を変更をクリックし、 それぞれの画像をアップロードします。
※推奨画像サイズは1900×600pxです。

Office Proのホームぺージでは、スライド [1]のみ画像を登録しています。
スライド [2]の画像は不要となるため、削除してください。
※複数の画像を登録することで、画像がスライドする（流れる）仕組みになっています。スライドさせたい場合は、複数の画像を登録してください。

公開をクリックして保存します。

「×」をクリックして、カスタマイズの画面を閉じます。

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

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

編集画面が表示します。

まず、一番上のブロックをクリックしてください。これはレスポンシブスペーサーブロックです。

※WordPressの標準ブロックにも「スペーサー」はあります。しかしスペーサーでは、画面サイズに応じた余白の設定はできません。

カバーブロックを利用して背景画像を設置します。

レスポンシブスペーサーの下部にて「ブロックを追加」をクリックします。

「すべて表示」をクリックします。

左のブロック一覧から「カバー」をクリックします。

カバーブロックを設置後、左のパネルは不要になります。「×」で閉じてください。

アップロードから画像「office-pro-img04.jpg」をアップロードします。

設置したカバー下部のカラムブロックを選択します。

補足

カラムの選択が難しい場合は、編集画面の左上にある「三本線のアイコン（リスト表示）」をクリックします。上から3番目「カラム」をクリックすれば、選択できます。

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

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

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

▼変更前（WordPress6.1以前）

▼変更後（WordPress6.2以降）

選択したカラムをドラッグアンドドロップのうえ、カバー内に設置します。

カラムをクリックしたままドラッグし、カバー内の「タイトルを入力…」の上部でドロップすると、設置できます。

以下のように設置したことを確認します。

下部に表示された「タイトルを入力…」は段落ブロックです。
ここでは、このブロックは不要です。
選択して「⋮」から「段落を削除」をクリックします。

「こんなお悩みありませんか？」をクリックします。
こちらは見出しブロックです。

カバー内に見出しやテキストを設置すると、カバーの設定によっては自動的に文字色が白に変換されます。
そのため、右側パネルにある「スタイル」の「色」より、テキストを黒に設定してください。

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

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

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

▼変更前（WordPress6.1以前）

▼変更後（WordPress6.2以降）

また、この見出しには、蛍光ペンでマーカーを引いたように装飾されています。この装飾を削除しましょう。
まずは、「こんなお悩みありませんか？」をドラッグして選択した状態にします。
次に、下向き矢印から「蛍光マーカー」をクリックすると、蛍光マーカーの色を設定する画面が表示されるので、クリアで削除します。

見出しの下にあるブロックはここでは不要です。「⋮」から「レスポンシブスペーサーを削除」をクリックします。

次に、「こんなお悩みありませんか？」の下部にある「前任者が務めた～」から始まる文章を変更します。
リスト形式になっているため、文章の先頭に「チェック」のアイコンが付いています。
以下のようにテキストを編集してください。

編集したテキストを蛍光マーカーで装飾します。
リスト形式のテキストをすべてドラッグして選択し、下向き矢印から「蛍光マーカー」をクリックします。

その後に、以下のように色を編集します。

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

グループ化することで、「こんなお悩みありませんか？」の背景色や余白の設定ができます。

見出しとリスト全体をドラッグして選択します。「⋮」から「グループ化」をクリックします。

グループブロックに背景色を設定します。
右側パネルの「背景」より、カスタムカラー1を指定します。

続いて、グループブロック内の余白を設定します。パディングに「32px」と設定してください。

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

WordPress6.3より、パディングの入力欄の表示手順が変更されました。

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

▼変更前（WordPress6.2以前）

▼変更後（WordPress6.3以降）

カバー内のカラムを幅広に設定します。「こんなお悩みありませんか？」の部分が背景画像より少し外側に広がって表示されます。
カバー内のカラム全体を選択します。

補足

カラム全体の選択が難しい場合は、グループブロックを選択して、編集画面最下部のナビゲーションを確認してください。左から3番目「カラム」をクリックすれば、選択されます。

「配置を変更」から「幅広」をクリックします。

めがねの画像は不要です。画像を選択して「⋮」から「画像を削除」をクリックします。

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

「実績豊富な当社におまかせください！」の背景にあるカバーを選択します。

オーバーレイの色を「カスタムカラー3」に変更します。

見出しのテキストを以下のように編集します。

見出しのテキスト「3」を選択し、下向き矢印から「インライン文字サイズ」をクリックします。

「カスタマイズ設定」から48pxにして適用をクリックします。

再度「3」を選択します。
下向き矢印から「ハイライト」でカスタムカラー2をクリックします。
色を1文字のみ変更できます。

見出しの下に段落ブロックを追加して、以下のように編集します。

段落の下にあるレスポンシブスペーサーをクリックして、サイズを変更します。

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

レスポンシブスペーサーのサイズ表記が変更されました。

• 変更前
  小 / 中 / 大 / カスタム
• 変更後
  XS / S / M / L / XL / カスタム（S：小　M：中 　L：大）

▼変更前（VK Blocks1.42.1以前）

▼変更後（VK Blocks1.43.0以降）

左のカラムにある画像をクリックして、「置換」から画像をアップロードします。

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

見出し「納得いくまで提案いたします」を以下のように編集します。

段落「打ち合わせの段階から〜」を以下のように編集します。

左カラムをクリックします。

背景色を編集します。

カラム内の余白を調整します。「寸法」の単位を「REM」に変更します。

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

左から順番に、上、右、下、左の余白を指定できます。

4rem、2rem、4rem、2remと設定してください。

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

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

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

▼変更前（WordPress6.2以前）

手順1

手順2

手順3

手順4

▼変更後（WordPress6.3以降）

手順1

手順2

手順3

以下、同様に編集してください。

カラム全体を選択します。

補足

カラム全体の選択が難しい場合は、左のカラムを選択した状態で「リスト表示」をクリックします。

左のカラムは濃い水色で表示されています。そのひとつ上のカラムをクリックします。

カラム全体を選択した状態となります。

補足

さらに、別の方法もご紹介します。
左のカラムをクリックします。左端のカラムのアイコン「カラムを選択」をクリックすると、カラム全体を選択できます。

「配置を変更」から「全幅」にします。

カラムの下にブロックを追加します。検索窓に「レス」と入力し、レスポンシブスペーサーをクリックします。

余白の設定を「中」にします。

レスポンシブスペーサーの下「ブロックを追加」をクリックします。検索窓に「ボタン」と入力し、VKマークのある方のボタンブロックをクリックします。

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

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

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

Font Awesome（フォントオーサム）とは

• Font Awesome … 海外のWebアイコンフォントサービス。無料版と有料版があり、どちらも商用利用可能。『Lightning』では、設定しなくてもFont Awesome無料版をすぐに利用できる。

OfficeProのホームページでは、見出しやボタンなどに、Font Awesomeのアイコンを利用しています。

▲出典：Font Awesome（フォントオーサム）

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

ブラウザの別タブでFont Awesomeのページが表示します。

検索窓に「angle」と入力すると、検索結果に「angle-right」があります。クリックします。

<i class="fa-solid fa-angle-right"></i>と記載されている部分をクリックすることで、該当コードのコピーが可能です。
※コピー完了後、Font Awesomeのページは不要となります。ブラウザのタブを閉じてください。

WordPressの編集画面に戻ります。「文字の後」にコピーしたコードを貼り付けてください。

ボタンの下にレスポンシブスペーサーを追加します。

以上でトップページの作成は終わりです。