ACTION

背景スライドショー

AIで要約する

使用するAIを選んでください

※AI側で内容を取得できない場合があります

本機能はver20260817以降より実装されています

背景、headerエリア、ヘッダー画像エリアに複数の画像を背景としてスライド表示する機能です。

設定方法

ヘッダー画像に画像を登録する

カスタマイザーのヘッダー画像に2枚以上の画像を登録します。

  • 画像が大きすぎたり多すぎる場合は動作が重くなるなど不具合が生じる場合がございます。実際の動作を確認しながら設定してください

AFFINGER管理「ヘッダーコンテンツ」

AFFINGER管理の「ヘッダー(ナビ/画像)」の「ヘッダー画像エリア」>「表示コンテンツ」で”ヘッダーコンテンツ”を有効化します。

下部の「ヘッダー画像スライドショー動作設定」では表示方法や速度などが調整できます。

表示されない場合

ヘッダー画像エリアに高さがない

とくにヘッダー画像エリアのみで表示している場合、ヘッダー画像エリアに高さがないと表示できません。

カスタマイザーの「ヘッダー画像」にある”ヘッダー画像エリア最低の高さ(px)”で高さを指定してください。

上のレイヤーに背景色や背景画像がある

背景スライドショーの上のレイヤーで背景色や背景画像が設定されていると下に隠れるため表示できません。

その他の注意事項など

画像は常に background-size: cover + background-position: center center で描画されます。

つまり画像自体の縦横比は保たれ(歪まない)、表示枠の縦横比と画像の縦横比の差分だけ、中央を基準に上下または左右がトリミングされます。

運用上の注意

背景スライドショーはPCとスマホで同じ画像を共通利用し、スマホ専用ヘッダー画像(st_mobile_header)への差し替えは行いません。端末ごとにトリミング範囲が変わるため、ロゴ文字や主要な被写体は画像の端ではなく中央寄りに配置することを推奨します

解決しないことは検索もしてみてね

-ACTION

夏限定の特別セール開催中!

AFFINGER7公式マニュアル

パスワードを入力してください

- 不明な方はコチラ -