THORの違いについて、設定方法ごとに解説していきます。今回はトップページやアーカイブページに表示される「記事一覧リストのデザイン・レイアウトの設定」についてです。このブログではSWELLをおすすめしています。SWELL贔屓という点あらかじめご了承ください。記事一覧リストの設定画面SWELLでの設定場所SWELLの記事一覧リストの設定は、「外観」→「カスタマイズ」→「記事一覧リスト」で行います。THORの記事一覧リストの設定は、「外観」→「カスタマイズ」→「アーカイブページ設定[THE]」内の「コントローラー設定」と「記事一覧リスト設定」で行います。リストのレイアウト設定リストレイアウトSWELLではリストレイアウトが6パターン用意されています。PCとスマホ別々でレイアウトの設定が可能です。最大カラム数リストレイアウトでカード型とサムネイル型を設定した場合、最大カラム数の変更ができます。PCは最大3カラム、スマホは最大2カラムです。MORE」と表示されるテキストを変更できます。THORでは「コントローラー設定」内に記事一覧リストのレイアウトパターンが3つ用意されています。設定したレイアウトはPCとスマホ両方に適用されます。THORではサイト上でレイアウトを切り替えるボタンを設置することができます。STEPコントローラーを「表示」するを選択STEPレイアウト切替ボタンを「表示」するを選択STEP記事一覧リストの上部に切り替えボタンが表示されます。THORでは「記事一覧リスト設定」で記事一覧リストのフレームデザインを設定することができます。フレームデザイン設定フレームデザイン紹介フレーム無しシャドウフレームボーダーフレームシャドウフレームとボーダーフレームの違いが分かりにくいと思います。補足させていただくと、シャドウフレームの方は下枠に影がついていて、ボーダーフレームより立体的に見えるようになっています。表示SWELLでは次の記事関連情報を追加で表示することができます。投稿情報の表示設定タイトルの表示非表示リストレイアウトで「サムネイル型」を選択した場合のみ、タイトルの非表示設定が可能です。抜粋文の文字数指定サムネイルの下に表示する抜粋文の文字数の指定します。PCとスマホで別々に設定可能です。著者情報の表示はできませんが、SWELLにはなかった閲覧数とコメント数を表示することができます。抜粋文の文字数指定サムネイルの下に表示する抜粋文の文字数の指定が可能です。20~500文字、1文字単位で調整することができます。MORE」のテキストにあたる部分の設定です。ボタンの表示・非表示とボタンに表示するテキストの変更ができます。カテゴリーラベルの表示設定SWELLではカテゴリーラベルの表示位置、デザインの変更をすることができます。選択したレイアウトが「テキスト型」の場合の表示位置は固定です。投稿日時の横カテゴリーラベルの色・背景色の設定カテゴリーラベルの表示位置を「サムネイル画像の右上」にした場合は追加でデザインの調整が可能です。カテゴリーラベルの追加設定カテゴリーの文字色カテゴリーの背景色カテゴリーの背景効果カテゴリーの文字色カテゴリーの背景色カテゴリーの背景効果イメージ背景効果なしシンプルです。きれいストライプ斜めに線が入ります。おしゃれグラデーション自動的にグラデーションがつきます。SWELLのグラデーションは1色だけ選択すれば自動的にグラデーションがつくようになっています。THORではカテゴリーラベルの表示・非表示を設定することはできますが、表示位置の変更・デザインの調整機能はありません。サムネイル画像のサイズ比率設定SWELLでは記事リストのサムネイル画像比率を7種類から選択することができます。サムネイル画像比率はリストレイアウトごとに設定可能です。THORではサムネイル画像サイズを3種類から選択することができます。「0:0」でサムネイルを非表示にすることも可能です。マウスホバーエフェクト設定SWELLでは記事リストにマウスホバーさせたときのオーバーレイカラーを設定することができます。マウスホバー時の設定グラデーション色1と2で別々の色を選択するとグラデーション効果をつけることができます。こんな感じ慎ましいグラデーションなのでちょっとわかりづらいかもここのグラデーションは主張しすぎないくらいの効果に抑えてあるのでちょっとわかりづらいと思います。次の画像でグラデーションの効果を強調して表現したので、イメージ掴んでみてください。左の画像が本来のグラデーション、右はそれをわかりやすく強調した画像オーバーレイカラーを単色にしたい場合は両方同じ色を設定します。THORのマウスホバーエフェクト設定は、「外観」→「カスタマイズ」→「基本設定[THE]」→「アイキャッチ画像の設定」で行います。「アイキャッチホバーエフェクトの設定」で7種類のエフェクトとそれに付随するマスクカラーとマスク上テキストの設定が可能です。ホバーエフェクトは7種類エフェクト解説7種類のエフェクトのイメージを右側の記事にホバーしながらお見せしたいと思います。左側の記事がホバーしていない状態です。右の記事にホバーしてます。左側の記事がホバーしていない状態です。右の記事にホバーしてます。ズーム回転マウスホバーで画像が右斜めに少し回転&画像拡大アイキャッチがすこしだけ回転します。マスクマウスホバーで設定したカラーでマスク掛けマスクの色はカラーピッカーで指定マスクズームマウスホバーで設定したカラーでマスク&画像拡大マスクズーム回転マウスホバーで設定したカラーでマスク&少し回転&画像拡大マスク系エフェクト利用時はマスク上にテキストを設定することができます。THORでは新着記事とピックアップ記事にリボンを表示することができます。NEW&ピックアップリボンSWELLには同じような機能はありません。設定は、「外観」→「カスタマイズ」→「アーカイブページ設定[THE]」→「記事一覧リスト設定」で行います。「NEW&ピックアップリボン設定」で次の設定ができます。THORの方が訴求力ありと判断します。THORを持ち上げないとちょっとほかに良いところないです(判官贔屓)。記事一覧リストの設定のしやすさはSWELL記事一覧リストの設定はSWELLの方が簡単です。SWELLの記事一覧リストの設定は、「外観」→「カスタマイズ」の「記事一覧リスト」画面で完結しています。THORの場合、記事一覧リストに関する設定箇所はカスタマイザー内のいくつかの画面に散らばっているため、設定箇所の把握、その画面への移動が必要な分、SWELLよりも手間がかかりました。記事一覧リストのデザインはSWELLが好み最後に、記事一覧リストのレイアウト・ラベルの装飾・マウスホバーのエフェクトを両者で比べてみましたが、SWELLの方がデザインとエフェクトが洗練されていて、きれいなサイトに仕上がると思います。誰でも簡単にきれいなサイトが作れるので、初心者のかたには特に使いやすいワードプレステーマだと思います。気軽に、楽しく記事を書こう。購入前に読んで欲しいSWELLの素敵な公式マニュアル【10選】2021年11月28日satou金融系Web広告担当ブログ未経験でいきなりワードプレスからはじめました!金融業界で働く一介のWeb広告担当者です。わかりやすい肩書はWebマーケターだけど、マーケティングって言えるほど大層な仕事でもない。ブログでは、Webマーケティングのことや生活を豊かにする情報をシェアしていきます。最近はワードプレステーマ『SWELL』にどっぷりハマってます。『SWELL』についてばかり書くことになりそう。