# DAWNでブログ記事を縦表示にしたい（スマホ） **URL:** \ **Category:** 総合的なディスカッション\ **Created:** [September 22, 2024, 6:27am UTC](https://community.shopify.com/t/dawn/360319 "2024-09-22T06:27:55Z")\ **Posts on this page:** 3\ **Page:** 1 ## AI-generated 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`クラスを削除 質問者は提案された解決策を参考にすることができた。
**Author:** ![Anonymous\_e5a629ca8509a57d9c9b57ffdda2f1c6](https://avatars.discourse-cdn.com/v4/letter/a/c6cbf5/32.png) [@Anonymous\_e5a629ca8509a57d9c9b57ffdda2f1c6](https://community.shopify.com/u/Anonymous_e5a629ca8509a57d9c9b57ffdda2f1c6)\ **Post date:** [September 22, 2024, 6:27am UTC](https://community.shopify.com/t/dawn/360319/1 "2024-09-22T06:27:55Z")
DAWNでブログ記事をスマートフォンで見た場合に、縦表示にする方法を教えていただけますでしょうか。 現状では横スクロールで表示されます。 また、「すべてを表示する」がスマホではタイトル横に表示されますが、 パソコンのブラウザで見た時のように記事の下に表示する方法も併せてお願いできればと思います。 ---
**Author:** ![nakano\_thesense](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/nakano_thesense/32/42107_2.png) [@nakano\_thesense](https://community.shopify.com/u/nakano_thesense)\ **Post date:** [September 24, 2024, 12:44pm UTC](https://community.shopify.com/t/dawn/360319/2 "2024-09-24T12:44:45Z")
こちらですが以下参考にしていただければと思います。 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`というクラスをそれぞれ削除してみてください。 以上でいずれも変更できるかと思います。 加えてモバイル時、見出し横に表示される全てを見るボタンやカルーセル時に表示されるナビゲーションを削除するなどスタイルを整えてあげる必要があります。 参考になれば幸いです。 ---
**Author:** ![Anonymous\_e5a629ca8509a57d9c9b57ffdda2f1c6](https://avatars.discourse-cdn.com/v4/letter/a/c6cbf5/32.png) [@Anonymous\_e5a629ca8509a57d9c9b57ffdda2f1c6](https://community.shopify.com/u/Anonymous_e5a629ca8509a57d9c9b57ffdda2f1c6)\ **Post date:** [September 24, 2024, 1:42pm UTC](https://community.shopify.com/t/dawn/360319/3 "2024-09-24T13:42:08Z")
ありがとうございました。参考にさせていただきます。