ワードプレステーマSWELLとTHE THORの違いについて、設定方法ごとに解説していきます。
今回はトップページやアーカイブページに表示される「記事一覧リストのデザイン・レイアウトの設定」についてです。
この記事のSWELL公式マニュアルはこちら
記事一覧リストの設定画面
SWELLでの設定場所
SWELLの記事一覧リストの設定は、「外観」→「カスタマイズ」→「記事一覧リスト」で行います。
![SWELL 記事一覧リストの設定場所](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_article-list.png)
THE THORでの設定場所
THE THORの記事一覧リストの設定は、「外観」→「カスタマイズ」→「アーカイブページ設定[THE]」内の「コントローラー設定」と「記事一覧リスト設定」で行います。
![THE THOR 記事一覧リストの設定場所](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_article-list-1024x658.png)
SWELL レイアウト設定
![SWELL リストのレイアウト設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_article-list_layout.png)
リストレイアウト
SWELLではリストレイアウトが6パターン用意されています。
カード型
![SWELL リストレイアウト カード型](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_layout_card.png)
リスト型
![SWELL リストレイアウト リスト型](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_layout_list.png)
リスト型(左右交互)
![SWELL リストレイアウト リスト型(左右交互)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_layout_list-alternate.png)
サムネイル型
![SWELL リストレイアウト サムネイル型](https://lifestyle-analytics.com/wp-content/uploads/2021/02/swell_article-list_layout_thumbnail-2.png)
ブログ型
![SWELL リストレイアウト ブログ型](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_layout_blog.png)
テキスト型
![SWELL リストレイアウト テキスト型](https://lifestyle-analytics.com/wp-content/uploads/2021/02/swell_article-list_layout_text-2.png)
最大カラム数
リストレイアウトでカード型とサムネイル型を設定した場合、最大カラム数の変更ができます。
1カラム
![SWELL 記事リスト 1カラム](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_1-column.png)
2カラム
![SWELL 記事リスト 2カラム](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_2-columns.png)
「READ MORE」のテキスト
リストレイアウトでブログ型とリスト型(左右交互)を設定した場合、デフォルトで「READ MORE」と表示されるテキストを変更できます。
![SWELL 記事一覧リスト 「READ MORE」のテキスト](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_read-more-1024x419.png)
THE THOR レイアウト設定
リストレイアウト
![THE THOR 記事一覧リストのレイアウト設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_article-list_layout.png)
THE THORでは「コントローラー設定」内に記事一覧リストのレイアウトパターンが3つ用意されています。
ワイドレイアウト
![THE THOR 記事一覧リスト レイアウト ワイドレイアウト](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_article-list_layout_wide-1024x613.png)
カードレイアウト
![THE THOR 記事一覧リスト レイアウト カードレイアウト](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_article-list_layout_card-1024x625.png)
ノーマルレイアウト
![THE THOR 記事一覧リスト レイアウト ノーマルレイアウト](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_article-list_layout_normal-1024x440.png)
レイアウト切替ボタン
THE THORではサイト上でレイアウトを切り替えるボタンを設置することができます。
![THE THOR コントローラーの表示設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_article-list_control.png)
![THE THOR レイアウト切替ボタン表示設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_article-list_switch_layout.png)
![THE THOR 記事一覧リスト レイアウト切替ボタン表示イメージ](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_article-list_layout_switch_button-1024x419.png)
記事一覧リストのフレームデザイン
THE THORでは「記事一覧リスト設定」で記事一覧リストのフレームデザインを設定することができます。
![THE THOR 記事一覧リスト フレームデザイン設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_article-list_frame_design.png)
フレームデザイン紹介
フレーム無し
![THE THOR 記事一覧リスト フレームデザイン フレーム無し](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_article-list_frame_design_no-frame.png)
シャドウフレーム
![THE THOR 記事一覧リスト フレームデザイン シャドウフレーム](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_article-list_frame_design_shadow.png)
ボーダーフレーム
![THE THOR 記事一覧リスト フレームデザイン ボーダーフレーム](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_article-list_frame_design_border.png)
SWELL 投稿情報の表示設定
記事関連情報の表示
SWELLでは次の記事関連情報を追加で表示することができます。
- 公開日
- 更新日
- 著者
設定画面
![SWELL 投稿情報の表示設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_article-list_info-1024x527.png)
タイトルの表示非表示
タイトル表示
![SWELL 記事一覧リスト タイトルを表示](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_title_display.png)
タイトル非表示
![SWELL 記事一覧リスト タイトルを非表示](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_title_hide.png)
抜粋文の文字数指定
サムネイルの下に表示する抜粋文の文字数の指定します。
![SWELL 記事一覧リスト 抜粋文の文字数設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_article-list_excerpt.png)
THE THOR 投稿情報の表示設定
記事関連情報の表示
記事関連情報を追加で表示することができます。
- 投稿日
- 更新日
- 閲覧数
- コメント数
![THE THOR 投稿情報の表示設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_article-list_info-1024x822.png)
抜粋文の文字数指定
サムネイルの下に表示する抜粋文の文字数の指定が可能です。
20~500文字、1文字単位で調整することができます。
ボタン関連設定
SWELLで言うところの「READ MORE」のテキストにあたる部分の設定です。
ボタンの表示・非表示とボタンに表示するテキストの変更ができます。
![THE THOR 記事一覧リスト ボタンの表示設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_article-list_button.png)
SWELL カテゴリーラベルの表示設定
SWELLではカテゴリーラベルの表示位置、デザインの変更をすることができます。
![SWELL 記事一覧リスト カテゴリの表示設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_article-list_category.png)
カテゴリー表示位置
非表示
![SWELL カテゴリラベル表示位置 非表示](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_category_hide.png)
サムネイル画像の右上
![SWELL カテゴリラベル表示位置 サムネイル画像の上](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_category_thumbnail.png)
投稿日時の横
![SWELL カテゴリラベル表示位置 投稿日時の横](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_category_post.png)
カテゴリーラベルの色・背景色の設定
カテゴリーラベルの表示位置を「サムネイル画像の右上」にした場合は追加でデザインの調整が可能です。
![SWELL 事一覧リスト カテゴリの表示設定 追加設定](https://lifestyle-analytics.com/wp-content/uploads/2021/02/swell_set_article-list_category_add.png)
- カテゴリーの文字色
- カテゴリーの背景色
- カテゴリーの背景効果
カテゴリーの文字色
![SWELL 事一覧リスト カテゴリの表示設定 追加設定 文字色](https://lifestyle-analytics.com/wp-content/uploads/2021/02/swell_set_article-list_category_add_text-1024x822.png)
カテゴリーの背景色
![SWELL 事一覧リスト カテゴリの表示設定 追加設定 背景色](https://lifestyle-analytics.com/wp-content/uploads/2021/02/swell_set_article-list_category_add_background-color-1024x694.png)
カテゴリーの背景効果イメージ
背景効果なし
![SWELL カテゴリラベル 背景効果なし](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_category_no-effect.png)
ストライプ
![SWELL カテゴリラベル ストライプ](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_category_stripe.png)
グラデーション
![SWELL カテゴリラベル グラデーション](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_category_gradation.png)
THE THOR カテゴリーラベルの表示設定
THE THORではカテゴリーラベルの表示・非表示を設定することはできますが、表示位置の変更・デザインの調整機能はありません。
![THE THOR カテゴリラベルの表示設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_article-list_category.png)
SWELL サムネイル画像のサイズ比率設定
SWELLでは記事リストのサムネイル画像比率を7種類から選択することができます。
![SWELL 記事一覧リスト サムネイル画像サイズの設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_article-list_thumbnail.png)
白金比率(1:1.414)
![SWELL 記事一覧リスト サムネイル画像 白金比率(1:1.414)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_thumbnail_silver.png)
黄金比率(1:1.618)
![SWELL 記事一覧リスト サムネイル画像 ワイド(16:9)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_thumbnail_wide.png)
一眼(3:2)
![SWELL 記事一覧リスト サムネイル画像 一眼(3:2)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_thumbnail_single-eye.png)
ワイド(16:9)
![SWELL 記事一覧リスト サムネイル画像 ワイド(16:9)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_thumbnail_wide.png)
横長(2:1)
![SWELL 記事一覧リスト サムネイル画像 横長(2:1)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_thumbnail_landscape.png)
超横長(5:2)
![SWELL 記事一覧リスト サムネイル画像 超横長(5:2)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_thumbnail_super-landscape.png)
正方形(1:1)
![SWELL 記事一覧リスト サムネイル画像 正方形(1:1)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_article-list_thumbnail_square.png)
THE THOR サムネイル画像のサイズ比率設定
THE THORではサムネイル画像サイズを3種類から選択することができます。
![THE THOR 記事一覧リスト サムネイル画像サイズの設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_article-list_thumbnail.png)
画像比率 4:3
![THE THOR 記事一覧リスト サムネイル画像 16:9](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_article-list_thumbnail_16-9.png)
画像比率 4:3
![THE THOR 記事一覧リスト サムネイル画像 4:3](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_article-list_thumbnail_4-3.png)
画像比率 1:1
![THE THOR 記事一覧リスト サムネイル画像 1:1](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_article-list_thumbnail_1-1.png)
SWELL マウスホバーエフェクト設定
SWELLでは記事リストにマウスホバーさせたときのオーバーレイカラーを設定することができます。
![SWELL 記事一覧リスト マウスホバーエフェクトの設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_article-list_hover.png)
グラデーション色1と2で別々の色を選択するとグラデーション効果をつけることができます。
例えばこんな感じ
![SWELL 記事一覧リスト マウスホバーエフェクトの設定 グラデーション](https://lifestyle-analytics.com/wp-content/uploads/2021/02/swell_set_article-list_hover_2-1024x757.png)
ここのグラデーションは主張しすぎないくらいの効果に抑えてあるのでちょっとわかりづらいと思います。
次の画像でグラデーションの効果を強調して表現したので、イメージ掴んでみてください。
![SWELL 記事一覧リスト マウスホバーエフェクトの設定 グラデーション デフォルメ](https://lifestyle-analytics.com/wp-content/uploads/2021/02/swell_set_article-list_hover_3-1024x791.png)
THE THOR マウスホバーエフェクト設定
設定場所
THE THORのマウスホバーエフェクト設定は、「外観」→「カスタマイズ」→「基本設定[THE]」→「アイキャッチ画像の設定」で行います。
![THE THOR マウスホバーエフェクトの設定場所](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_eye-catch-1024x595.png)
「アイキャッチホバーエフェクトの設定」で7種類のエフェクトとそれに付随するマスクカラーとマスク上テキストの設定が可能です。
![THE THOR マウスホバーエフェクトの設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_eye-catch_hover.png)
エフェクト解説
![THE THOR アイキャッチ マウスホバーエフェクト 例示](https://lifestyle-analytics.com/wp-content/uploads/2021/02/thor_eye-catch_no-hover-1024x758.png)
- ズーム
-
画像拡大
- ズームグレイ
-
マウスホバーするとグレイマスクが解除&画像拡大
左側の記事がホバーしていない状態です。
右の記事にホバーしてます。 - ズームセピア
-
マウスホバーするとセピア調のマスクが解除&画像拡大
左側の記事がホバーしていない状態です。
右の記事にホバーしてます。 - ズーム回転
-
マウスホバーで画像が右斜めに少し回転&画像拡大
アイキャッチがすこしだけ回転します。 - マスク
-
マウスホバーで設定したカラーでマスク掛け
マスクの色はカラーピッカーで指定 - マスクズーム
-
マウスホバーで設定したカラーでマスク&画像拡大
- マスクズーム回転
-
マウスホバーで設定したカラーでマスク&少し回転&画像拡大
マスク系エフェクト利用時はマスク上にテキストを設定することができます。
![THE THOR アイキャッチ マウスホバーエフェクト マスク上テキスト](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_eye-catch_hover_mask_text.png)
【THE THORのみ】NEW&ピックアップリボン設定
THE THORでは新着記事とピックアップ記事にリボンを表示することができます。
![THE THOR NEW&ピックアップリボン](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_article-list_ribbon-1024x667.png)
SWELLには同じような機能はありません。
設定は、「外観」→「カスタマイズ」→「アーカイブページ設定[THE]」→「記事一覧リスト設定」で行います。
![THE THOR NEW&ピックアップリボン設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_article-list_ribbon.png)
「NEW&ピックアップリボン設定」で次の設定ができます。
- NEWマークリボンとPickupマークリボンの表示設定
- リボンの色の設定
- NEWマークアイコンの設定
- Pickupマークアイコンの設定
- NEWマークを表示する日数を指定
まとめ
注目を集める機能の強さは若干THE THOR優勢か
記事一覧リストの訴求力については、最後に紹介した「NEW&ピックアップリボン」機能がある分、THE THORの方が訴求力ありと判断します。
正直記事一覧リストについては、SWELLの方が優秀すぎて、ここでTHE THORを持ち上げないとちょっとほかに良いところないです(判官贔屓)。
記事一覧リストの設定のしやすさはSWELL
記事一覧リストの設定はSWELLの方が簡単です。
SWELLの記事一覧リストの設定は、「外観」→「カスタマイズ」の「記事一覧リスト」画面で完結しています。
THE THORの場合、記事一覧リストに関する設定箇所はカスタマイザー内のいくつかの画面に散らばっているため、設定箇所の把握、その画面への移動が必要な分、SWELLよりも手間がかかりました。
記事一覧リストのデザインはSWELLが好み
最後に、記事一覧リストのレイアウト・ラベルの装飾・マウスホバーのエフェクトを両者で比べてみましたが、SWELLの方がデザインとエフェクトが洗練されていて、きれいなサイトに仕上がると思います。
誰でも簡単にきれいなサイトが作れるので、初心者のかたには特に使いやすいワードプレステーマだと思います。