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

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

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

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

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

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

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

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

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

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

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

ロゴの最大高さについて

必要に応じてロゴの最大高さを指定できます。たとえば、モバイルにのみ最大高さを「40」pxと指定すると、モバイルではロゴが少し小さく表示されます。

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

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

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

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

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

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

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

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

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

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

例として「導入事例」という固定ページを作成します。

まず、タイトルに「導入事例」と入力すると、「リンク」にタイトルの内容がそのまま入ります。

「リンク」はページのURLの最後の部分になります。

日本語が含まれるURLをメールなどに添付すると、以下のような表記になってしまいます。日本語の部分が英数字や記号の羅列に置き換わるからです。

そのため、「リンク」は半角英数の文字列に変更しておきます。青のテキスト「導入事例」をクリックすると、編集できます。

以下のよう入力して、公開をクリックします。

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

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

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

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

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

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

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

サイドメニュー右側の「固定ページ」から「私たちの強み」をクリックします。
サイドメニュー左側の「お問合わせ」の下に「私たちの強み」が追加されたことを確認します。

同様に、以下固定ページのタイトルを、それぞれメニューへ追加してください。

メニュータイトルの位置を変更します。

「並び替え」をクリックします。

「私たちの強み」の上向き矢印をクリックすると、1つ上に移動します。
上向き矢印のクリックをくり返し、「私たちの強み」を「ホーム」と「サービス」の間に移動させます。

同様に、以下メニュータイトルの位置をそれぞれ変更してください。

第2階層のメニューは、右向き矢印をクリックすると第2階層になります。

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

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

補足

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今回はフッターにメニューを設置するため、X

旧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」をアップロードします。

背景画像に被さる色を黒に変更します。

①まず、右側の設定パネルから「スタイル」をクリックします。
②つぎに、オーバーレイをクリックし、③「黒」をクリックして色を変更します。

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

補足

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

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

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

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

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

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

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

また、この見出しは蛍光マーカーで装飾されています。この装飾を削除しましょう。

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

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

次に、「こんなお悩みありませんか？」の下部にある「前任者が務めた～」の部分を編集します。

この3行はリストブロックを使用しています。

WordPress標準のリストについて

WordPress標準のリストは、親子のブロックで構成されています。

• 親のブロック：リスト
  • 子のブロック：親のブロックに含まれる個々のリスト項目

まず、親のリストを選択して、以下のように編集します。
リストマークが黒色のチェックのアイコンに変わり、合わせてテキストも黒色になります。

次に、各リスト項目のテキストをそれぞれ以下のように編集してください。

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

2つ目と3つ目も同様に蛍光マーカーで装飾します。

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

見出し「こんなお悩みありませんか？」とその下のリストをグループ化して、背景色と余白を設定します。以下のようになります。

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

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

続いて、グループブロック内の余白を設定します。

余白は「サイズ」で設定できます。パディングが内側の余白です。
上下と左右それぞれXSからXLまで選べます。ここでは、どちらもサイズを「M」にします。

グループブロックの上にレスポンシブスペーサーがひとつあります。

これを複製してグループブロックの下に追加してみましょう。上下に同じスペースを空けることで、配置のバランスが良くなります。

レスポンシブスペーサーを選択して「⋮」から「複製」をクリックします。

複製したレスポンシブスペーサーをグループブロックの下に移動させます。
「下に移動」をクリックします。

カバー内のカラムを幅広に設定します。

カラムを幅広に設定すると、PCでは背景画像（カバーブロック）より少し外側に広がって表示されます。そうすることで「こんなお悩みありませんか？」の部分を右側にずらして表示できます。

カラムを幅広にしたあとは以下のようになります。

実際にやってみましょう。

「ドキュメント概観」をクリックして、リストビューを開きます。
カバー内のカラム全体を選択します。

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

カラム全体を選択したまま、続いて、カラムの下に自動でつく余白を解除しましょう。
ここでは不要だからです。

以下の画像で示すと、自動でつく余白はオレンジの部分です。この余白を解除すると、垂直方向の配置のバランスがより良くなります。

「ブロックの余白」から「下0」をクリックします。

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

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

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

右側パネルにある「スタイル」のオーバーレイの色を「カスタムカラー3」に変更します。

見出し「実績豊富な当社に～」」のテキストを以下のように編集します。

メモ

このブロックがVK Blocksの見出しになっている場合は、WordPress標準の見出しに変換しておきましょう。

ブロックツールバーのVKマークのある見出しのアイコンをクリックし、「見出し」をクリックすると、簡単に変換できます。

変換後、右側パネルの「スタイル」で「装飾無し」を選んでください。

※VKマークの見出しは非推奨と表示されます。ブロックエディターの機能向上により、WordPress標準の見出しで事足りるようになったためです。

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

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

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

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

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

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

右側パネル「スタイル」にて以下のように編集します。

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

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

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

右側の設定パネルの「スタイル」にて背景色を編集します。

「サイズ」で上下と左右のパディングを調整します。

上下のパディングで「カスタムサイズを設定」をクリックすると、単位を指定して数値を入力できます。

単位は「REM」を選び、「４」と入力します。

同様に、左右のパディングが「2rem」となるように設定してください。

左のカラムに設定したスタイル（背景色とパディング）をコピーして、残りのカラムに適用しましょう。

左のカラムを選択して「︙」」から「スタイルをコピー」をクリックします。

真ん中のカラムを選択して「︙」」から「スタイルを貼り付け」をクリックします。
これだけで背景色とパディングのスタイルをまとめて適用できます。

右のカラムにも同様にスタイルを貼り付けください。

あとは、それぞれの画像、見出し、段落を編集します。

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

補足

カラム全体の選択が難しい場合は、左のカラムを選択した状態で「ドキュメント概観」をクリックします。

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

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

補足

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

「配置」を「全幅」にします。

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

余白の設定を「M（旧：中）」にします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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