「トップページ」は本に例えるなら表紙や目次です。サイトの概要や、各コンテンツへの導線をこのページにまとめていきます。下層ページ（カテゴリー・記事）をある程度準備してからの方が設定しやすいです。
トップページ以外のすべてのページを「下層ページ」といいます。
>>投稿タイプの使い分けについて
- 投稿：ブログ・コラムなど
- お知らせ：タイムリーな告知など
- お品書き：メニューやサービス内容の紹介
- 固定ページ：時系列をもたない独立したページ。アバウト・アクセス・LPなど
- 各アーカイブ：投稿タイプごと、あるいはカテゴリーやタグごとの記事一覧ページ
はじめからすべての投稿タイプを利用する必要はありません。最低限必要なページだけでサイトを公開し、あとから拡張していくのもアリです。
設定できる内容
トップページは、以下の二つで構成されています。
| ヒーローヘッダー |
PCでは画面の左右半分どちらかに常に表示されます。 ・背景（画像スライダーor動画） |
| メインコンテンツ |
トップページのメインコンテンツです。 ・デザインコンテンツ |
設定箇所
トップページは、ダッシュボード内のTCDテーマ > トップページで設定します。
ヒーローヘッダー
PCでは画面の左右半分、スマホでは画面いっぱいに表示されます。”掴み”となるような画像または動画を用意しましょう。
ヒーローヘッダーのタイプ（画像スライダーor動画）によって設定項目が変化します。
| タイプ | 設定できる項目 |
| 画像スライダー | ・コンテンツ（キャッチフレーズorロゴ画像） ・画像スライダー ・アニメーション（フェード/ズームイン/ズームアウト/無し） ・各画像とオーバーレイ |
| 動画 | ・コンテンツ（キャッチフレーズorロゴ画像） ・背景動画（PC/スマホ別）とオーバーレイ |
設定画面はこのようになっています。
背景上に表示される「コンテンツ」ではキャッチフレーズかロゴ画像を表示できます。
| キャッチフレーズ | ・キャッチフレーズ（PC/スマホ別） ・文字の方向（横書きor縦書き） ・フォントタイプ（PC/スマホ別） ・文字サイズ（PC/スマホ別） |
| ロゴ画像 | ・ロゴ画像（PC/スマホ別） ・表示サイズ（高さ）（PC/スマホ別） |
メインコンテンツ
メインコンテンツには以下のアイテムが用意されています。
メインコンテンツで表示できるアイテムは以下の5つ。
| デザインコンテンツ | テキスト・画像・ボタンがレイアウトされたコンテンツです。 |
| カバー画像 | 表示領域いっぱいの背景画像と、その上にキャッチフレーズを入れられます。 |
| 投稿記事一覧 | 投稿記事を一覧表示します。 |
| お知らせ一覧 | お知らせ記事を一覧表示します。 |
| フリースペース | HTMLタグorパターンを表示します。オリジナルのコンテンツ作成に利用します。 |
お好きなアイテムを追加して、ドラッグ&ドロップで自由に並び替えができます。表示・非表示もワンクリックで変更可能です。
これらのアイテムを使わず、完全オリジナルのトップページを作成したい場合はフリースペースで外観 > パターンの内容を呼び出してください。
デザインコンテンツ
画像・テキストをセットするだけでデザインされたレイアウトが組めます。
| 見出し | 見出しを設定します。フォントや書字方向は基本設定の「フォント」で設定します。 |
| 説明文 | 説明文を設定します。プレーンテキストを使います。 |
| 画像 | 画像の推奨サイズは横870px x 縦600 pxです。 |
| コンテンツ | 画像下部のコンテンツです。「HTML入力」または「パターン」の内容を表示できます。 |
| ボタン | ボタンのラベル・リンク先URLを設定します。 |
カバー画像
画面いっぱいの画像と、画像の上にキャッチフレーズを表示できます。
| キャッチフレーズ | ・キャッチフレーズ（PC/スマホ別） ・文字の方向（横書きor縦書き） ・フォントタイプ ・文字サイズ（PC/スマホ別） ・文字色 ・表示位置（中央or上） |
| 画像とオーバーレイ | 画像の推奨サイズは横870px x 縦1320 pxです。 |
投稿記事一覧
投稿記事を2カラムで一覧表示します。
| 見出し | コンテンツの見出しを設定します。フォントや書字方向は基本設定の「フォント」で設定します。 |
| 記事一覧 | ・表示する記事（すべて/カテゴリー指定/ID指定） ・記事の並び順（新着順orランダム） ・表示する記事の数（PC/スマホ別） |
| ボタン | ボタンのラベルを設定します。 |
お知らせ記事一覧
お知らせ記事を一覧表示します。
| 見出し | コンテンツの見出しを設定します。フォントや書字方向は基本設定の「フォント」で設定します。 |
| 記事一覧 | ・表示する記事（すべて/カテゴリー指定/ID指定） ・記事の並び順（新着順orランダム） ・表示する記事の数（PC/スマホ別） |
| ボタン | ボタンのラベルを設定します。 |
フリースペース
HTMLタグまたはパターンを使ってお好きな内容を表示できます。フリースペースだけ使うことで完全オリジナルのメインコンテンツも作成可能です。
たとえば、当デモサイトのこの箇所はTCDテーマ > 基本設定の「お問い合わせボタン」を表示させています。
設定方法は以下の記事をご覧ください。
以下のような使い方もおすすめです。
- バナー画像や動画を設置する。
- SNS（XやInstagram）の投稿を埋め込む。
- TCDクラシックエディタプラグインや埋め込みタグでGoogle Mapsを表示する
設定が完了したら、必ず実際の表示を確認しておきましょう。
- 見出しや説明文などの文字量はちょうどいい？
- 画像上のテキストは読みやすい？ →オーバーレイを設定してみる。
- 表示する記事の数はちょうどいい？
- 全体的なバランスがいいか？
トップページは「サイトの玄関口」にあたり、最も大切といってもいいぺージです。定期的に見直して完成度を高めていきましょう。
