今回はSWELLの投稿リストについて解説します!
投稿リストを使えば、サイト上に簡単に既に自分で作成した投稿ページ一覧を表示することができます。
最新記事やおすすめ記事の設定はもちろん、投稿IDを指定することで特定の記事を設定することもできます(^^)
ブログ内で好きなページに誘導することもできますし、トップページでも記事一覧を表示することができるのでとても便利な機能になっています♪
投稿リストの使い方
投稿記事では以下のようなブロックを作ることが出来ます!
こちらの投稿リスでは「表示する記事数3」「新着記事」「カード型」で設定しています。
投稿リスト設置までの流れを説明していきます。
![](https://komachi1015.com/wp-content/uploads/2023/11/619d6a2d6b621dfbff0e96127e25e62a.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/619d6a2d6b621dfbff0e96127e25e62a.png)
ブロックの追加で、SWELLブロックから投稿リストを選択します。
![](https://komachi1015.com/wp-content/uploads/2023/11/eb38bcf3cd8459c18f4246bc4f3571a6.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/eb38bcf3cd8459c18f4246bc4f3571a6.png)
ブロックの設定画面「settings」で好きなレイアウトを選択し、投稿表示の設定をします。
![](https://komachi1015.com/wp-content/uploads/2023/11/44556ebda9f00e4dbf2f8ec0b3c574aa.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/44556ebda9f00e4dbf2f8ec0b3c574aa.png)
各種表示、カテゴリーの表示位置も設定が出来ます。
![](https://komachi1015.com/wp-content/uploads/2023/11/7e4c91feebf7ffb683e1b2bafa1c9ebf.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/7e4c91feebf7ffb683e1b2bafa1c9ebf.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/3fca8eeb18613864b58c250097e28d42.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/3fca8eeb18613864b58c250097e28d42.png)
「pickup」画面で特定のIDで絞り込んだり、作成済みのカテゴリーやタグで指定することもできます。
![](https://komachi1015.com/wp-content/uploads/2023/11/4475ad324dca8a85b541f6bdedf0f8af.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/4475ad324dca8a85b541f6bdedf0f8af.png)
表示記事の続きを見てもらう場合に、任意の表示テキストを入力します。
デフォルトでは上記のように灰色でテキストが表示されていますが、
このままでは反映されないので黒文字になるようにテキストを入力して下さい。
レイアウトの種類
・カード型
![](https://komachi1015.com/wp-content/uploads/2023/11/3a1c6afa2e44e897cdfe7838dee486f6-1024x343.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/3a1c6afa2e44e897cdfe7838dee486f6-1024x343.png)
・リスト型
![](https://komachi1015.com/wp-content/uploads/2023/11/4b62567caf939975599c1bf06cfa77e6.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/4b62567caf939975599c1bf06cfa77e6.png)
・リスト型(左右交互)
![](https://komachi1015.com/wp-content/uploads/2023/11/f2d676b7ffa3f4d2b6eb427860d1fd47-1024x550.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/f2d676b7ffa3f4d2b6eb427860d1fd47-1024x550.png)
・サムネイル型
![](https://komachi1015.com/wp-content/uploads/2023/11/33ae978e5980809db116b2d93d56ef7d-1024x626.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/33ae978e5980809db116b2d93d56ef7d-1024x626.png)
・テキスト型
![](https://komachi1015.com/wp-content/uploads/2023/11/b932e5a47b9cb6d34fe0aface4971650-1024x295.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/b932e5a47b9cb6d34fe0aface4971650-1024x295.png)
補足
![](https://komachi1015.com/wp-content/uploads/2023/11/c340157bec896fce8eac5389cf811852.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/c340157bec896fce8eac5389cf811852.png)
カテゴリーを表示するに設定した場合(上記画像の赤枠の部分)、カスタマイズ画面で色や背景の種類の変更ができます。
![](https://komachi1015.com/wp-content/uploads/2023/11/f104029b0d5b5f6821871992fcfaca00.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/f104029b0d5b5f6821871992fcfaca00.png)
ダッシュボードの外観→カスタマイズ→カテゴリーの表示設定から変更ができます。カテゴリーの背景効果は、なし・ストライプ・グラデーションの3種から選択できます。デフォルトではストライプになっています!
その他にもサムネイル画像のサイズ比率を変更することや、マウスホバー時の色の設定もできるので好みで設定してみて下さい(^^)
今回のまとめ
今回はSWELLの投稿リストについて解説しました!
是非皆様活用してみて下さい(^^)
次の記事ではタブブロックと投稿リストを組み合わせたタブで切り替えできる記事一覧リストの作成方法を解説していきたいと思います♪
最後までご覧いただきありがとうございました(^o^)