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

URLをコピーする
URLをコピーしました!
悩んでいる男性

記事一覧リストのデザインをカード型だったりリスト型だったり、変更したいんだけどどうやってやるの?

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

この記事の内容
  • 記事一覧リストのレイアウトの変更方法
  • 公開日など表示情報の設定
  • 新着記事/人気記事のタブ切り替えの設定方法。

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

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

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

SWELLでは「テーマカスタマイザー」と呼ばれる、設定の変更をプレビュー画面で確認しながらカスタマイズ出来る機能があります。

画面左側の設定を変更すると、変更内容が右側にプレビューとして表示されます。

この機能を使って、変更を確認しながら基本設定を進めましょう。

テーマカスタマイザー
テーマカスタマイザー

「テーマカスタマイザー」を利用してスマホ画面をレビューを見ながらチェックしたい場合は、画面左下のコントロールを非表示の横のマークで切り替えられます。

テーマカスタマイザーのコントロール

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

目次

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

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

記事一覧リストのレイアウト設定画面

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

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

  1. カード型
  2. リスト型
  3. リスト型(左右交互)
  4. サムネイル型
  5. ブログ型
  6. テキスト型
カード型

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

最大カラム数(何列で表示するか)

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

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

「READ MORE」のテキスト

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

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

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

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

投稿情報の表示設定

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

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

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

カテゴリーの表示設定
カテゴリーの表示設定

カテゴリー表示位置

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

  • 表示しない
  • サムネイル画像右上
  • テキストの投稿日時横
カテゴリーの表示位置

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

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

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

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

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

  • 白銀比率 (1:1.414)
  • 黄金比率 (1:1.618)
  • 一眼 (3:2)
  • ワイド (16:9)
  • 横長 (2:1)
  • 超横長 (5:2)
  • 正方形 (1:1)

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

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

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

マウスホバー時の設定

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

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

記事一覧リストタブ切り替え設定
タブ切り替え

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

タブ切り替え設定

表示するタブの設定

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

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

タームタブの設定

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

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

タブデザイン

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

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

タブ切り替え設定(その他のページ)

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

タブ切り替え設定(その他のページ)
タブ切り替え設定(その他のページ)

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

例:タグ「swell設定」をクリックして現れる記事一覧ページ
例:タグ「swell設定」をクリックして現れる記事一覧ページ

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

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

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

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

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

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる