SALONのトップページは、色んなコンテンツをドラッグ&ドロップで組み合わせて、下層ページへの導線をつくれます。
まずは、下層ページをある程度準備してからの方が設定しやすいです。どの順番で何を表示するか、じっくりこだわってみてください。
当記事では、下層ページへの導線となり、サイトの印象も左右するトップページの作成方法を解説します。
設定できる内容
トップページは、大きく分けて以下の二つで構成されています。
| ヘッダーコンテンツ |
トップページのファーストビューです。 ・画像スライダー / 動画（mp4動画） |
| メインコンテンツ |
トップページのメインコンテンツです。以下を自由に組み合わせて作成できます。 ・デザインコンテンツ |
設定箇所
トップページは、ダッシュボード内のTCDテーマ > トップページで設定します。
ヘッダーコンテンツ
サイトに訪問した際に最初に表示される画面です。何のサイトか伝わるように設定しておきましょう。
まずは、ヘッダーバーのタイプ（透明 or ホワイト）を選択します。
| キャッチコピー / ロゴ画像 |
キャッチコピー ロゴ画像 |
| ヘッダー画像 / 動画 | 画像スライダー ・画像アップロード（単数・複数枚対応） ・アニメーションタイプ ・フェード ・ズームイン ・ズームアウト ・縦幅 ・画面の高さ ・原寸 ・カスタム（数値指定） ・オーバーレイ動画 ・動画アップロード ・オーバーレイ |
ニュースティッカー
ヘッダーコンテンツの最下部にはニュースティッカーを表示できます。設定項目はこれだけです。
- 表示/非表示
- 表示する投稿タイプ（投稿 or お知らせ）※最新記事を5件表示
ニュースティッカーとは
電光掲示板のように1件ずつ記事を表示します。限られたスペースで最新情報・リアルタイムな情報を発信することに適しています。
メインコンテンツ
メインコンテンツとは、トップページのヘッダーコンテンツより下に表示される部分です。
基本設定
基本設定では、各アイテムの見出しのフォントやサイズ感を一括設定できます。
コンテンツビルダー
各種アイテムをドラッグ&ドロップで組み合わせて、メインコンテンツを構成できます。
12個のアイテム＋フリースペースを用意しました。
ヘッダーコンテンツとメインコンテンツの設定次第で、このように色んなタイプのトップページを作成可能です。
| デザインコンテンツ | 文章と画像をレイアウトしたデザインです。画像はスライダー形式で2箇所に登録可能です。 |
| ラージバナー | 画面幅サイズのバナーを登録できます。投稿やお知らせ記事も表示可能。 |
| 商品一覧 | WooCommerceに登録した商品をカルーセル or カード形式で表示します。 |
| 商品ランキング | WooCommerceに登録した商品をレビュー平均評価順、売上個数や金額、アクセス順などで表示します。 |
| メニューリスト | お品書きなどの記載に最適なメニューリストを表示できます。 |
| 投稿一覧 | 投稿記事をカルーセル or カード形式で表示します。 |
| お知らせ一覧 | お知らせ記事をカード形式で表示します。アイキャッチ画像未登録でも使えます。 |
| 記事ランキング | 人気記事を閲覧数順で表示します。カルーセル or カード形式を選択可能。 |
| ユーザースライダー | WordPressに登録したユーザーを、カルーセル形式で表示します。 |
| 支店一覧 | 任意のテキストとURLを設定したボタンを、任意の数だけ綺麗に並べて表示できます。 |
| ギャラリー | 複数の画像を、カルーセル形式で表示します。 |
| よくある質問 | 任意の数だけ「質問と回答のセット」を登録して、一覧表示できます。 |
| フリースペース | HTMLタグ or パターンを使ってコンテンツを作成できます。 各コンテンツを使わずにトップページを作成するときにも使えます。 |
必要なアイテムのみを追加して、ドラッグ&ドロップで自由に並び替えができます。表示・非表示もワンクリックです。また全アイテムに「コンテンツID」を設定可能です。
アンカーリンク（ページ内リンク）させるときに任意のid名を設定できます。
デザインコンテンツ
文章と画像をレイアウトして表示します。画像群は2箇所設定可能で、それぞれ複数枚セットすると、スライダー形式で表示される仕様です。
| 設定できる項目 | |
| 画像の表示位置 | 左右を入れ替え可能。 |
| リードコピー | 縦書き・横書きを選んでリードコピーを設定できます。 |
| 説明文 | コンテンツの説明文を入力します（PC・スマホ別）。 |
| ボタン | ボタンのラベルを設定します。リンク先はアーカイブページです。 |
| 縦書きラベル | メイン画像の上部に縦書きラベルを設定できます。 |
| メイン画像 | メイン画像を設定できます。複数枚の場合スライダー形式で表示される仕様です。 |
| サブ画像 | メイン画像を設定したときのみ、サブ画像も任意で設定できます。複数枚の場合スライダー形式で表示される仕様です。 |
ラージバナー
画面幅サイズのバナーを設定できます。
| 設定できる項目 | |
| 見出し | バナーの見出しを設定します。 |
| コンテンツ | 説明文 / 投稿 / お知らせからコンテンツを選択します。 |
| 説明文 | コンテンツで説明文を選択時、説明文を登録できます（PC・スマホ別）。 |
| ボタン | コンテンツで説明文を選択時、ボタンのラベルとリンク先を設定できます。 |
| 記事のタイプ、並び順 | コンテンツで投稿 or お知らせを選択時、以下の設定が可能です。 ・記事のタイプ（全記事・カテゴリー・ID指定） ・記事の並び順（新着順・ランダム） |
| 背景 | バナーの背景画像を設定します。画像の代わりに動画も設定可能で、お好みで視差効果やオーバーレイも設定できます。 |
商品一覧
WooCommerceに登録した商品を表示できます。レイアウトは「カルーセル」か「カード」の2種類から選択できます。
| 設定できる項目 | |
| 見出し | 見出しを設定します。 |
| 説明文 | 説明文を登録できます（PC・スマホ別）。 |
| 商品一覧 | ・レイアウト（カルーセル / カード） ・商品のタイプ（すべて / カテゴリー / タグ / 注目の商品 / ID指定） ・商品の並び順（管理画面の順番（並び替えタブ） / 新着 / ランダム） ・表示する商品数 |
| ボタン | ボタンのラベルとリンク先を設定できます。 |
| 背景をグレーにする | コンテンツの背景をグレーに変更します。前後のアイテムと区切りたいときにご利用ください。 |
商品ランキング
WooCommerceに登録した商品をランキング形式で表示できます。レイアウトは「カルーセル」か「カード」の2種類から選択できます。商品カテゴリー（コーヒー/マグなど）で絞ってランキング表示することも可能です。
| 設定できる項目 | |
| 見出し | 見出しを設定します。 |
| 説明文 | 説明文を登録できます（PC・スマホ別）。 |
| 商品一覧 | ・ランキングの種類（レビュー平均評価順 / 売上金額順 / 売上個数順 / アクセス数順） ・商品のカテゴリー ・表示する商品数 |
| ボタン | ボタンのラベルとリンク先を設定できます。 |
| 背景をグレーにする | コンテンツの背景をグレーに変更します。前後のアイテムと区切りたいときにご利用ください。 |
メニューリスト
店舗のお品書きやメニューをトップページに掲載したいときにお使いください。画像とテキストで綺麗にレイアウトできるので、メニューの写真を綺麗に撮影すれば、すぐに作成できます。
| 設定できる項目 | |
| 画像一覧 | 上部に表示する画像群を設定します（2カラム/3カラムを選択可）。画像には「おすすめ」等のラベルも登録可能です。 |
| 見出し | 見出しとサブタイトルを設定します（LUNCHなど）。 |
| メニューリスト | タイトルと価格を設定して、メニューをリスト表示します。 |
| 画像一覧 | 下部に表示する画像群を設定できます（2カラム/3カラムを選択可）。画像には「おすすめ」等のラベルも登録可能です。 |
| 背景をグレーにする | コンテンツの背景をグレーに変更します。前後のアイテムと区切りたいときにご利用ください。 |
投稿一覧
投稿記事をカルーセル or カード式で表示します。
| 設定できる項目 | |
| 見出し | コンテンツの見出し。 |
| 説明文 | コンテンツの説明文を入力します（PC・スマホ別）。 |
| 記事一覧 | ・レイアウト（カルーセル / カード） ・記事のタイプ（すべて / カテゴリー / ID指定） ・記事の並び順（新着 / ランダム） ・表示する記事の数 |
| ボタン | ボタンのラベルを設定します。リンク先は投稿アーカイブページです。 |
| 背景をグレーにする | コンテンツの背景をグレーに変更します。前後のアイテムと区切りたいときにご利用ください。 |
お知らせ一覧
カスタム投稿「お知らせ」で作成した記事をカード式で表示します。アイキャッチ画像なしでも利用できるデザインです。
| 設定できる項目 | |
| 見出し | コンテンツの見出し。 |
| 説明文 | コンテンツの説明文を入力します（PC・スマホ別）。 |
| 記事一覧 | ・記事の並び順（新着 / ランダム） ・表示する記事の数 |
| ボタン | ボタンのラベルを設定します。リンク先はお知らせアーカイブページです。 |
| 背景をグレーにする | コンテンツの背景をグレーに変更します。前後のアイテムと区切りたいときにご利用ください。 |
記事ランキング
投稿記事を、閲覧数やいいね数順でランキング表示します。レイアウトは「カルーセル」か「カード」の2種類から選択できます。
| 設定できる項目 | |
| 見出し | コンテンツの見出し。 |
| 説明文 | コンテンツの説明文を入力します（PC・スマホ別）。 |
| 記事一覧 | ・レイアウト（カルーセル / カード） ・表示順（閲覧数、いいね数） →閲覧数は日間・週間・月間・年間・無期限から選択可能 ・記事のタイプ（すべて / カテゴリー） ・表示する記事の数 |
| ボタン | ボタンのラベルを設定します。リンク先はお知らせアーカイブページです。 |
| 背景をグレーにする | コンテンツの背景をグレーに変更します。前後のアイテムと区切りたいときにご利用ください。 |
ユーザースライダー
WordPressに登録しているユーザーを、スライダー形式で表示できます。
| 設定できる項目 | |
| 見出し | コンテンツの見出し。 |
| 説明文 | コンテンツの説明文を入力します（PC・スマホ別）。 |
| ユーザー一覧 | 登録されているユーザーが、一覧表示されるので、一部のみを非表示にしたり、並び替えも可能です。 |
| ボタン | ボタンのラベルを設定します。リンク先は、ユーザー一覧ページです。 |
>> ブログの著者プロフィールを設定しよう
支店一覧
複数のリンク先をグループ化して綺麗にレイアウトできます。複数の店舗情報や内部リンクの整理にご活用ください。
| 設定できる項目 | |
| 見出し | コンテンツの見出し。 |
| エリアや支店名の登録 | テキストやURLを登録して、任意の数だけボタンを配置できます。 カラム数は1~5から選択できます（スマホは1 or 2のみです）。 |
設定画面は、以下のようになっています。
アイテムの並び替えや、非表示も可能です。
ギャラリー
画像を複数登録して、自動でスクロールし続けるギャラリーを作成できます。
| 設定できる項目 | |
| 見出し | コンテンツの見出し。 |
| 説明文 | コンテンツの説明文を入力します（PC・スマホ別）。 |
| 画像カルーセル | 複数の画像をここで登録します。画像の表示サイズは一括設定可能です。スマホでは同じ比率で表示される仕様です。 |
| ボタン | ボタンのラベルやURLを設定します。 |
よくある質問
質問と回答を1セットとして、任意の数だけ表示できます。
| 設定できる項目 | |
| 見出し | コンテンツの見出し。 |
| 説明文 | コンテンツの説明文を入力します（PC・スマホ別）。 |
| FAQコンテンツ | 質問と回答を登録する箇所です。任意の数だけ追加できます。並び替えも可能です。 |
| ボタン | ボタンのラベル・URLを設定します。 |
フリースペース
HTMLタグ、またはパターンを使ってお好きな内容を表示できます。
以下のような使い方もできます。
- バナー画像や動画を設置する
- SNS（XやInstagram）の投稿を埋め込む
- TCDクラシックエディタプラグインや埋め込みタグでGoogle Mapsを表示する
- Contact From 7を使って、お問合せフォームを設置する
設定が完了したら、必ず実際の表示を確認しておきましょう。
- 各箇所の文字量はちょうどいい？ →スマホ表示も要チェック。
- 画像上のテキストは読みやすい？ →オーバーレイを設定してみる。
- 表示する記事の数はちょうどいい？
- 全体的なバランスがいいか？
- 画像は見切れていない？
- 画像や動画のクオリティは問題無し？
トップページは、訪問者の第一印象に大きく影響します。PCやスマホで確認してみて、綺麗に表示されているか何度も確認しましょう。
