- このトピックには6件の返信、2人の参加者があり、最後に
により5年、 2ヶ月前に更新されました。
-
投稿
-
トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。
【お使いの Snow Monkey のバージョン】バージョン: 5.0.4
【お使いのブラウザ】Chrome=====
スライダーで設定した画像をPC・タブレットと、スマホと切り替えをする方法はありますでしょうか？
切り替えでなくても良いのですが、PCで横長に表示される画像をスマホの際には縦方向で画像を大きく表示し、下にスクロールしてコンテンツを見せたいと考えております。
いいねをした人: 居ませんスライダーで設定した画像をPC・タブレットと、スマホと切り替えをする方法はありますでしょうか？
スライダーは、「WPAW: スライダー」ウィジェットを使われていますか？ もしくは、Snow Monkey Blocks の「スライダーブロック」でしょうか？ どちらを使っているかで対応方法も変わってくるので教えてください！
いいねをした人: 居ませんウィジェットであれば、Widget Logic というプラグインを使ってスマホ・PCで出し分けができます。
※ただ、この記事にある
wp_is_mobile()を使った方法だと「PC・タブレット」「スマホ」で条件分岐されます。少々手間ですが、プラグインを使わずに、CSS で出し分けすることもできます。それぞれのウィジェットには「id」が割り当てられていて、それを利用して出し分けができます。ブラウザが Chrome であれば、そのウィジェットの上で右クリック > 検証とやると、そのウィジェットの HTML が確認できます。そこに
id="wpaw-slider-inc2734_wp_awesome_widgets_slider-18"というような記述があると思うのですが、@media (max-width: 767px) { #wpaw-slider-inc2734_wp_awesome_widgets_slider-18 { display: none; } }という CSS を、カスタマイザー > 追加CSS、もしくは子テーマの CSS ファイルに追加することで、スマホサイズのときだけ非表示にすることができます。
いいねをした人: 居ませんご丁寧に、ご教示頂きましてありがとうございます！
現在、Gutenbergエディタ利用の際にもこのような表示にしたいというご要望を頂いております。
急ぎませんので、もし、可能でしたら、Snow Monkey Blocks の「スライダーブロック」での対応方法もご教示頂けますと大変助かります。
いいねをした人: 居ませんスライダーブロックの場合、ブロックを選択し、インスペクター（画面右側に表示される設定パネル）の高度な設定 > 追加 CSS クラスにクラス名を追加することで表示を制御できます。
u-hidden-smと入力すると、そのブロックはスマホサイズのときに非表示になります。
u-hidden-md-upと入力すると、タブレットサイズ以上のときに非表示になります。注意点として、Snow Monkey Blocks v3.0.6 以上の場合は、追加 CSS クラスがエディタに反映されるため、入力した瞬間に画面サイズに応じて非表示になっちゃいます。なので画像を登録した後に追加 CSS クラスを入力するのが良いかなと思います。
いいねをした人: 居ません
- トピック「スライダーのスマホでの表示について」には新しい返信をつけることはできません。