[ 質問者返信待ち ] トップページ スライドショーの上に画像を置きたい

VWSとは フォーラム Lightning [ 質問者返信待ち ] トップページ スライドショーの上に画像を置きたい

[ 質問者返信待ち ] トップページ スライドショーの上に画像を置きたい

  • このトピックには1件の返信、2人の参加者があり、最後にうなこにより1年前に更新されました。
2件の投稿を表示中 - 1 - 2件目 (全2件中)
  • 投稿者
    投稿
  • #73518

    takesho
    参加者

    ■ WordPress のバージョン
    6.1.1

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

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    Lightning

    ■ Pro Unit のバージョン
    0.23.4

    ■ スキンの種類
    Evergreen

    ■ スキンのバージョン
    0.2.1

    ■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
    確認しました。

    ■ 期待する動作
    トップページスライドショーの上に画像を置いて、後ろの画像がスライドしても上に置いている画像はそのままになるようにしたい。

    スマートフォンだとその画像の配置もうまく変わるようにしたい。

    参考:
    https://1mental-clinic.com/

    ■ 自分で試した事
    スライダーアイテムにOuterを重ねてみたが、スライドショーが全幅にならなかった(方法が分からない)ので、うまくいく方法があれば教えてほしい

    ■ 症状が発生するブラウザ
    Google Chrome

    ■ 実際の症状
    スライダーアイテムが全幅にならない


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #73560

    うなこ
    モデレーター

    スライダーアイテムにOuterを重ねてみたが、スライドショーが全幅にならなかった(方法が分からない)ので、うまくいく方法があれば教えてほしい

    Outerを入なくても、スライダーアイテムに背景画像を設置することができます

    【スライド設定> エフェクトをフェードに設定する】
    参考サイトのようにするなら、エフェクトをフェードにします。
    スライダーを全幅で設置して、親のスライダーを選択して、右側のスライダーの設定画面から【スライド設定】> 「エフェクト」を「フェード」にします。

    【スライダー全幅でスライダーアイテムに背景画像を設置】
    ※添付画像参照
    スライダーアイテムを選択しますと、右側のスライダーアイテムのブロック設定画面に【背景設定】が出てきます。背景画像(PC)、背景画像 ( タブレット )、背景画像 ( モバイル )が設置できますので、お好みで設置してください。
    背景画像サイズは、「カバー」にすると、画像が見切れずに配置できます。

    【スライドアイテム内に画像を配置】
    今回はPCとスマホで画像を出しわけしたいということですので
    スライドアイテム内にPC用の画像とスマホ用の画像を配置します。

    ブロックごとに「非表示設定」機能がありますので、
    PCサイズ用の画像は、非表示 ( 画面サイズ : sm ) 非表示 ( 画面サイズ : xs )」をオンにして、スマホサイズ用の画像は、非表示 ( 画面サイズ : xxl )、非表示 ( 画面サイズ : xl )、非表示 ( 画面サイズ : lg )、
    非表示 ( 画面サイズ : md )をオンにすると、切り替えて表示できます。
    ※全部のスライダーアイテムに、同じ画像を配置する感じになります。フェードになっているので、後ろの背景だけが切り替わっているように見えると思いますがいかがでしょうか

    ポイントは、まずはスライダーアイテムを1つ目を完成させて、2つ目からは複製してアイテムを増やすと背景画像を差し替えるだけなので作業が楽かもしれません。

    ▼▼▼参考ページ▼▼▼

    • この返信は1年前にうなこが編集しました。
    • この返信は1年前にうなこが編集しました。
    • この返信は1年前にうなこが編集しました。
    • この返信は1年前にうなこが編集しました。
    • この返信は1年前にうなこが編集しました。
    Attachments:
    You must be logged in to view attached files.
2件の投稿を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。