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

SWELLの投稿リストを、画面幅960px以下で横スクロールできる表示にする方法です。

専用クラスを付けたグループ内だけにCSSを適用し、ほかの記事一覧は通常の表示を保ちます。

自動再生するスライダーではありません。

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

この記事のCSSは有料部分に掲載しています。

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

画面幅960px以下では、指やトラックパッドで横に動かして次の記事を選べます。

カードの一部が右に見える幅にしています。

961px以上ではSWELLの通常のカード配置に戻ります。

見本には当サイトの実際の記事が表示されます。

これは左右に読み進める表示です。

自動で進む動きや矢印ボタンは追加しません。

記事が少ないなど、カード全体が収まる場合は横スクロールが発生しません。

同じCSSを使った2つ目の設置例です。

リストはそれぞれ独立して横に動かせます。

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

ブロックエディターで「グループ」を追加し、その中に「投稿リスト」を入れます。

投稿リストはカード型を選び、表示件数を設定してください。

グループの中には、このCSSを適用したい投稿リストだけを入れます。

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

外側のグループを選択し、ブロック設定の「高度な設定 → 追加CSSクラス」に waza-post-scroll と入力します。

先頭のドットは付けません。

投稿リストそのものではなく、それを囲むグループに付ける名前です。

追加CSSにコードを貼る

「外観 → カスタマイズ → 追加CSS」に次のCSSを追加して公開します。

この例は追加CSSとブロックの設定で実装するため、親テーマのファイルやfunctions.phpを編集する必要はありません。

この方法は、当サイトのグループ内に置いたカード型の投稿リストを例にしています。

掲載見本を作成した時点のWordPress・SWELLのバージョンは本文に記録していません。

別バージョン、カード型以外の表示、キーボードだけでの横移動は未確認です。

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