MatchLayerのトップページの見た目を変える方法｜色・各セクション・並び順を設定する

セットアップが終わってサイトを開くと、トップページにはヒーローやカテゴリ、実績などのセクションが最初から並んでいます。ただ、文言や色はプリセットの初期値のまま。「ここを自分のサービスの言葉に変えたい」「色をブランドに合わせたい」と思ったときにどこを操作すればいいのか、この記事はその疑問に答える操作マニュアルです。

MatchLayer のトップページは、ml-top ページに専用テンプレートが常に適用される仕組みになっています。テーマを編集したりショートコードを書いたりする必要はありません。MatchLayer → トップページ設定** の画面を操作するだけで、色・各セクションの中身・表示する／しない・並び順まで一通り変えられます。

想定読者：MatchLayer の初期セットアップ（プラグイン有効化・ライセンス登録・サイトジャンル選択）を済ませた管理者の方。WordPress の基礎操作（固定ページの編集、表示設定の変更など）はひととおりできる前提で書いています。まだセットアップが終わっていない場合は、先にセットアップマニュアルを読んでください。

Table of Contents

この記事でできるようになること

通読すると、トップページについて次のことができるようになります。

サイト全体のアクセントカラー（ボタンや見出しの色）を1色変えるだけで統一する
トップに並ぶセクションの表示／非表示と並び順を変える
ヒーローのキャッチコピー・サブコピー・2つのボタン・背景画像・検索バーを設定する
「使い方」3ステップの文言とアイコンを変える
注目リスティング・レビュー・統計などの表示件数やラベルを調整する

所要時間はおおよそ 20分です。一度に全部やる必要はないので、気になるセクションから手をつけてもらって構いません。

大前提：MatchLayer のトップページ（ml-top）には専用テンプレートが常に適用されています。「テンプレートを有効にする」といったスイッチはありません。管理画面でONにしたセクションが、上から順にフロントに並ぶ、という関係になっています。

1. トップページ設定の画面を開く

左メニューの MatchLayer → トップページ設定 をクリックします（URL：wp-admin/admin.php?page=matchlayer-homepage）。

この1画面に、これから設定する項目がすべて縦に並んでいます。上から、

専用テンプレート設定（対象ページが ml-top であることの確認だけ）
ブランドカラー
セクション管理（表示ON/OFFと並び替え）
各セクションの中身（ヒーロー、仕組み説明、統計、注目リスティング、レビュー、登録促進バナー）

という並びです。

保存はこまめに：この画面はページ最下部の 「保存」ボタンを押すまで反映されません。縦に長い画面なので、ひとつのセクションを編集したらいったん保存する、くらいのつもりで進めると安全です。

2. ブランドカラーを変える

一番効果が大きくて、一番かんたんなのがこれです。

① カラーピッカーで色を選ぶ

「ブランドカラー」の色見本をクリックすると、カラーピッカーが開きます。サービスのイメージカラーや、ロゴに合わせた色を選んでください。初期値はピンク系（#d6526a）です。

② 保存して確認する

保存すると、この1色がトップページのボタン・見出し・バッジ・CTAバナーに反映されます。さらにこの色は、トップページだけでなく会員ページや一覧ページなど、MatchLayer が表示する画面全体のボタンやリンクにも同じように使われます。色を何カ所も個別に合わせる必要はなく、ここ1カ所で全体のトーンが決まります。

補足：トップページ全体の背景は白で固定されています。変わるのは、アクセントとして使われる色です。

補足：色を空欄のまま保存すると、初期値のピンク系に戻ります。

注意：この色設定はテーマ側のデザインには干渉しません。ヘッダーやフッターなどテーマが描画する部分の色を変えたいときは、テーマ側のカスタマイザーで調整してください。

3. 表示するセクションと並び順を決める

「セクション管理」は、トップページにどのブロックを・どの順番で並べるかを決めるところです。

各行は、次の3点セットになっています。

ドラッグハンドル（十字の矢印アイコン）：つかんで上下に動かすと並び順が変わります
表示チェックボックス：チェックを外すと、そのセクションはフロントに出力されなくなります
セクションタイトル入力欄：そのセクションの見出し（例：「地域から探す」「カテゴリから探す」）を変えられます

① 並び替える

行のドラッグハンドルをつかんで上下に動かすだけです。ここで並べた順番が、そのままフロントの上から下への表示順になります。

② いらないセクションを隠す

たとえば「まだレビューが集まっていないのでレビュー欄は当面隠したい」というときは、レビューの行のチェックを外します。チェックを外したセクションは、フロントに一切表示されません（空の枠が残ることもありません）。

③ セクションの見出しを変える

ヒーローと一番下のバナーを除く各セクションには、見出しの入力欄があります。ここを書き換えると、フロント側のそのセクションの上に表示される見出しが変わります。空欄にすると、その見出し自体が出なくなります。

補足：何も設定していない新規状態では、全セクションが表示ONになっています。まずは全部出した状態でフロントを眺めて、不要なものを消していく進め方がおすすめです。

4. ヒーロー（一番上の大見出し）を編集する

ヒーローは、訪問者が最初に目にする一番上の大きなエリアです。フロントでは下の画像のように表示されます。

設定は「ヒーローセクション設定」でおこないます。

ここで、次の項目を編集できます。

項目	何が変わるか
キャッチコピー（見出し）	一番大きく出る一文（例：「必要な場所を、必要な時間だけ。」）
サブコピー（説明文）	キャッチコピーの下の補足文
ボタン①テキスト（利用者向け）／URL	探す側に押してほしいボタン。初期リンク先はリスティング一覧
ボタン②テキスト（提供者向け）／URL	掲載する側に押してほしいボタン。初期リンク先は掲載作成ページ
背景画像	ヒーローの背景。未設定なら背景色のみで表示されます

検索バーを出す／消す

ヒーロー設定の中に 「ヒーロー検索バーを表示する」 のチェックがあります。ONにすると、ボタンの下にキーワード入力欄とカテゴリーの選択メニューが並んだ検索バーが出ます。訪問者がここから検索すると、リスティング一覧ページに条件付きで移動します。

補足：サイトジャンル設定で都道府県機能をONにしている場合は、検索バーに都道府県の選択メニューも自動で追加されます。エリアで探すサービスなら、ONのままにしておくと便利です。

5. 「使い方」3ステップを編集する

「MatchLayerの使い方」として、トップ中ほどに3つのステップを横並びで見せるセクションです。「登録する → 出会う → 成立する」のような利用の流れを、初めての訪問者に伝える役割があります。

「仕組み説明セクション設定」で、ステップ1〜3それぞれについて次を設定します。

ステップタイトル（例：「エリアで探す」）
ステップ説明文（その手順の短い説明）
ステップアイコン：「アイコンを選ぶ」ボタンを押すと、アイコンが一覧で並んだ選択画面が開きます。クリックで選ぶだけなので、アイコンのコードを覚える必要はありません。

補足：自分のサービスの実際の流れに合わせて3ステップの言葉を書き換えるだけで、ぐっと「自分のサイトらしさ」が出ます。スマートフォンで見たときは、3つが縦に積まれて表示されます。

6. 統計・注目・カテゴリ・レビュー・地域の各セクション

残りのセクションも、同じ画面の中で設定できます。それぞれ「何のためのセクションか」と「設定できる項目」をまとめます。

統計バナー

登録ユーザー数・公開中のリスティング数・成立した取引の件数を、自動集計してそのまま数字で見せます。手で数字を入れるのではなく、サイトの実数が表示されます。設定できるのは各数字のラベル（例：「登録者数」「掲載中」「成立件数」）です。

注目リスティング

公開中のリスティングをカード形式でピックアップして見せます。

並び順：新着順（公開が新しい順）か、人気順（お気に入りが多い順）を選べます
表示件数：3〜12件の範囲で指定できます

カードにはタイトル・カテゴリ・都道府県（設定があれば）・サムネイルが出て、クリックすると詳細ページに移動します。

カテゴリナビ

登録済みのカテゴリをアイコン付きのカードで並べ、クリックするとそのカテゴリで絞り込んだ検索結果に飛ばします。0件のカテゴリを隠す設定や、カテゴリの並び替えもできます。

レビュー抜粋

公開されたレビューを新しい順に見せます。表示件数は 3〜6件から選べます。各カードには評価の星・コメント・投稿日に加えて、どのリスティングへのレビューかも表示されます。

補足：レビューがまだ1件もないときの挙動を選べます。「セクションごと隠す」か「『まだレビューがありません』と出す」かのどちらかです。立ち上げ直後は、セクションごと隠しておくとすっきりします。

地域ナビ（地域から探す）

地方・都道府県をクリックして、その地域のリスティングに絞り込めるセクションです。これは都道府県機能と連動しています。

注意：サイトジャンル設定で都道府県機能がOFFになっていると、このセクションは並び順でONにしていてもフロントに表示されません。「地域から探す」を出したいのに出ないときは、まず都道府県機能がONか確認してください。

7. 一番下の登録誘導バナーを編集する

ページを最後まで見た訪問者に、もう一度登録をうながす横長のバナーです。フロントでは一番下に出ます。

「登録促進バナーセクション設定」で、

見出し（例：「あなたにぴったりのスペースを、いますぐ予約。」）
説明文
ボタンテキスト
ボタンリンク（未設定なら会員登録ページ）

を設定できます。さらに 「ログイン済みユーザーに非表示」 にチェックを入れておくと、すでに会員の人にはこのバナーが出なくなります。新規登録をうながすバナーなので、基本はチェックを入れておくのがおすすめです。

8. 保存してフロントで確認する

ひととおり設定したら、画面最下部の 「保存」ボタンを押します。

そのあと、ブラウザでサイトのトップ（https://あなたのサイト/）を開いて、思いどおりになっているか確認しましょう。保存してからリロードすれば反映されます。

確認ポイント：

ボタンや見出しの色が、設定したブランドカラーになっている
セクションが、設定した順番で・設定したものだけ並んでいる
ヒーローのキャッチコピーやボタンの文言が変わっている
隠したはずのセクションが消えている

9. 自分で作ったトップページに差し替えたい場合

「セクションを組み合わせる方式ではなく、自分でデザインした固定ページをトップにしたい」というケースもあります。その場合は、MatchLayer 側ではなく WordPress の標準機能で切り替えます。

WordPress 管理画面の 設定 → 表示設定 を開く
「ホームページの表示」 で「固定ページ」を選ぶ
「ホームページ」に、自分で作ったページを指定して保存する

これで、訪問者が最初に見るページがそちらに切り替わります。なお /ml-top/ のページ自体は残るので、MatchLayer のトップ用セクションを後で見返したり、また元に戻したりもできます。

困ったときは（FAQ）

Q1. 設定を保存しても、フロントに反映されない

A. まず画面最下部の 「保存」ボタンを押したか確認してください。押したのに変わらない場合は、ブラウザをリロード（再読み込み）してみてください。それでも変わらないなら、ライセンスが未認証だと設定の保存自体がブロックされることがあるので、セットアップマニュアルのライセンス登録の章を確認してください。

Q2. 「地域から探す」セクションが出てこない

A. 都道府県機能がOFFになっていると、このセクションは表示されません。サイトジャンル設定（または一般設定）で都道府県機能をONにしてください。

Q3. ブランドカラーを変えたのに、ヘッダーやフッターの色は変わらない

A. ブランドカラーが効くのは MatchLayer が描画する部分（ボタン・リンク・各セクション）です。ヘッダー・フッターはテーマが描いている部分なので、テーマ側のカスタマイザーで色を調整してください。

Q4. レビューがまだ無いので、その欄を消したい

A. 2通りあります。①「セクション管理」でレビューの行のチェックを外して常に隠す、②レビューセクション設定の「レビューが無いときの挙動」で「セクションごと隠す」を選ぶ。立ち上げ直後は、どちらでも構いません。

Q5. 一度プリセットの初期文言に戻したい

A. 各入力欄を空にして保存すると、その項目は初期値で表示されます（色は初期色、見出しは初期見出し）。全部まとめてリセットする機能はないので、戻したい欄を個別に空にしてください。

Q6. トップが「ページが存在しません」と表示される

A. WordPress の 設定 → 表示設定 → ホームページの表示 で、ホームページに「トップページ」（ml-top）が指定されているか確認してください。通常は有効化時に自動設定されますが、手動で変更したあとはこの指定が外れていることがあります。

用語集

用語	意味
トップページ設定	MatchLayer 管理画面の、トップページの色・セクション・文言をまとめて設定する画面
専用テンプレート	`ml-top` ページに常に適用される、MatchLayer 独自のトップページ用テンプレート。ONにしたセクションが上から順に並ぶ
セクション	ヒーロー・仕組み説明・統計・注目リスティング・カテゴリナビ・地域ナビ・レビュー・登録促進バナーといった、トップを構成するブロックのこと
ブランドカラー	ボタン・リンク・見出しなどに使われるアクセント色。1色変えると MatchLayer の画面全体に反映される
ヒーロー	トップ最上部の、キャッチコピーとボタンが入る大きなエリア
CTA	「Call To Action」の略。訪問者に押してほしいボタン（探す・掲載する・登録するなど）
リスティング	提供者が掲載する案件・サービス・モノ・スペース等の総称（呼称はサイトジャンルで変わる）