【SWELLとTHE THORで比較】記事一覧リストのデザイン・レイアウトの設定

SWELLとTHE THOR 記事一覧リスト デザイン・レイアウト設定

ワードプレステーマSWELLとTHE THORの違いについて、設定方法ごとに解説していきます。

今回はトップページやアーカイブページに表示される「記事一覧リストのデザイン・レイアウトの設定」についてです。

このブログではSWELLをおすすめしています。
SWELL贔屓という点あらかじめご了承ください。

この記事のSWELL公式マニュアルはこちら

記事一覧リスト(投稿リスト)のデザイン・レイアウト設定 | 【公式サイト】WordPressテーマ SWELL

この記事の目次

記事一覧リストの設定画面

SWELLでの設定場所

SWELLの記事一覧リストの設定は、「外観」→「カスタマイズ」→「記事一覧リスト」で行います。

SWELL 記事一覧リストの設定場所
SWELL 記事一覧リストの設定場所

THE THORでの設定場所

THE THORの記事一覧リストの設定は、「外観」→「カスタマイズ」→「アーカイブページ設定[THE]」内の「コントローラー設定」と「記事一覧リスト設定」で行います。

THE THOR 記事一覧リストの設定場所
THE THOR 記事一覧リストの設定場所

SWELL レイアウト設定

SWELL リストのレイアウト設定
SWELL リストのレイアウト設定

リストレイアウト

SWELLではリストレイアウトが6パターン用意されています。

PCとスマホ別々でレイアウトの設定が可能です。

カード型

SWELL リストレイアウト カード型

リスト型

SWELL リストレイアウト リスト型

リスト型(左右交互)

SWELL リストレイアウト リスト型(左右交互)

サムネイル型

SWELL リストレイアウト サムネイル型

ブログ型

SWELL リストレイアウト ブログ型

テキスト型

SWELL リストレイアウト テキスト型

最大カラム数

リストレイアウトでカード型サムネイル型を設定した場合、最大カラム数の変更ができます。

PCは最大3カラム、スマホは最大2カラムです。

1カラム

SWELL 記事リスト 1カラム
1カラム

2カラム

SWELL 記事リスト 2カラム
2カラム

「READ MORE」のテキスト

リストレイアウトでブログ型リスト型(左右交互)を設定した場合、デフォルトで「READ MORE」と表示されるテキストを変更できます。

SWELL 記事一覧リスト 「READ MORE」のテキスト
ボタンテキストを変更できる

THE THOR レイアウト設定

リストレイアウト

THE THOR 記事一覧リストのレイアウト設定
ワイドレイアウト(default)を変更

THE THORでは「コントローラー設定」内に記事一覧リストのレイアウトパターンが3つ用意されています。

設定したレイアウトはPCとスマホ両方に適用されます。

ワイドレイアウト

THE THOR 記事一覧リスト レイアウト ワイドレイアウト

カードレイアウト

THE THOR 記事一覧リスト レイアウト カードレイアウト

ノーマルレイアウト

THE THOR 記事一覧リスト レイアウト ノーマルレイアウト

レイアウト切替ボタン

THE THORではサイト上でレイアウトを切り替えるボタンを設置することができます。

STEP
コントローラーを「表示」するを選択
THE THOR コントローラーの表示設定
STEP
レイアウト切替ボタンを「表示」するを選択
THE THOR レイアウト切替ボタン表示設定
STEP
記事一覧リストの上部に切り替えボタンが表示されます。
THE THOR 記事一覧リスト レイアウト切替ボタン表示イメージ

記事一覧リストのフレームデザイン

THE THORでは「記事一覧リスト設定」で記事一覧リストのフレームデザインを設定することができます。

THE THOR 記事一覧リスト フレームデザイン設定
THE THOR フレームデザイン設定

フレームデザイン紹介

フレーム無し

THE THOR 記事一覧リスト フレームデザイン フレーム無し

シャドウフレーム

THE THOR 記事一覧リスト フレームデザイン シャドウフレーム

ボーダーフレーム

THE THOR 記事一覧リスト フレームデザイン ボーダーフレーム

シャドウフレームとボーダーフレームの違いが分かりにくいと思います。補足させていただくと、シャドウフレームの方は下枠に影がついていて、ボーダーフレームより立体的に見えるようになっています。(細かい!)

SWELL 投稿情報の表示設定

記事関連情報の表示

SWELLでは次の記事関連情報を追加で表示することができます。

記事関連情報 表示項目
  • 公開日
  • 更新日
  • 著者

設定画面

SWELL 投稿情報の表示設定
SWELL 投稿情報の表示設定

タイトルの表示非表示

リストレイアウトで「サムネイル型」を選択した場合のみ、タイトルの非表示設定が可能です。

タイトル表示

SWELL 記事一覧リスト タイトルを表示
タイトルを表示

タイトル非表示

SWELL 記事一覧リスト タイトルを非表示
タイトルを非表示

抜粋文の文字数指定

サムネイルの下に表示する抜粋文の文字数の指定します。

PCとスマホで別々に設定可能です。

SWELL 記事一覧リスト 抜粋文の文字数設定
抜粋文の文字数設定

THE THOR 投稿情報の表示設定

記事関連情報の表示

記事関連情報を追加で表示することができます。

表示項目
  • 投稿日
  • 更新日
  • 閲覧数
  • コメント数
THE THOR 投稿情報の表示設定
THE THOR 投稿情報の表示設定

著者情報の表示はできませんが、SWELLにはなかった閲覧数とコメント数を表示することができます。

抜粋文の文字数指定

サムネイルの下に表示する抜粋文の文字数の指定が可能です。

20~500文字、1文字単位で調整することができます。

ボタン関連設定

SWELLで言うところの「READ MORE」のテキストにあたる部分の設定です。

ボタンの表示・非表示とボタンに表示するテキストの変更ができます。

THE THOR 記事一覧リスト ボタンの表示設定
記事一覧リストのボタン表示設定

SWELL カテゴリーラベルの表示設定

SWELLではカテゴリーラベルの表示位置、デザインの変更をすることができます。

SWELL 記事一覧リスト カテゴリの表示設定
SWELL カテゴリラベルに関する設定

カテゴリー表示位置

選択したレイアウトが「テキスト型」の場合の表示位置は固定です。

非表示

SWELL カテゴリラベル表示位置 非表示

サムネイル画像の右上

SWELL カテゴリラベル表示位置 サムネイル画像の上
サムネイル画像の右上

投稿日時の横

SWELL カテゴリラベル表示位置 投稿日時の横
投稿日時の横

カテゴリーラベルの色・背景色の設定

カテゴリーラベルの表示位置を「サムネイル画像の右上」にした場合は追加でデザインの調整が可能です。

SWELL 事一覧リスト カテゴリの表示設定 追加設定
カテゴリーラベルの追加設定
  • カテゴリーの文字色
  • カテゴリーの背景色
  • カテゴリーの背景効果

カテゴリーの文字色

SWELL 事一覧リスト カテゴリの表示設定 追加設定 文字色

カテゴリーの背景色

SWELL 事一覧リスト カテゴリの表示設定 追加設定 背景色

カテゴリーの背景効果イメージ

背景効果なし

SWELL カテゴリラベル 背景効果なし
シンプルです。十分きれい

ストライプ

SWELL カテゴリラベル ストライプ
斜めに線が入ります。おしゃれ

グラデーション

SWELL カテゴリラベル グラデーション
自動的にグラデーションがつきます。これもきれいです。

SWELLのグラデーションは1色だけ選択すれば自動的にグラデーションがつくようになっています。
どの色を選んでもきれいなグラデーションに仕上がるのが素晴らしい!開発がすごく凝っているのだと思います!

THE THOR カテゴリーラベルの表示設定

THE THORではカテゴリーラベルの表示・非表示を設定することはできますが、表示位置の変更・デザインの調整機能はありません。

THE THOR カテゴリラベルの表示設定
THE THORではカテゴリラベルの表示・非表示設定のみ

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

SWELLでは記事リストのサムネイル画像比率を7種類から選択することができます。

サムネイル画像比率はリストレイアウトごとに設定可能です。

SWELL 記事一覧リスト サムネイル画像サイズの設定
サムネイル画像サイズは7種類

白金比率(1:1.414)

SWELL 記事一覧リスト サムネイル画像 白金比率(1:1.414)

黄金比率(1:1.618)

SWELL 記事一覧リスト サムネイル画像 ワイド(16:9)
ワイド(16:9)

一眼(3:2)

SWELL 記事一覧リスト サムネイル画像 一眼(3:2)
一眼(3:2)

ワイド(16:9)

SWELL 記事一覧リスト サムネイル画像 ワイド(16:9)

横長(2:1)

SWELL 記事一覧リスト サムネイル画像 横長(2:1)

超横長(5:2)

SWELL 記事一覧リスト サムネイル画像 超横長(5:2)

正方形(1:1)

SWELL 記事一覧リスト サムネイル画像 正方形(1:1)

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

THE THORではサムネイル画像サイズを3種類から選択することができます。

「0:0」でサムネイルを非表示にすることも可能です。

THE THOR 記事一覧リスト サムネイル画像サイズの設定
サムネイル画像サイズは3種類

画像比率 4:3

THE THOR 記事一覧リスト サムネイル画像 16:9
画像比率 16:9

画像比率 4:3

THE THOR 記事一覧リスト サムネイル画像 4:3

画像比率 1:1

THE THOR 記事一覧リスト サムネイル画像 1:1

SWELL マウスホバーエフェクト設定

SWELLでは記事リストにマウスホバーさせたときのオーバーレイカラーを設定することができます。

SWELL 記事一覧リスト マウスホバーエフェクトの設定
マウスホバー時の設定

グラデーション色1と2で別々の色を選択するとグラデーション効果をつけることができます。

例えばこんな感じ

SWELL 記事一覧リスト マウスホバーエフェクトの設定 グラデーション
慎ましいグラデーションなのでちょっとわかりづらいかも

ここのグラデーションは主張しすぎないくらいの効果に抑えてあるのでちょっとわかりづらいと思います。
次の画像でグラデーションの効果を強調して表現したので、イメージ掴んでみてください。

SWELL 記事一覧リスト マウスホバーエフェクトの設定 グラデーション デフォルメ
左の画像が本来のグラデーション、右はそれをわかりやすく強調した画像

オーバーレイカラーを単色にしたい場合は両方同じ色を設定します。

THE THOR マウスホバーエフェクト設定

設定場所

THE THORのマウスホバーエフェクト設定は、「外観」→「カスタマイズ」→「基本設定[THE]」→「アイキャッチ画像の設定」で行います。

THE THOR マウスホバーエフェクトの設定場所
THE THOR マウスホバーエフェクトの設定場所

「アイキャッチホバーエフェクトの設定」で7種類のエフェクトとそれに付随するマスクカラーとマスク上テキストの設定が可能です。

THE THOR マウスホバーエフェクトの設定
ホバーエフェクトは7種類

エフェクト解説

7種類のエフェクトのイメージを右側の記事にホバーしながらお見せしたいと思います。

THE THOR アイキャッチ マウスホバーエフェクト 例示
ズーム

画像拡大

THE THOR アイキャッチ マウスホバーエフェクト ズーム
ズームグレイ

マウスホバーするとグレイマスクが解除&画像拡大

左側の記事がホバーしていない状態です。

THE THOR アイキャッチ マウスホバーエフェクト ズームグレイ
右の記事にホバーしてます。
ズームセピア

マウスホバーするとセピア調のマスクが解除&画像拡大

左側の記事がホバーしていない状態です。

THE THOR アイキャッチ マウスホバーエフェクト ズームセピア
右の記事にホバーしてます。
ズーム回転

マウスホバーで画像が右斜めに少し回転&画像拡大

THE THOR アイキャッチ マウスホバーエフェクト ズーム回転
アイキャッチがすこしだけ回転します。
マスク

マウスホバーで設定したカラーでマスク掛け

THE THOR アイキャッチ マウスホバーエフェクト マスク
マスクの色はカラーピッカーで指定
マスクズーム

マウスホバーで設定したカラーでマスク&画像拡大

THE THOR アイキャッチ マウスホバーエフェクト マスクズーム
マスクズーム回転

マウスホバーで設定したカラーでマスク&少し回転&画像拡大

THE THOR アイキャッチ マウスホバーエフェクト マスクズーム回転

マスク系エフェクト利用時はマスク上にテキストを設定することができます。

THE THOR アイキャッチ マウスホバーエフェクト マスク上テキスト
マスク上に「Click!」と表示

【THE THORのみ】NEW&ピックアップリボン設定

THE THORでは新着記事とピックアップ記事にリボンを表示することができます。

THE THOR NEW&ピックアップリボン
THE THOR NEW&ピックアップリボン

SWELLには同じような機能はありません。

設定は、「外観」→「カスタマイズ」→「アーカイブページ設定[THE]」→「記事一覧リスト設定」で行います。

THE THOR NEW&ピックアップリボン設定
NEW&ピックアップリボン設定

「NEW&ピックアップリボン設定」で次の設定ができます。

NEW&ピックアップリボン設定項目
  • NEWマークリボンとPickupマークリボンの表示設定
  • リボンの色の設定
  • NEWマークアイコンの設定
  • Pickupマークアイコンの設定
  • NEWマークを表示する日数を指定

まとめ

注目を集める機能の強さは若干THE THOR優勢か

記事一覧リストの訴求力については、最後に紹介した「NEW&ピックアップリボン」機能がある分、THE THORの方が訴求力ありと判断します。

正直記事一覧リストについては、SWELLの方が優秀すぎて、ここでTHE THORを持ち上げないとちょっとほかに良いところないです(判官贔屓)。

記事一覧リストの設定のしやすさはSWELL

記事一覧リストの設定はSWELLの方が簡単です。

SWELLの記事一覧リストの設定は、「外観」→「カスタマイズ」の「記事一覧リスト」画面で完結しています。

THE THORの場合、記事一覧リストに関する設定箇所はカスタマイザー内のいくつかの画面に散らばっているため、設定箇所の把握、その画面への移動が必要な分、SWELLよりも手間がかかりました。

記事一覧リストのデザインはSWELLが好み

最後に、記事一覧リストのレイアウト・ラベルの装飾・マウスホバーのエフェクトを両者で比べてみましたが、SWELLの方がデザインとエフェクトが洗練されていて、きれいなサイトに仕上がると思います。

SWELLのカスタマイザーに用意されているエフェクトはどれも主張しすぎなくて使いやすいです♪

誰でも簡単にきれいなサイトが作れるので、初心者のかたには特に使いやすいワードプレステーマだと思います。

もっと気軽に、楽しく記事を書こう。

SWELLとTHE THOR 記事一覧リスト デザイン・レイアウト設定

この記事が気に入ったら
いいね または フォローしてね!

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

この記事を書いた人

satouのアバター satou 金融系Web広告担当

ブログ未経験でいきなりワードプレスからはじめました!金融業界で働くただのWeb広告担当者です。Web広告のことや生活を豊かにする情報をシェアしていきます。
最近はワードプレステーマ『SWELL』にどっぷりハマってます。しばらく『SWELL』についてばかり書くことになりそう。

この記事の目次
閉じる