概要
「サイトの管理」機能で作成したサイトでは、サイトの編集画面が表示され、内容やレイアウトなどを調整することができます。
本記事では編集モードに表示されている各セクションの説明や追加・並び替えの方法について記載します。
サイトの基本情報の設定についてはこちら
テーマカラー等編集モード上部の各種設定項目についてはこちら
▼サイトの編集画面
手順
【手順①】編集モードの開き方
①作成したサイトの管理画面より、編集したいバージョンにマウスオーバーし「ページ編集」をクリックします
※「サイトの管理機能」を使用したサイトの作成方法はこちら
②サイトの編集画面が表示され、セクションの追加・編集ができます
【手順2】セクションの追加
①各セクションにカーソルを合わせると紫色の枠が表示されるので「+」マークをクリックします
②追加したいセクションを選択します （画像の変更）
③選択したセクションが追加されます
④各セクションの内容を編集する場合は、編集したいセクションにカーソルを合わせ、右上の編集ボタンをクリックします
各種セクションについて
追加できるセクションについて、各セクションの内容と編集項目は以下となります。
１．メインビジュアル
２．コレクション
３．その他
サイトの概要等を記載するのに適したセクションです。
背景色の変更や画像の差し込みや外部サイトへ誘導するリンクボタンの設置も可能で、サイトTOPのメインとなるセクションを下記3パターンで作成できます。
・Carousel セクション
Heroセクションを複数選択し、自動で切り替えるカルーセルを設定できます。
▼Carousel セクションの設定イメージ
表示設定・コンテンツ・テキスト設定
| 公開範囲 | セクションを公開する範囲を設定できます |
| エフェクト | カルーセルが切り替わる際のエフェクトを、「スライド」か「フェード」で設定できます |
| スピード | カルーセルが切り替わるスピードを設定できます |
| ナビゲーションの表示 | カルーセルを前／次に切り替えるボタンを表示します（表示・非表示の選択ができます） |
| インジゲーターの表示 | カルーセルの位置をドットで表示します（表示・非表示の選択ができます） |
| 操作パーツの色 | ナビゲーションやインジゲーターの色を設定します |
| オートプレイ | カルーセルを自動で切り替えます |
|
オートプレイの詳細設定 ：ディレイ |
カルーセルが切り替わるまでの長さを設定できます |
| 切り替え時間の表示 | カルーセルが切り替わるまでの秒数を表示します |
カルーセルアイテムの追加
・Heroセクション、コンテンツHeroセクションを選択し、カルーセル表示するアイテムを選択します
・Heroセクション
ファーストビューで伝えたいメッセージや任意の画像などを設定できます。
▼Heroセクションの設定イメージ
表示設定・テキスト設定
| 公開範囲 | セクションを公開する範囲を設定できます |
| 見出し |
タイトルなど、見出しとなる文章の設定ができます(60文字まで) サイト上では大きいサイズで表示されます |
| 詳細 |
概要などが記載できる文章の設定ができます(200文字まで) 見出しの下に小さく表示されます |
| 文字揃え | 「見出し」と「詳細」の文章を「左揃え・中央揃え・右揃え」のいずれかで揃えることができます |
| 高さ | セクション自体の縦幅を設定できます |
| 文字色 | 「見出し」「詳細」で設定した文字の色を設定できます |
背景
Heroセクションの背景を設定できます。
「背景色」で指定した色の変更や、PC内の画像を背景として設定することもできます。
画像
Heroセクション内に任意の画像を表示することができます
CTA
Heroセクション内に他ページに遷移するボタンを設置することができます
・コンテンツHeroセクション
任意のコンテンツを指定したHeroセクションを設定できます。
▼コンテンツHeroの設定イメージ
表示設定・コンテンツ・テキスト設定
| 公開範囲 | セクションを公開する範囲を設定できます |
| コンテンツID | コンテンツIDを直接入力するか、右端のボタンをクリックしコンテンツを選択できます |
| 文字揃え | 「見出し」と「詳細」の文章を「左揃え・中央揃え・右揃え」のいずれかで揃えることができます |
| 高さ | セクション自体の縦幅を設定できます |
背景・画像・CTA
| 背景 | 背景色をを設定できます |
|
背景画像の フィット方法 |
選択したコンテンツのサムネイル画像が適用され、以下のいずれかを選択できます ・元サイズのまま ・全体を収める ・画面いっぱいに広げる |
| 効果 | 選択したコンテンツのサムネイル画像が適用され、ぼかしやグレースケールなど効果を指定できます |
| 表示位置 | 選択したコンテンツのサムネイル画像が適用され、表示位置を左右で選択できます |
| CTA | 選択したコンテンツの視聴ページに遷移する【視聴する】ボタンが表示されます |
ULIZAでアップロードしたコンテンツを表示するセクションです。
コンテンツの表示方法はSlider・Grid・サイドバー付きGrid・Listの4パターンから選択できます。
- Slider形式
コンテンツを横一列に並べて表示します
スライドボタンを押すことで表示をスライドできます
- Grid形式
コンテンツを格子状に並べて表示します
- サイドバー付きGrid形式
カテゴリとラベル選択ができるサイドバーとグリッド形式セットでのセットでコンテンツを表示します
- List形式
コンテンツを縦にリスト形式で表示します
ヘッダー・表示設定
追加したGrid・Slider・Listセクションのタイトルや表示設定ができます。
| タイトル | セクション上部に表示する文章を設定できます(80文字まで) |
| 公開範囲 | セクションを公開する範囲を設定できます |
| 表示する最大の数 | セクション内に表示するコンテンツの最大数を指定します |
| 最大の高さ |
セクションの高さを指定します 指定しない場合は表示されるアイテムに合わせた高さになります |
アイテムタイプ
セクション内に表示する動画コンテンツの形式を設定できます。
| コンテンツ |
カテゴリまたはラベルを指定し、設定しているコンテンツのみ表示することができます 指定しない場合は全てのコンテンツが表示されます ※コンテンツをカテゴリやラベルで管理する方法についてはこちら |
| プレイリスト |
「プレイリストの管理」で作成したプレイリストを表示することができます ※プレイリストの設定についてはこちら |
| ランキング |
前日までの視聴ログから集計し、コンテンツをランキング形式で表示することができます 再生回数・視聴ユーザー数を集計対象とし、日間・週間・月間でコンテンツをランキング形式で表示することができます ▼イメージ図 |
・お知らせセクション
「お知らせの管理」で追加したお知らせを表示するセクションです。
お知らせの追加方法についてはこちら
ヘッダー・表示設定
| タイトル | セクション上部に表示する文章を設定できます |
| 表示する最大の数 | セクション内に表示する記事の最大数を設定できます |
| 最大の高さ |
セクションの高さを指定できます 指定しない場合は表示されている記事数に合わせて高さが設定されます |
・バナーセクション
サイトにバナー画像を表示するセクションです。
イベント情報のアプローチや外部サイトへの誘導など、様々な用途があります。
表示設定
バナーセクションを表示させる対象ユーザーの範囲を設定します。
バナー画像
バナーセクションに表示させる画像のアップロードや管理を行います。
追加ボタンをクリックすると、バナー画像の設定項目が表示されます。
| 画像URL |
掲載するバナー画像を指定します 右側のアイコンから画像のアップロードや、画像の選択を行えます |
| 代替テキスト | 画像が表示できない場合、代わりに表示されるテキストを指定します |
| キャプション | バナー画像の下に表示するテキストを指定します |
| リンクURL |
バナー画像をクリックした際の遷移先のURLを指定します 右側の「別のタブで開く」の「off」をクリックすることで、遷移先のURLを別のタブで開くか変更できます |
バナー画像 表示設定
バナーセクション内の画像のサイズや表示数を設定します。
| バナー画像の表示 | バナーセクションに表示する画像の表示サイズを指定します |
| バナー画像表示数 |
画像を1列に最大何個まで表示させるかを指定します 設定した値より多くバナー画像が設定されている場合や、画面幅が狭い場合は折り返して表示されます |