【SWELLコピペ用】トップページで使う新着記事一覧リスト

パーツ概要

ホームページのトップページで使うことを想定した記事一覧リストです。

３〜５件、特定のカテゴリの新着記事（コーポレートサイトだと、「お知らせ」がよく見かける）をリスト形式で表示させ、すべて見たい方には一覧ページへ遷移してもらうといったアレです。

SWELLの投稿リストブロックを使うといとも簡単にいい感じのデザインで設置することができます。

使用するSWELLブロック

・投稿リストブロック

コードエディターにコピペして使えるコード

<!-- wp:loos/post-list {"listType":"simple","catPos":"none","moreText":"一覧を見る"} /-->

実際に使う際は、ニュース用のカテゴリもしくはタグを作成し、該当の記事にそれを付与したあと、投稿リストブロックの設定でそのカテゴリ（orタグ）で絞り込みをかけ、カテゴリ一覧ページへのリンクを一覧を見るボタンに設定するといった作業が発生します。

デフォルトのデザインに変更を加える（日付の横の時計アイコンを非表示にする、一覧を見るボタンの横幅を縮めて、文字を太字にする）ために、以下のCSSを「カスタムCSS & JS」＞「CSS用コード」入力欄にコピペしてください。

.p-postList__meta :before {
  display: none;
}
.is-style-more_btn a {
  min-width: auto;
  width: 240px;
  font-weight: 700;
}