【SWELL】投稿リストをオシャレに!最新記事を除外するCSS

アイキャッチ

SWELLには「投稿リスト」という便利なブロックがありますが、TOPページなどを編集する際には最新記事だけ大きく表示したいこともあるかと思います。

その際にはカラムブロックが便利。左のカラムには大きく最新記事を表示して、右に2番目以降の記事を表示することで、おしゃれなレイアウトにすることができます。

2カラムに分けた投稿リスト
※アイキャッチ画像がアダルトなので隠しています

そのためにも、投稿リストから最新記事を除外する必要がありますよね。今回はそれを実現するためのCSSを解説します。

投稿リストから最新記事を除外するCSS

まずは以下のCSSを 外観>テーマ編集>style.css に貼り付けましょう。
(もしくはこのCSSを使いたいページのカスタムCSSに貼り付ける)

.li-first-none > ul > li:first-child { display: none;}

次に対象の投稿リストブロックを選択し、右側サイドバーの一番下「高度な設定」を開きます。
その中にある「追加CSSクラス」にクラス名 “li-first-none” を入力すれば完了です。

エディター上では変化はないと思いますが、プレビューで見てみれば最新記事が除外されているはずです。

←CSS適用前    CSS適用後→

ちなみに、CSSの”li:first-child”は一番最初の要素のことを表します。つまり、ここを書き換えれば、二番目以降を除外することもできるわけです。
例:”li:second-child”に変えると、二番目が除外される。

このCSSは一番最初の記事を”非表示”にするだけです。
そのため、このCSSを適用すると表示される記事の数がひとつ減ります
たとえば、記事を5つ表示させたい場合は、「表示する投稿数」を6に設定しておく必要があるので注意してください。


カラムブロックと組み合わせてオシャレに

先ほどのCSSとカラムブロックを組み合わせることでオシャレなレイアウトにすることもできます。具体的な手順は以下の通りです。

  1. まずはカラムブロックを設置。カラム数は2ブロック(50/50)です。
  2. 左のカラムに投稿リストを挿入。
     投稿数1、レイアウトをカード型、最大カラム数を1列に設定します。
  3. 右のカラムに投稿リストを挿入。
     投稿数3、レイアウトをリスト型に設定します。
  4. 右カラムの投稿リストの高度な設定を開き、「追加CSSクラス」に”li-first-none”と入力。
  5. カラムの下にボタンを設置して、記事一覧へのURLを貼っておきましょう。
     (お好みでカラムのブロック下余白を狭めるのも良いでしょう)
2カラムに分けた投稿リスト
完成!

あとは、全てのブロックをグループ化して、好きなレイアウトで囲うのも良いですね。もっと投稿を表示したい時は、左のカラムにスペーサーなどを挿入して左右のサイズ感を合わせてみてください。

もしくは一番上に最新記事を大きく表示、下に2番目以降の記事を小さく表示するのも良いですね。その辺りは色々と工夫してみて、自分の好きなレイアウトを探してみてください!


まとめ:投稿リスト以外への応用も可能

今回紹介したのは「投稿リストから最新記事を除外するCSS」とのことでしたが、実はあれは「リストの1番目の要素を非表示にするCSS」です。

つまり、リストであれば何にでも利用できます

このCSSを利用して色々とリストを弄ってみるのもいいですね。
それではまた!