DAWNでブログ記事をスマートフォンで見た場合に、縦表示にする方法を教えていただけますでしょうか。
現状では横スクロールで表示されます。
また、「すべてを表示する」がスマホではタイトル横に表示されますが、
パソコンのブラウザで見た時のように記事の下に表示する方法も併せてお願いできればと思います。
Topic summary
DAWNテーマでブログ記事をスマートフォン表示する際、横スクロールではなく縦表示にする方法についての質問。
解決方法（Dawn ver15.1.0で確認済み）:
featured-blog.liquidファイル内のHTMLクラスを変更することで対応可能- スマホで縦表示にする: 56-60行目の
ul要素からslider slider--tablet slider--mobileクラスを削除。モバイル時に表示される「すべて見る」ボタンやカルーセルナビゲーションのスタイル調整も必要 - モバイル版で全て表示: 174-179行目の
div要素から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というクラスをそれぞれ削除してみてください。
以上でいずれも変更できるかと思います。
加えてモバイル時、見出し横に表示される全てを見るボタンやカルーセル時に表示されるナビゲーションを削除するなどスタイルを整えてあげる必要があります。
参考になれば幸いです。
ありがとうございました。参考にさせていただきます。