| 設定画面 | [ 外観 ] > [ Welcartテーマ設定 ] > [ キービジュアル設定 ] |
最大5枚までの画像または動画を使って、スライド形式のキービジュアルを設定できます。
PCとスマートフォンで、それぞれ別のビジュアルを設定することが可能です。
※ 注意 ※
- すべてのスライドに動画を設定することも可能ですが、ページの表示速度に影響を与える可能性があります。動画を多用する場合は、表示速度や通信環境への配慮が必要です。
- スライダーは4秒ごとに自動的に次のスライドへ切り替わります。
また、マウスカーソルをスライダー領域に重ねた場合は、一時停止する仕様になっています。
PC用またはスマートフォン用どちらかのスライドが設定されている場合、ヘッダー画像は表示されません。未設定時のみヘッダー画像が表示されます。
PC用スライド設定
スライドの並び替え
スライドの左側にある四角いエリアをドラッグ＆ドロップすることで、表示順を自由に並び替えることができます。
メディア
メディアライブラリから画像または動画（.mp4、.webm）を選択して設定できます。
リンク先URL
画像または動画に、クリック時の遷移先URLを指定することができます。
スライドの追加・削除
「＋」マークでスライドの追加、「−」マークでスライドの削除が行えます。
最後の1行は削除できません。ヘッダー画像で設定した画像を表示したい場合は、最後に残ったスライダーのメディアを未設定の状態にしてください。
スマートフォン用スライド設定
スライドの並び替え
スライドの左側にある四角いエリアをドラッグ＆ドロップすることで、表示順を自由に並び替えることができます。
メディア
メディアライブラリから画像または動画（.mp4、.webm）を選択して設定できます。
リンク先URL
画像または動画に、クリック時の遷移先URLを指定することができます。
スライドの追加・削除
「＋」マークでスライドの追加、「−」マークでスライドの削除が行えます。
最後の1行は削除できません。ヘッダー画像で設定した画像を表示したい場合は、最後に残ったスライダーのメディアを未設定の状態にしてください。
推奨サイズ
| スマホ | 横幅 780px × 高さ 1040px（比率 3:2） |
|---|---|
| PC | 横幅 1920px × 高さ 850px |
※ キービジュアルで設定した画像・動画は、画面サイズやレイアウトに合わせて、自動的に拡大・表示される仕様です。そのため、画像の縦横比が異なる場合は、上下または左右の端が自動的に切り取られることがあります。
また、文字を多く含む画像では、端の文字が見切れる場合がありますので、重要な要素は中央寄せでデザインしてください。
表示サイズを変更したい場合は、追加CSS または 子テーマ側のスタイルシート に、以下のカスタムプロパティを記述してください。
:root {
--hero-image-pc-height: 700px; /* PC用の高さ */
--hero-image-sp-height: 900px; /* スマホ用の高さ */
}
※ 数値を変更することで、PC・スマホのキービジュアル高さを調整できます。
もし、画像をトリミングせず原寸で表示したい場合は、以下のように auto を指定してください。
:root {
--hero-image-pc-height: auto; /* PC用の高さを自動調整 */
--hero-image-sp-height: auto; /* スマホ用の高さを自動調整 */
}
PAGE TOP