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」を選びます。

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

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

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

編集画面が表示します。

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

一番上にある「スライダー」をクリックします。ここはスライダーブロックを使用しています。

「スライダー」の右矢印をクリックすると、中に「スライダーアイテム」が3つあるのが確認できます。

スライダーを編集しやすくするために、表示を切り替えます。

リストビューで「スライダー」を選択し、右側パネルにある「エディタ設定」より、以下をクリックします。

編集画面上にスライダーアイテムが縦に3つ並んで表示されます。

Office Proのホームぺージではスライドさせないため、スライダーアイテムを1つだけにします。

上から2つ目にある、以下のスライダーアイテムを残します。テキストの配置や背景色などそのまま利用できるためです。

1つ目のスライダーアイテムを選択し、「︙」から「削除」をクリックします。

3つ目も同様に削除してください。

スライダーアイテムについて

削除後にやっぱりスライドさせたくなったときは、スライダーアイテムを複製して編集するとよいでしょう。

スライダーアイテムの背景画像を編集します。

スライダーアイテムを選択し、以下の画像をそれぞれアップロードします。

背景画像（PC）にすでにある画像は画像を削除をクリックすれば、アップロードが可能になります。

スライダーアイテムの中を編集します。

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

※編集画面上でレスポンシブスペーサーをクリックしても選べないときは、リストビューで選択してください。

スライダーアイテムの縦幅をより広げるために、「L」から「XXL」に変更します。

下部にあるレスポンシブスペーサーも同様に「XXL」にしてください。

「WEB TOTAL CONSULTING」をクリックします。これは見出しブロックです。

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

文字サイズを少し小さくするために、右側パネルにある「スタイル」の「タイポグラフィ」で文字サイズを変更してください。

さらに、見出しの下部に適度な余白をつけるため、「ブロックの余白」から「下XS」をクリックします。

「Change the world〜」をクリックします。これは段落ブロックです。

段落のテキストを以下のように編集します。太字を解除し、文字サイズを少し大きくしてください。

段落「インターネット上でのビジネスを〜」は不要です。

段落を選択して、「︙」から「削除」をクリックします。

「詳しくはこちら」をクリックします。これはWordPress標準のボタンブロックです。

Office ProのホームぺージではVK Blocksのボタンで統一しています。そのため、このボタンを削除してVK Blocksのボタンに変更します。

WordPress標準のボタンについて

WordPress標準のボタンは、親子のブロックで構成されています。

• 親のブロック：全体的なボタンブロック
  • 子のブロック：親のブロックに含まれる個々のボタン

ボタンブロックを完全に削除するには、親のブロックの削除が必要です。

リストビューを閉じている場合は、ドキュメント概観をクリックして、もう一度開いてください。

親のボタンをクリックして「︙」から「削除」をクリックします。

「今ならオンラインで無料コーディネート〜」の下部にマウスポインターを重ねます。
「+」マークが表示されます。

「+」をクリックします。

検索窓に「ボタン」と入力し、VKマークのある「ボタン」をクリックします。

以下のように編集してください。

リンクURLを入力して送信をクリックします。

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

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

編集したメインビジュアルを確認しましょう。

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

メインビジュアルの下部にあるレスポンシブスペーサーを確認します。

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

レスポンシブスペーサーを選択して「︙」から「後に追加」をクリックします。

「ブロックを追加」をクリックします。

検索窓に「カバー」と入力して、カバーブロックを追加します。

アップロードから画像「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の編集画面に戻ります。「文字の後」にコピーしたコードを貼り付けてください。

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

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