【SWELL】最新1記事のみ大きく表示するトップページのカスタマイズ方法

投稿一覧を差し込みたい位置に、50:50のカラムブロックを作ります。

SWELLの[投稿リスト]を選択し、最新1記事のみを表示させます。

左側の設定例

• 表示する投稿数：1
• レイアウトはカード型かサムネイル型がおすすめ
• 最大カラム数 (PC/SP)：1列

続いて右側にも投稿リストを作っていきます。左側は大きく1記事のみ表示しましたが、右は小さく表示させると良いでしょう。

投稿する記事数はレイアウトによって調整してください。

今回はカード型、PCもSPも2列で表示するようにします。

他にも1列表示でテキスト型・リスト型にするのもおすすめです。

ブロック設定の一番下にある「追加CSSクラス」に任意のクラスを設定します。

今回は「first-displaynone」としておきます。

編集画面下の「カスタムCSS＆JS」>[CSS用コード]欄に以下のコードを記述します。

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

このコードは、投稿リスト内(ul li)の最初の記事(first-child)を画面から非表示にする(display:none;)という意味。

これだけだと全ての投稿リストに反映されてしまうので、cssクラス[first-displaynone]を指定して、first-displaynoneが入っているブロックのみ対応するようにしています。

これで完成です！編集画面だと最初の記事が残ったままですが、プレビューや公開後のページを見ると、きちんと右ブロックの最新1記事がなくなっているのがわかります。