SWELL投稿リストをスマホで横スクロールにする方法｜対象を絞るCSSと戻し方

SWELLの投稿リストを、画面幅960px以下で横スクロールできる表示にする方法です。専用クラスを付けたグループ内だけにCSSを適用し、ほかの記事一覧は通常の表示を保ちます。自動再生するスライダーではありません。

コードを使わずに作る方法やSwiperとの違いは、投稿リスト・記事スライダーの選び方で比較できます。この記事のCSSは有料部分に掲載しています。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

スマホで横に動かせる投稿リストの見本

画面幅960px以下では、指やトラックパッドで横に動かして次の記事を選べます。カードの一部が右に見える幅にしています。961px以上ではSWELLの通常のカード配置に戻ります。見本には当サイトの実際の記事が表示されます。

これは左右に読み進める表示です。自動で進む動きや矢印ボタンは追加しません。記事が少ないなど、カード全体が収まる場合は横スクロールが発生しません。

同じCSSを使った2つ目の設置例です。リストはそれぞれ独立して横に動かせます。

投稿リストをグループで囲む

ブロックエディターで「グループ」を追加し、その中に「投稿リスト」を入れます。投稿リストはカード型を選び、表示件数を設定してください。グループの中には、このCSSを適用したい投稿リストだけを入れます。

リスト表示などに変えると見た目が異なるため、最初はこの例と同じカード型で試してください。

外側のグループを選択し、ブロック設定の「高度な設定 → 追加CSSクラス」に waza-post-scroll と入力します。先頭のドットは付けません。投稿リストそのものではなく、それを囲むグループに付ける名前です。

追加CSSにコードを貼る

「外観 → カスタマイズ → 追加CSS」に次のCSSを追加して公開します。この例は追加CSSとブロックの設定で実装するため、親テーマのファイルやfunctions.phpを編集する必要はありません。

以下にCSSと調整・復元手順を掲載しています。