ShopifyやEコマースに関連することを話してみよう
DAWNでブログ記事をスマートフォンで見た場合に、縦表示にする方法を教えていただけますでしょうか。
現状では横スクロールで表示されます。
また、「すべてを表示する」がスマホではタイトル横に表示されますが、
パソコンのブラウザで見た時のように記事の下に表示する方法も併せてお願いできればと思います。
解決済! ベストソリューションを見る。
成功
こちらですが以下参考にしていただければと思います。
Dawn ver15.1.0で確認しています。
基本的には `featured-blog.liquid`ファイル内のHTML要素に記述されているクラスを変更することでいずれも対応可能かなと思います。
1. スマートフォン時にスクロールではなく縦に表示したい
こちらですが `featured-blog.liquid`の56 - 60行目の`ul`要素が関連しているかと思います。
こちらの `ul`のクラスに記述されている `slider slider--tablet slider--mobile`というクラスをそれぞれ削除してみてください。
2. すべてを表示するをモバイル版でも下に表示する
こちらに関しては `featured-blog.liquid`の174 - 179行目に記載されている `div`要素が該当しているかと思います。
こちらの要素のclassに記述されている `small-hide medium-hide`というクラスをそれぞれ削除してみてください。
以上でいずれも変更できるかと思います。
加えてモバイル時、見出し横に表示される全てを見るボタンやカルーセル時に表示されるナビゲーションを削除するなどスタイルを整えてあげる必要があります。
参考になれば幸いです。
成功
こちらですが以下参考にしていただければと思います。
Dawn ver15.1.0で確認しています。
基本的には `featured-blog.liquid`ファイル内のHTML要素に記述されているクラスを変更することでいずれも対応可能かなと思います。
1. スマートフォン時にスクロールではなく縦に表示したい
こちらですが `featured-blog.liquid`の56 - 60行目の`ul`要素が関連しているかと思います。
こちらの `ul`のクラスに記述されている `slider slider--tablet slider--mobile`というクラスをそれぞれ削除してみてください。
2. すべてを表示するをモバイル版でも下に表示する
こちらに関しては `featured-blog.liquid`の174 - 179行目に記載されている `div`要素が該当しているかと思います。
こちらの要素のclassに記述されている `small-hide medium-hide`というクラスをそれぞれ削除してみてください。
以上でいずれも変更できるかと思います。
加えてモバイル時、見出し横に表示される全てを見るボタンやカルーセル時に表示されるナビゲーションを削除するなどスタイルを整えてあげる必要があります。
参考になれば幸いです。
ありがとうございました。参考にさせていただきます。
2023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024APIに関するShopifyサポートShopifyのデフォルト機能では特定の目標を達成するために外部アプリケーションの使用を検討していますか? そんな時はプログラミングの専...
By JapanGuru Sep 22, 2024