3.トップページの表示仕様と設定箇所
トップページの構成・コンテンツを表示するための設定方法についてはこちらをご覧下さい。
3-01. トップページの構成について
3-02. トップページコンテンツの表示設定
3-01. トップページの構成について
本テーマのトップページは、パララックススライダー、画像スライダー、動画などの多様な演出ができるとともに各コンテンツを自由な順番で表示できるメインコンテンツをご用意しており、トップページからサイト内の様々なコンテンツへの誘導が可能となっております。
3-02.トップページコンテンツの表示設定
トップページに表示されるコンテンツの設定は、全てテーマオプションから行います。ダッシュボード左メニュー【TCDテーマ】→【TCDテーマオプション】→【トップページ】を開いて下さい。
ヘッダーコンテンツのタイプの設定
トップページの最上部に表示されるヘッダーコンテンツの設定をします。「パララックススライダー」「画像スライダー」「動画」「YouTube」の中から表示したいコンテンツを選択します。選択した内容に応じて設定項目が表示されます。
表示サンプル
設定サンプル
パララックススライダーの設定
「パララックス」とは部分ごとに動くスピードや、動く方向に差をつける手法で、変化や遊びを付けることでサイトを魅力的に見せることができます。「NOEL」ではスライダー自体が動くスピードとスライダー内で設定した各画像が動くスピードに差をつけております。
パララックススライダー内で使用する画像は最大6枚を設定できます。PC画面とスマホ画面で異なる画像を設定する事が可能です。また、スライダーにはキャッチフレーズやボタンを設定できます。
設定サンプル
①画像の設定
スライダーに表示させたい任意の画像を設定します。
推奨画像サイズ(PC用)は幅1450px、縦幅730pxとなっております。
画像をスマホ用に個別に設定する事が可能です。
推奨画像サイズ（スマホ用）は幅750px、縦幅1334pxとなっております。
②キャッチフレーズ、サブタイトルの設定
「キャッチフレーズを表示する」にチェックを入れることで、ヘッダーコンテンツ中央にキャッチフレーズを表示します。表示したいキャッチフレーズとサブタイトルの文言を入力してください。サブタイトルはキャッチフレーズの下に表示されます。「キャッチフレーズを表示する」からチェックを外すとサブタイトルも非表示となります。
③キャッチフレーズ、サブタイトルの詳細設定
キャッチフレーズのフォントタイプを「メイリオ」「游ゴシック」「游明朝」の中から選択してください。サブタイトルのフォントは変更できません。キャッチフレーズ、サブタイトルそれぞれの文字サイズと文字色を設定します。文字サイズはPCとスマホでそれぞれ設定が可能です。
④ボタンの設定
「ボタンを表示する」にチェックを入れることで、サブタイトル下にボタンを表示します。【ボタンのラベル】で文面を、【ボタンの色】で文字色やボタンの色を、【リンク先のURL】で遷移先のページを指定します。「リンク先のURLを新しいタブで表示する」で遷移先を別タブ表示することが可能です。
⑤オーバーレイ（画像に重ねる色）の設定
画像に色を重ねることにより明るさや色味に変化をつけることができます。
画像の上に重ねる色を設定してください。また、その色の透明度の設定を行います。
画像スライダーの設定
任意の画像スライダーを最大5枚を設定できます。それぞれにアニメーションタイプ、背景色（オーバレイ）の設定をします。また、PC画面とスマホ画面で異なる画像を設定する事が可能です。
設定サンプル
①画像の設定
スライダーに表示させたい任意の画像を設定します。
推奨画像サイズ(PC用)は幅1450px、縦幅730pxとなっております。
画像をスマホ用に個別に設定する事が可能です。
推奨画像サイズ（スマホ用）は幅750px、縦幅1334pxとなっております。
②キャッチフレーズ、サブタイトルの設定
「キャッチフレーズを表示する」にチェックを入れることで、ヘッダーコンテンツ中央にキャッチフレーズを表示します。表示したいキャッチフレーズとサブタイトルの文言を入力してください。サブタイトルはキャッチフレーズの下に表示されます。「キャッチフレーズを表示する」からチェックを外すとサブタイトルも非表示となります。
③キャッチフレーズ、サブタイトルの詳細設定
キャッチフレーズのフォントタイプを「メイリオ」「游ゴシック」「游明朝」の中から選択してください。サブタイトルのフォントは変更できません。キャッチフレーズ、サブタイトルそれぞれの文字サイズと文字色を設定します。文字サイズはPCとスマホでそれぞれ設定が可能です。
④ボタンの設定
「ボタンを表示する」にチェックを入れることで、サブタイトル下にボタンを表示します。【ボタンのラベル】で文面を、【ボタンの色】で文字色やボタンの色を、【リンク先のURL】で遷移先のページを指定します。「リンク先のURLを新しいタブで表示する」で遷移先を別タブ表示することが可能です。
⑤オーバーレイ（画像に重ねる色）の設定
画像に色を重ねることにより明るさや色味に変化をつけることができます。
画像の上に重ねる色を設定してください。また、その色の透明度の設定を行います。
⑥背景画像のアニメーションタイプの設定
背景画像のアニメーションを「ズームアウト」「ズームイン」「アニメーションを使わない」のいずれから選択してください。
⑦スライダーが切り替わるスピードの設定
スライダーが切り替わるスピードを5秒～10秒から選択してください。
動画の設定
任意のMP4の動画ファイルを設定し、表示させることが可能です。
設定サンプル
①動画の設定
「MP4ファイルを選択する」より表示させたい動画ファイルを選択し、設定してください。
②代替画像の設定
モバイル端末が動画を再生できない場合、設定した画像が代わりに表示されます。スマホで動画を表示せずに代替画像を表示させたい場合は「スマホでは代替画像を表示する」を選択してください。
推奨画像サイズは幅1126px、縦幅1200pxとなっております。
以降は、スライダーの設定同様となります。
Youtubeの設定
任意のYoutube動画を設定し、表示させることが可能です。
設定サンプル
①YouTube の動画 IDの設定
YouTubeの動画ID（「https://youtu.be/◯◯」または「https://www.youtube.com/watch?v=◯◯」の◯◯の部分）を入力してください。
②代替画像の設定
モバイル端末が動画を再生できない場合、設定した画像が代わりに表示されます。スマホで動画を表示せずに代替画像を表示させたい場合は「スマホでは代替画像を表示する」を選択してください。
推奨画像サイズは幅1126px、縦幅1200pxとなっております。
以降は、スライダーの設定同様となります。
ボックスコンテンツの設定
ヘッダーコンテンツの下部に表示するボックスコンテンツの設定をします。「ボックスコンテンツを表示する」にチェックを入れることでトップページ上に表示することができ、最大で3行表示することができます。
ボックスコンテンツの表示には「URL」や「画像」の設定が必要です。表示されない場合は、「URL」や「画像」が設定されているかご確認ください。
表示サンプル
設定サンプル
①ボックスコンテンツの数の設定
1行に表示するボックスコンテンツの数を2つ、もしくは3つのいずれかを選択します。
②タイトル設定
ボックスコンテンツ上のタイトル、サブタイトル、キャッチフレーズを設定します。
③URLの設定
ボックスコンテンツをクリックした際に遷移するページのURLを設定します。
④文字サイズの設定
タイトル、サブタイトル、キャッチフレーズの文字サイズを設定します。PCとスマホでそれぞれ異なる設定が可能です。
⑤色の設定
タイトル、サブタイトル、キャッチフレーズの文字色を設定します。
⑥画像の設定
ボックスコンテンツに表示する画像を設定します。
推奨画像サイズはコンテンツ数が2つの場合は横幅725px、縦幅300px3つの場合は横幅483px、縦幅300pxとなっております。
サイドボタンの設定
ヘッダーコンテンツ右側に表示されるサイドボタンの表示設定をします。
サイドボタンを表示させたい場合は、「サイドボタンを表示する」にチェックをいれます。
表示サンプル
設定サンプル
①ボタンのラベルの設定
ボタンに表示する文面を入力します。
②ボタンのURLの設定
ボタンをクリックした際に任意のページにリンクが可能です。リンクしたいページのURLを入力してください。
③ボタンに表示する単語の方向
ボタンをクリックした際に任意のページにリンクが可能です。リンクしたいページのURLを入力してください。
「リンク先のURLを新しいタブで表示する」にチェックを入れることで、リンク先を別窓に開くことができます。
④色の設定
ボタンの文字色やボタン自体の色を設定します。
3-04. メインコンテンツ設定
カスタム投稿「お知らせ」「スタッフ」「キャンペーン」「クリニック」のコンテンツ表示を設定します。また、自由にコンテンツを作成できるフリースペースとバナーコンテンツもご用意しております。
各見出しをドラッグする事によって移動する事ができ、任意の順番で表示する事ができます。
お知らせの設定
カスタム投稿「お知らせ」記事のカテゴリーを一覧で表示します。
「お知らせを表示する」のチェックボックスにチェックを入れることでコンテンツを表示することができます。
カスタム投稿タイプ「お知らせ」の使用方法は下記をご参照下さい。
カスタム投稿タイプ「お知らせ」の使用方法
表示サンプル
設定サンプル
①キャッチフレーズと説明文の設定
コンテンツ上部に表示されるキャッチフレーズと説明文を入力します。
②文字サイズの設定
①で設定したキャッチフレーズと説明文のフォントサイズ（PC、スマホ）を設定します。
③記事の数の設定
コンテンツ内に表示させる記事の数を設定します。2の倍数で設定してください。
④アーカイブページリンクの設定
アーカイブページリンクのラベルを入力し、文字色と背景色を設定します。また、マウスオーバー時の文字色と背景色も設定します。
⑤エレメント画像の設定
コンテンツ内に表示させるカテゴリーの色を設定します。タイトルの文字色とグラデーションの色をそれぞれ設定してください。
スタッフの設定
カスタム投稿「スタッフ」記事のカテゴリーを一覧で表示します。
「スタッフを表示する」のチェックボックスにチェックを入れることでコンテンツを表示することができます。
カスタム投稿タイプ「スタッフ」の使用方法は下記をご参照下さい。
カスタム投稿タイプ「スタッフ」の使用方法
表示サンプル
設定サンプル
①キャッチフレーズと説明文の設定
コンテンツ上部に表示されるキャッチフレーズと説明文を入力します。
②文字サイズの設定
①で設定したキャッチフレーズと説明文の文字サイズ（PC、スマホ）を設定します。
③色の設定
キャッチフレーズの文字色、背景色、 タグの文字色を設定します。
背景色は背景画像が未設定の場合に使用されます。
タグの文字色を設定すると、説明文内のタグで囲まれた部分のみ文字色を変更します。文字色を変えたい部分の設定はカスタム投稿タイプ「スタッフ」の記事編集画面で設定します。
④記事の数の設定
コンテンツ内に表示させる記事の数を4～12の間で設定します。
記事数を5以上に設定した場合、カルーセルスライダーとして表示されます。
スライダーが切り替わるスピードを5秒～10秒から選択してください。
⑤背景画像の設定
背景画像（PC、スマホ）を設定します。
推奨画像サイズ(PC用)は横幅1450px、縦幅950pxとなっております。
推奨画像サイズ（スマホ用）は横幅750px、縦幅1334pxとなっております。
⑥オーバーレイ（画像に重ねる色）の設定
画像に色を重ねることにより明るさや色味に変化をつけることができます。
画像の上に重ねる色を設定してください。また、その色の透明度の設定を行います。
⑦アーカイブページリンクの設定
カスタム投稿タイプ「スタッフ」アーカイブページへのリンクのラベルを入力し、文字色と背景色を設定します。また、マウスオーバー時の文字色と背景色も設定します。
キャンペーンの設定1
カスタム投稿「キャンペーン」のアイキャッチ画像＋タイトル、抜粋テキストを表示します。
「キャンペーンを表示する」のチェックボックスにチェックを入れることでコンテンツを表示することができます。
カスタム投稿タイプ「キャンペーン」の使用方法は下記をご参照下さい。
カスタム投稿タイプ「キャンペーン」の使用方法
表示サンプル
設定サンプル
①キャッチフレーズと説明文の設定
コンテンツ上部に表示されるキャッチフレーズと説明文を入力します。
②文字サイズの設定
①で設定したキャッチフレーズと説明文に加えて記事タイトルのフォントサイズ（PC、スマホ）を設定します。
③色の設定
コンテンツの文字色および背景色の設定をします。
※背景色は背景画像が未設定の場合に代用されます。
④表示設定
コンテンツ内でカテゴリー並びに抜粋文を表示させるか否かを設定します。
併せてコンテンツ内に表示させる記事数とカテゴリーを設定します。
⑤スライダーが切り替わるスピードの設定
④で設定した記事数が4以上の場合、記事はスライダーとして表示されます。
スライダーが切り替わるスピードを5秒～10秒から選択してください。
⑥背景画像の設定
コンテンツの背景に表示される画像をPC、スマホとそれぞれ設定します。
PC推奨画像サイズは横幅1450px、縦幅950pxとなっております。
スマホ推奨画像サイズは横幅750px、縦幅1334pxとなっております。
⑦オーバーレイ（画像に重ねる色）の設定
画像に色を重ねることにより明るさや色味に変化をつけることができます。
画像の上に重ねる色を設定してください。また、その色の透明度の設定を行います。
⑧アーカイブページリンクの設定
アーカイブページリンクのラベルを入力し、文字色と背景色を設定します。また、マウスオーバー時の文字色と背景色も設定します。
キャンペーンの設定2
カスタム投稿「キャンペーン」の記事一覧を表示します。
「キャンペーンを表示する」のチェックボックスにチェックを入れることでコンテンツを表示することができます。
カスタム投稿タイプ「キャンペーン」の使用方法は下記をご参照下さい。
カスタム投稿タイプ「キャンペーン」の使用方法
表示サンプル
設定サンプル
①キャッチフレーズと説明文の設定
コンテンツ上部に表示されるキャッチフレーズと説明文を入力します。
②文字サイズの設定
①で設定したキャッチフレーズと説明文に加えて記事タイトルのフォントサイズ（PC、スマホ）を設定します。
③表示設定
コンテンツ内で記事のカテゴリーを表示させるか否かを設定します。
④記事の数の設定
コンテンツ内でカスタム投稿タイプ「キャンペーン」の記事の数を設定をします。
記事は3行で2カラムもしくは3カラムで表示することができます。2カラムで表示したい行の数を設定します。すべて3カラムで表示したい場合は「0」を設定します。
⑤アーカイブページリンクの設定
アーカイブページリンクのラベルを入力し、文字色と背景色を設定します。また、マウスオーバー時の文字色と背景色も設定します。
3列スクエアコンテンツの設定
「3列スクエアコンテンツを表示する」のチェックボックスにチェックを入れることでコンテンツを表示することができます。
表示サンプル
設定サンプル
①キャッチフレーズと説明文の設定
コンテンツ上部に表示されるキャッチフレーズと説明文を入力します。
②コンテンツの設定
エリア内に表示する各コンテンツの設定をします。
コンテンツは3つまで設定が可能です。
画像の設定
コンテンツの画像を設定します。
PC推奨画像サイズは横幅395px、縦幅400pxとなっております。
キャッチフレーズと説明文の設定
上記で設定した画像の上(コンテンツ2は下)に表示されるキャッチフレーズと説明文を入力します。
URLの設定
コンテンツには任意でリンクの設定が可能です。
リンクを設定する場合は遷移先ページのURLを入力します。
③文字サイズの設定
①で設定したキャッチフレーズと説明文の文字サイズ（PC、スマホ）を設定します。
④色の設定
キャッチフレーズと説明文の文字色および背景色の設定をします。
⑤ボタンの設定
「ボタンを表示する」にチェックを入れることでボタンを表示します。
ボタンの文面、リンク先のURL、文面の文字色、ボタンの色を設定します。
⑥エレメント画像の設定
キャッチフレーズの上に表示するエレメント画像の設定をします。
PC推奨画像サイズは横幅60px、縦幅60pxとなっております。
バナーコンテンツの設定
2カラムでブラウザ幅いっぱいに表示されるバナーコンテンツを設置できます。
「バナーコンテンツを表示する」のチェックボックスにチェックを入れることでコンテンツを表示することができます。
表示サンプル
設定サンプル
①タイトルとキャッチフレーズの設定
コンテンツ上部に表示されるタイトルとキャッチフレーズを入力します。
②文字サイズの設定
①で設定したタイトルの文字サイズ（PC、スマホ）を設定します。
③アーカイブページリンクの設定
アーカイブページリンクの文字色と背景色を設定します。
文字色はタイトルの文字色です。
④背景画像の設定
コンテンツの背景画像をします。
推奨画像サイズは横幅725px、縦幅400pxとなっております。
⑤URLの設定
コンテンツには任意でリンクの設定が可能です。
リンクを設定する場合はリンク先のURLを入力します。
フリースペースの設定
「このコンテンツを表示する」のチェックボックスにチェックを入れることでコンテンツを表示することができます。
フリースペースでご自由に作成する事が可能です。
設定サンプル
Ver1.21.3→1.22のテーマアップデートでフリースペースを追加しました。最大4つまで利用できます。
