Flexible Hero Header – Type Classic
Heroとは
TOPページの上段に画像や動画を表示さ店舗の店などの看板的な要素のコンポーネントになります。
 |
Hero の3タイプ（画像、動画、スライドショー）
バナー
 |
バナーを表示することが出来ます。
タイトル＆メッセージボード
 |
 |
ロゴ（慶應ペン）、タイトル（慶應義塾大学病院）、メッセージ（整形外科 脊椎脊髄班）を表示することができます。
スマートフォン（モバイル）について
 |
モバイルでは、Hero タイプは全て画像になります。バナー、タイトル・メッセージボードの場所も固定になります。
※適応は可能ですが現状では対応していないです。
使用方法
- 編集ページの「Flexible Hero Header」 から[Add Section]から使用するテンプレートを選択して下さい。
- レイアウトの設定はグローバルでの設定になります。
テンプレート
- Type Classic
詳細
各種設定は、グローバル設定になります。
「Edit Section > Hero Classic 」から設定ができます。
テスト環境
 |
練習用として Pages の 中に 「Test」というページがあり、下記の練習を行えます。
- Type Classic
- メインコンテンツで使用するセクションテンプレート
- SideBar
とくに Type Classic などのテンプレートは多くの設定箇所があります。「Type Classic Test」で動作確認テストをして下さい。「Type Classic」は本番環境になります。
Hero タイプの選択
◆ Hero Type
画像（Image）、ビデオ（Video）、スライド（Slide）から設定をして下さい。
◆ Background Image
 |
画像は複数登録できるようになっていますが、これはバナーのロケーション（Left、Middle,Bottom）とバナーなし、モバイル用の画像をそれぞれ登録できるようにしています。例えば、バナーのロケーションleftでは、ドコモタワーの左側にスペースがある画像を準備してバナーのスペース用にするなどバナーと画像の微調整に対応するためになります。
◆ Background Video
 |
 |
ビデオは、アップロードとYoutubeを設定することが出来ます。
◆ Background Slide
 |
スライドされる画像は、登録されている左から順番に再生されて最後の画像で終了します。
 |
Slide Duration は、1枚の画像の表示秒数、Slide Transition Duration は画像が変わる秒数になります。
バナー
バナーの表示
| Banner Left | Banner Middle | Banner Bottom |
 |
 |
 |
バナーの表示位置は、左エリアの縦表示、中央の横表示、中央下の横表示になります。
◆ Banner Location と Banner Display
 |
バナーの表示場所、有効にするバナーの設定ができます。
Banner1～3は、左・中央・右、上・真ん中、下の順番になります。
「No Banner」を選択すると全てのバナーを非表示にします。
◆ Banner のメディアとリンク設定
 |
Banner1のメディアとリンクの設定になります。
メディアは、静止画、動画のアップロード動画とYoutube動画を登録することが出来ます。
Banner テキストリンク設定
 |
テキストリンクの背景枠線色、文字の色、サイズ/高さの設定が出来ます。
◆ Banner Type
 |
Banner Type でバナーのメディアとレイアウト（画像）の選択が出来ます。
image
 |
画像の表示エリアと元画像のサイズ（アスペクト比）を基準にして表示されます。 使用する画像は同じサイズのものを推奨します。違うサイズの場合は高さにばらつきが出てしまいバランスが悪くなります。 |
image circle
 |
画像を丸くトリミングした表示になります。画像は中心を基本にして表示されます。 |
image fix
 |
形状は「image」と同じになりますが、高さの違う画像を使用する場合に、image fix を使用することでバナーの高さ設定で指定した高さで表示することが出来ます。 画像の表示は、中央が中心として表示されます。 |
Video
 |
映像は自動再生（ページを開いたら自動で再生されます）とループ再生、消音に設定されています。 |
Youtube
 |
映像は自動再生（ページを開いたら自動で再生されます）とループ再生、消音に設定されています。現状はCMが再生されない設定になっています。 |
Banner Common Settings
 |
Banner Bgcolor/Border Color
 |
バナーの表示エリアの背景・枠線色の設定が出来ます。
Banner Height For PC/Mobile
 |
バナーの高さの設定が出来ます。
グローバルメニュー
|
デフォルト グローバルメニュー |
アンダー グローバルメニュー |
 |
 |
グローバルメニューをHeroの上（通常）と下に設置することが出来ます。
 |
チェックボックスで表示非表示の設定が出来ます。
詳細設定
 |
これは、Hero用のアンダー グローバルメニューの設定になります。Default Global Menu の設定は別になります。
- Global Menu Height For PC/Mobile
- メニューの高さを設定することが出来ます。
- Global Menu Bgcolor/Border/Hover
- メニューの背景・枠線色とマウスオーバーの色を設定することが出来ます。
- Global Menu Text Size/Height For PC/Mobile
- テキストのサイズと高さの設定が出来ます。
モバイル表示
 |
モバイル（スマートフォン）での表示はこのようになります。
アンダー グローバルメニューのメニュー数について
 |
 |
システムの都合上でPC表示では7つまでが1行に収まります。7つを超えると改行されます。また、モバイルでは3つのメニューで1行になります。
セクション
| 高さ：440px | 高さ：300px |
 |
 |
Hero の高さを設定することが出来ます。
 |
高さはpx（ピクセル）、PCとモバイル（スマートフォン）での設定が出来ます。
カラムの幅設定
カラムとは
Banner Middle
 |
 |
これは、HeroタイプがImageでバナーロケーションMiddleになりますが、構造では3つのカラム(Column)のLeft、Middle、Rightで分けています。そして、このカラムの幅を％で設定することが出来ます。
 |
カラムのMiddleにはバナーが3つ、Rightにはタイトルメッセージボードが入りますが、各バナーとタイトルメッセージボードの幅も設定することが出来ます。
％の設定になるので、カラムのMiddleが60％の場合、バナーの分母のMiddle100％になります。
Banner Bottomも同じ構成になります。
Banner Left
 |
 |
カラムの構成はLeftとRightの2つになります。
モバイル
 |
 |
モバイルでは、上下に2つのカラムの構成になります。
No Banner
 |
カラムは1つなります。
Animation Delay
タイトルメッセージボード、バナーの表示にフェードインのアニメーションを付けることが出来ます。
|
各パーツごとに設定をすることが出来ます。 |
タイトル＆メッセージボード
|
|
ロゴ（慶應ペン）、タイトル（慶應義塾大学病院）、メッセージ（整形外科 脊椎脊髄班）を表示することができます。
詳細設定
ロゴ、タイトルとメッセージ設定
 |
ロゴとタイトルメッセージエリアのカラム幅の設定
ロゴの大きさ設定
 |
タイトルの上のスペース
 |
タイトル・メッセージテキストの設定
 |
テキストの色、サイズ/高さの設定が出来ます。
テキスト Strokeは文字の縁の設定になります。目的は、Heroの映像の色とテキストの文字色が類似色の場合に文字を見やすくするためんいなります。メッセージも同じ設定項目があります。
タイトルメッセージボードの背景枠線色
 |