FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

DAWNでブログ記事を縦表示にしたい(スマホ)

解決済

DAWNでブログ記事を縦表示にしたい(スマホ)

カイカイ
新規メンバー
13 0 0

DAWNでブログ記事をスマートフォンで見た場合に、縦表示にする方法を教えていただけますでしょうか。

現状では横スクロールで表示されます。

 

また、「すべてを表示する」がスマホではタイトル横に表示されますが、

パソコンのブラウザで見た時のように記事の下に表示する方法も併せてお願いできればと思います。

 

1 件の受理された解決策

nakano_thesense
Shopify Partner
30 7 9

成功

こちらですが以下参考にしていただければと思います。

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`というクラスをそれぞれ削除してみてください。

 

以上でいずれも変更できるかと思います。

加えてモバイル時、見出し横に表示される全てを見るボタンやカルーセル時に表示されるナビゲーションを削除するなどスタイルを整えてあげる必要があります。

 

参考になれば幸いです。

株式会社thesenseはアパレルの輸入代行サービスやクーポン保有アプリなど様々なEC運営サービスの提供、自社ブランドの運営を行っている会社です。
わたしたちについて: https://biz.thesense.tokyo

元の投稿で解決策を見る

2件の返信2

nakano_thesense
Shopify Partner
30 7 9

成功

こちらですが以下参考にしていただければと思います。

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`というクラスをそれぞれ削除してみてください。

 

以上でいずれも変更できるかと思います。

加えてモバイル時、見出し横に表示される全てを見るボタンやカルーセル時に表示されるナビゲーションを削除するなどスタイルを整えてあげる必要があります。

 

参考になれば幸いです。

株式会社thesenseはアパレルの輸入代行サービスやクーポン保有アプリなど様々なEC運営サービスの提供、自社ブランドの運営を行っている会社です。
わたしたちについて: https://biz.thesense.tokyo
カイカイ
新規メンバー
13 0 0

ありがとうございました。参考にさせていただきます。