[ 解決済 ] トップページスライドショーを全画面表示したい

[HANA]

■ WordPress のバージョン
6.7

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 )

■ テーマのバージョン
15.27.1

■ スキンの種類
プレーン

■ 期待する動作
トップページスライドショーを全画面表示したいです。

■ 自分で試した事
CSSでlightning_swiperにheight:100vhを入れてみたのですが、
lightning_swiperコンテナは全画面になっているようなのですが、
画像がうまく全画面になりませんでした。

ご教授いただければ有難いです。

■ 症状が発生するブラウザ
EGGE、クローム

■ 実際の症状
トップページスライドショーを全画面表示したい

※今後、カスタマイズなどに全画面の設定を実装する予定はありますか？

[対馬 俊彦]

画像の高さを 100vh にすれば、ご希望の形になると思います。

この ↓ CSS を試してみてください。

.ltg-slide picture img {
    height: 100vh;
    object-fit: cover;
}

【以下、追記です】

少しだけ手間は増えますが、ベクトルの松田さんがすすめているやり方にするといいです。

個人的にはカバーブロックを使っているブロックパターンがおすすめです。
フォーカルポイントという設定を使って画像の表示位置をコントロールできますので、
ひとつの画像で画面幅が異なるデバイスに対応できます。

[mk]

日頃よりLightningのご利用ありがとうございます。
ベクトルスタッフの松田です。

トップページスライドショーでは、スライドの高さは画像の高さに依存する仕様となっております。
そのため、柔軟なレイアウトをご希望の場合はトップページスライドショーではなく、スライダーブロックを使用されることをおすすめいたします。

Lightning のトップページスライドショーを VK Blocks のスライダーブロックでカスタマイズする

例えば https://patterns.vektor-inc.co.jp/vk-patterns/hero-area-default-slider/
をコピペし、スライダーをクリックすると右パネルに「高さ」という項目がありますので、それぞれのデバイスの高さ設定を100vhなどにしてみてください。フロントエンド上でご希望の状態になるかと思われます。
なお、トップページ用にスライダーブロックを使用する場合は、外観 > カスタマイズ > Lightning トップページスライドショー では「スライドを非表示にする」の設定にしてください。

また、上記の他にも様々なスライダーのパターンブロックがありますのでよろしければ見ていただけたらもっとご希望のものに近いものがあるかもしれません。
https://patterns.vektor-inc.co.jp/?post_type=vk-patterns&pattern-category=slider&s=&supported-themes_operator=or&license-classification_operator=or&pattern-type_operator=or&pattern-industry_operator=or&pattern-category_operator=and&pattern-product_operator=or&demo-site_operator=or&vkfs_form_id=11755

どうぞよろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

[HANA]

対馬 様

ご指導いただいたCSSで無事、全画面表示が出来ました。
有難うございました。

松田 様

ご指導有難うございます。
スライダーブロックの存在は知っております。

これは好みの問題になってしまうかと思うのですが、現在のスライダーブロックは、設定した画像が枚数分、縦に並んで表示されるのですが、これがどうにも馴染めずにおります。
特にトップページに表示するスライダーに関しては、カスタマイズから管理できる既存のトップページスライドショーの方が使い勝手が良く感じます。PCとスマホで異なった画像を設定する場合も楽ですし。全画面表示がボタン一発で可能になったらかなり使い勝手が良くなると思いました。
御意見まで。

[mk]

お世話になっております。対馬さんの方法で解決したようでなによりです。
もしよろしければ対馬さんのコメントにベストアンサーをつけていただけますと幸いです。

また、貴重なご意見ありがとうございます。今回の頂戴致しましたご意見は社内で検討させていただきます。
※可能な限り検討させていただきたく思いますが、検討し実装して初めて分かることもあるため、実装することが難しい場合もございます。

なお、ご存知でしたら申し訳ありませんが、現在スライダーブロックでは縦積みだけでなくフロントエンドでの表示のようにプレビューできるモードもございます。こちら、今後のご参考にしていただけたら幸いです。

VK Blocks 1.69.0 でスライダーブロックに編集モードを追加しました

よろしくお願いいたします。

[投稿者]

投稿