【SWELL】記事一覧リストのデザイン・レイアウト設定方法

今回は記事一覧リストのデザイン・レイアウトの設定について画像付きで詳しく説明しています。

記事一覧リストの設定では、記事のレイアウトや新着記事／人気記事／カテゴリなどのタブ切り替えができます。

写真がメインのカード型だったり、バランスがいいリスト型、テキストがメインのテキスト型など、レイアウトは自由に変更できます。

また、便利なタブ切り替え機能もあるので、ぜひ使ってみましょう。

SWELLをまだ導入していない方は以下の記事が参考になります。

記事一覧リストのレイアウトを設定する

「外観」＞「カスタマイズ」＞「記事一覧リスト」に進みます。

リストのレイアウト6種類

レイアウトは次の6種類です。

PCとSPそれぞれ設定できます。

最大カラム数（何列で表示するか）

カード型・サムネイル型でのみ有効で、PC・SPそれぞれで投稿リストを画面上に何列で表示するか選択できます。

例えば、大きな画面のPCでは2列表示、スマホでは1列表示といった設定が可能です。

「READ MORE」のテキスト

ブログ型・リスト型（左右交互）で表示される「READ MORE」の表示を変更します。

例えば、「詳しく見る」、「もっと読む」などに変更できます。

記事一覧リストに表示される「投稿情報」を設定する

投稿表示では、各情報の表示・非表示を設定できます。

例えば、サムネイルで「タイトルを隠す」にチェックを入れ、公開日・更新日・著者の表示のチェックを外すと、画像のみの表示になります。

カテゴリーの表示方法を設定する

カテゴリーの表示設定では、カテゴリー情報の位置を設定できます。

カテゴリー表示位置

カテゴリの表示位置を以下の３つから選択します。

「サムネイル画像の上に表示」を選択した場合、カテゴリーの文字色・背景色、デザインを選択できます。

サムネイル画像の比率を設定する

各リストのレイアウトのサムネイル画像のサイズ比率を設定できます。

選択できるサイズは、以下の7種類です。

マウスホバー時（マウスを乗せた時）の色設定をする

投稿リストにマススホバーさせた時に、カラーを透過で被せることができます。

左右で色を変えるとグラデーションになり、色をそろえると単色になります。

タブ切り替えで記事一覧リストを表示させる設定

トップページに表示される記事一覧リストは投稿順・人気順・カテゴリ別などのリストごとにタブで切り替えれる機能があります。

この設定は以下のタブ切り替え設定から設定できます。

表示するタブの設定

デフォルトでは「「新着記事タブ」を追加する」のみにチェックが入っているので、人気記事タブにもチェックを入れると、最初の写真のようになります。

新着記事と人気記事という表示名は、それぞれの表示名箇所で代えられます。

タームタブの設定

タームタブの設定にカテゴリーやタグのIDをいれると、そのカテゴリーやタグに分類された記事のみが並ぶリストタブとして作成されます。

• カテゴリー：Wordpressダッシュボードの「投稿」＞「カテゴリ」からIDが確認できます。
• タグ：Wordpressダッシュボードの「投稿」＞「タグ」からIDが確認できます。

タブデザイン

タブデザインは以下の3種類から選べます。

• 標準
• グレーボックス
• 下線

タブ切り替え設定（その他のページ）

その他のページとは、タームアーカイブ(カテゴリー・タグ)ページと著者アーカイブページのことです。

タームアーカイブページとは、例えばカテゴリをクリックした場合にそのカテゴリーの記事リストが表示されるページのことです。タグ、著者も同様です。

「タームアーカイブに「人気記事タブ」を追加」にチェックを入れると、上記の写真のようにすべてのタグにおいて、新着記事・人気記事のタブが現れます。

投稿一覧から除外するカテゴリー・タグ

もし記事一覧に表示したくないカテゴリーやタグがあった場合は、それぞれIDを入力すると、一覧から除外されます。

投稿IDは、WordPress管理画面の投稿一覧の「ID」で確認できます。

以上で記事一覧リストの設定は終わりです。