【SWELLマニュアル】9. 記事一覧リスト

こんにちは。銀河(@ginga_noguchi)です。

WordPressテーマ『SWELL』の設定マニュアルです。この記事ではカスタマイザーによるサイトのデザイン・設定をおこなっていきます。

このマニュアルはSWELLのカスタマイザーマニュアルの第9回になります。第8回の「アーカイブページ」がまだの場合は先にこちらの設定を終わらせてください。

YouTube版

9-1. リストのレイアウト設定

STEP
リストレイアウト(PC / Tab)
設定できること
  • カード型
  • リスト型
  • リスト型(左右交互)
  • サムネイル型
  • ブログ型
  • テキスト型
STEP
リストレイアウト(SP)
設定できること
  • カード型
  • リスト型
  • リスト型(左右交互)
  • サムネイル型
  • ブログ型
  • テキスト型
STEP
最大カラム数(PC / Tab)

リストレイアウトの設定が「カード型」または「サムネイル型」のみ有効です。

設定できること
  • 1カラム
  • 2カラム
  • 3カラム
カード型
サムネイル型
STEP
最大カラム数(Mobile)

リストレイアウトの設定が「カード型」または「サムネイル型」のみ有効です。

設定できること
  • 1カラム
  • 2カラム
カード型
サムネイル型
STEP
「READ MORE」のテキスト

9-2. 投稿情報の表示設定

STEP
情報の表示設定
設定できること
  • タイトルを隠す
  • 公開日を表示する
  • 更新日を表示する
  • 著者を表示する

アイキャッチ画像に文字を入れたサムネイル型では情報を非表示にすることできれいに見せることができます。

欲張りすぎると情報のノイズが多くなる可能性がありますので注意しましょう。

STEP
抜粋文の文字数(PC / Tab)
設定できること
  • 非表示
  • 40文字
  • 80文字
  • 120文字
  • 160文字
  • 240文字
  • 320文字

抜粋文を表示する場合は「クリックして続きを読みたくなるような」抜粋文の作成を心がけましょう。

STEP
抜粋文の文字数(Mobile)
設定できること
  • 非表示
  • 40文字
  • 80文字
  • 120文字
  • 160文字
  • 240文字
  • 320文字

抜粋文を表示する場合は「クリックして続きを読みたくなるような」抜粋文の作成を心がけましょう。

9-3. カテゴリーの表示設定

STEP
カテゴリー表示位置
設定できること
  • 表示しない
  • サムネイル画像の上に表示
  • 投稿日時の横に表示
STEP
サムネイル画像上に表示される時の追加設定
設定できること
  • カテゴリーの文字色
  • カテゴリーの背景色
  • カテゴリーの背景効果
STEP
親子カテゴリーの表示優先度
設定できること
  • 指定しない
  • 親カテゴリーを優先的に表示
  • 子カテゴリーを優先的に表示
STEP
カテゴリーアーカイブでの表示設定
設定できること
  • 指定しない
  • 該当カテゴリーを含んでいれば優先的に表示
  • 該当カテゴリーを強制的に表示

9-4. サムネイル画像の比率設定

STEP
画像比率
設定できること
  • 白銀比率(1:1.414)
  • 黄金比率(1:1.618)
  • 一眼(3:2)
  • ワイド(16:9)
  • 横長(2:1)
  • 超横長(5:2)
  • 正方形(1:1)

カード型、リスト型、サムネイル型、ブログ型、それぞれ個別でサイズを設定できます。

9-5. マウスホバー時の設定

STEP
グラデーション色の設定

2色を選択することでマウスホバー時のグラデーションカラーを設定できます。

9-6. タブ切り替え設定(トップページ)

STEP
表示するタブの設定

チェックを入れるとブログ一覧ページにタブの切り替えを追加できます。

「トップページ」とありますがホームページ設定で投稿ページ(ブログ一覧ページ)を設定している場合は、ブログ一覧ページに適用されます。

STEP
「タームタブ」の設定

指定したカテゴリーをタブに追加できます。

カテゴリーIDの調べ方

ダッシュボード > 投稿 > カテゴリー

カテゴリー一覧にIDが表示されています。

IDが表示されていない場合は

画面右上の【表示オプション】からIDにチェックを入れれば表示されます。

STEP
「新着記事タブ」、「人気記事タブ」の表示名

それぞれ任意のテキストに変更できます。

STEP
タブデザイン
設定できること
  • 標準
  • グレーボックス
  • 下線

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

STEP
タームアーカイブに「人気記事タブ」を追加

チェックを入れることで、カテゴリーページに「人気記事タブ」を表示させることができます。

カテゴリーページ個別で設定もできます

ダッシュボード > 投稿 > カテゴリー

SWELLではそれぞれのカテゴリーに個別で細かな設定が可能です。

STEP
著者アーカイブに「人気記事タブ」を追加

著者情報エリアの設定で【著者ページへのリンクを表示する】をオンにしている場合は「この著者の記事一覧」といったページを表示できます。このページにもタブを追加できます。

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

STEP
除外したいカテゴリー、タグのID

記事一覧から外したいカテゴリーやタグのIDを入力することで非表示にできます。

この記事を書いた人

野口 銀河

PC11代表取締役|WordPressブログ歴15年|「Webと飲食で地方創生」がビジネスコンセプト|元DJ・元バーテンダー・元高級レストランオーナー支配人|酒・音楽・ガジェット・旅行・古民家暮らし・スーツ好き|猫も好き|