ワードプレステーマSWELLとTHE THORの違いについて、設定方法ごとに解説していきます。
今回はSWELLでは「ピックアップバナー」、THE THORでは「ピックアップ記事」で比較しました。
どちらもメインビジュアルの下に記事を表示する機能です。
この記事のSWELL公式マニュアルはこちら
SWELL ピックアップバナー
SWELLではメインビジュアルの下に画像形式のバナーを設定することができます。
![SWELL ピックアップバナー](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner-1024x833.png)
表示設定
ピックアップバナーは「外観」→「メニュー」でピックアップバナー用のメニューを作成することで表示されるようになります。
まずは次の画面の通りピックアップバナー用のメニューを新規作成します。
![SWELL ピックアップバナー用メニューの作成](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_set_menu-pickup-banner-1024x628.png)
次に左側の「メニュー項目を追加」からピックアップバナーとして表示したいページやリンクを選択し、「メニュー設定」で「ピックアップバナー」にチェックを入れて保存します。
![SWELL ピックアップバナーに表示するページ・リンクの選択](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_set_menu-pickup-banner-2-1024x946.png)
ここまででトップページに「ピックアップバナー」が表示されるようになりました。
![SWELL ピックアップバナーの設置イメージ](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner-image-1024x686.png)
バナーの画像設定
続いてピックアップバナーの画像の設定です。
サイト内のページをピックアップバナーとして設定した場合、自動的にアイキャッチ画像が表示されます。
アイキャッチ画像を使用していなければNO IMAGE画像が表示されます。
![SWELL アイキャッチ画像の設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_set_eye-catch-1024x637.png)
![SWELL ピックアップバナー アイキャッチ画像の表示イメージ](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner-eye-catch-1024x707.png)
ただし、
- アイキャッチ画像とは別の画像を設定したい
- 外部サイトのURLのため、画像が自動設定されない
などの場合に対応するため、メディアから表示する画像を指定することが可能です。
メディアにある画像を設定する方法
次の画像は先ほど設定したピックアップバナー用のメニュー設定画面です。
![SWELL ピックアップバナー 表示する画像の指定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_set_pickup-banner-designation-1024x697.png)
メニュー項目の設定欄にある「説明」にメディアのアップロードした画像のURLを入力することで、バナー用画像として表示することができます。
![SWELL ピックアップバナー メディア画像の表示イメージ](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner-designation-1024x707.png)
メニュー項目の設定欄に「説明」の表示がない場合は、ページ上部の「表示オプション」→「説明」にチェックを入れてください。
![SWELL 表示オプション「説明」表示方法](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_set_menu_display-option-explanation-1024x361.png)
レイアウト・デザインの設定場所
ピックアップバナーのレイアウトとデザインに関する設定は、「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」で行います。
![SWELL ピックアップバナーのレイアウト・デザイン設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_set_pickup-banner-1024x736.png)
レイアウト設定
バナーレイアウトはPCとスマホで設定可能です。
![SWELL ピックアップバナー レイアウト設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_set_pickup-banner-layout.png)
バナーレイアウト(PC)一覧
固定幅 4列
![SWELL ピックアップバナー PCレイアウト 固定幅4列](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_pc-4rows-1024x471.png)
固定幅 3列
![SWELL ピックアップバナー PCレイアウト 固定幅3列](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_pc-3rows-1024x574.png)
固定幅 2列
![SWELL ピックアップバナー PCレイアウト 固定幅2列](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_pc-2rows.png)
フレックス
![SWELL ピックアップバナー PCレイアウト フレックス](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_pc-flex-1024x370.png)
バナーレイアウト(SP)一覧
固定幅 2列
![SWELL ピックアップバナー スマホレイアウト 固定幅2列](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_sp-2rows.png)
固定幅 1列
![SWELL ピックアップバナー スマホレイアウト 固定幅1列](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_sp-1rows.png)
スライド
![SWELL ピックアップバナー スマホレイアウト スライド](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_sp-slide.png)
デザイン設定
ピックアップバナーのデザインは次の画面で行います。
![SWELL ピックアップバナー デザイン設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_set_pickup-banner_design.png)
バナータイトルのデザイン一覧
表示しない
![SWELL ピックアップバナー タイトルデザイン 表示しない](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_title-design1-1024x370.png)
左上に表示
![SWELL ピックアップバナー タイトルデザイン 左上に表示](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_title-design2-1024x379.png)
右下に表示
![SWELL ピックアップバナー タイトルデザイン 右下に表示](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_title-design3-1024x372.png)
中央(シンプル)
![SWELL ピックアップバナー タイトルデザイン 中央(シンプル)](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_title-design4-1024x365.png)
中央(ボタン風)
![SWELL ピックアップバナー タイトルデザイン 中央(ボタン風)](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_title-design5-1024x364.png)
下にワイド表示
![SWELL ピックアップバナー タイトルデザイン 下にワイド表示](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_title-design6-1024x356.png)
その他にもバナーの内側に白線をつけたり、バナー画像を少し暗くしたりすることができます。
内側に白線
![SWELL ピックアップバナー 白線の設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_white-line_list-1024x565.png)
バナー画像を少し暗く
![SWELL ピックアップバナー 画像の明るさ設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_pickup-banner_brightness_list-1024x587.png)
下層ページでの表示設定
ピックアップバナーはトップページだけでなく下層ページにも表示することができます。
デザイン設定項目の下に「その他」という項目があります。
![SWELL ピックアップバナー 下層ページへの表示設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_set_pickup-banner_lower-page.png)
ページごとの表示・非表示設定
さらにページごとにピックアップバナーの表示非表示設定ができます。
![SWELL ピックアップバナー ページごとの表示設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/swell_set_pickup-banner-display-each-page-1024x808.png)
THE THOR ピックアップ記事
THE THORではSWELLのピックアップバナーに類似する設定機能として、トップページの下にピックアップ記事を最大3つ設定することができます。
![THE THOR ピックアップ記事](https://lifestyle-analytics.com/wp-content/uploads/2020/11/thor_pickup-article-1024x957.png)
設定場所
ピックアップ記事の設定は、「外観」→「カスタマイズ」→「TOPページ設定[THE]」→「ピックアップ3記事設定」で行います。
![THE THOR ピックアップ記事の設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/thor_set_pickup-article-1024x649.png)
表示設定
表示設定は「ピックアップ3記事設定」の最初の項目で行います。
![THE THOR ピックアップ記事 表示設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/thor_set_pickup-article-display.png)
表示するテキスト・アイコンの設定
THE THORではピックアップ記事の見出し周辺のテキストを設定することができます。
![THE THOR ピックアップ記事 テキスト・アイコン設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/thor_set_pickup-article_text-icon-1024x507.png)
- セクションの見出しを入力(赤枠線)
- 見出しを太文字にする(赤枠線)
- 見出しの左に表示するアイコンを入力(オレンジ枠線)
- 見出しの右に表示する補足情報を入力(緑枠線)
アイキャッチの設定
ピックアップ記事のアイキャッチの設定は次の画面で示した項目で行います。
![THE THOR ピックアップ記事 アイキャッチ設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/thor_set_pickup-article_eye-catch.png)
画像アスペクト比を選択
- 16:9
-
アイキャッチ画像 アスペクト比(16:9) - 4:3
-
アイキャッチ画像 アスペクト比(4:3) - 1:1
-
アイキャッチ画像 アスペクト比(1:1)
アイキャッチ上のカテゴリを非表示にする
![THE THOR ピックアップ記事 カテゴリ表示設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/thor_pickup-article_category-1024x1011.png)
見出し背景の設定
THE THORではピックアップ記事の見出しの背景効果を設定することができます。
![THE THOR ピックアップ記事 見出しの背景](https://lifestyle-analytics.com/wp-content/uploads/2020/11/thor_pickup-article_background-1024x232.png)
設定は次の画面で示した項目で行います。
![THE THOR ピックアップ記事 見出しの背景設定](https://lifestyle-analytics.com/wp-content/uploads/2020/11/thor_set_pickup-article_background.png)
- 無し
- ブラック
- ブラックメッシュ
- カラー(「カラー系マスク利用時の色を指定」でカラーを指定します)
- カラー+画像グレー(カラー指定+画像はモノトーン調になります)
ピックアップする記事の選択
ピックアップする記事は記事IDを入力することで設定できます。
![THE THOR ピックアップ記事 記事の選択](https://lifestyle-analytics.com/wp-content/uploads/2020/11/thor_set_pickup-article_id.png)
記事IDは「投稿一覧」で確認できます。
![THE THOR 記事ID](https://lifestyle-analytics.com/wp-content/uploads/2020/11/thor-article-id-1024x266.png)
ピックアップ機能の比較結果 まとめ
THE THORのピックアップ記事は非常に目立つサイズで特定の記事をアピールすることができ、この点SWELLよりも優れていると思います。
一方でSWELLの方は投稿記事だけでなく外部サイトへのリンク設置も可能、またバナー数や表示場所の自由度が高いです。
今回はSWELLとTHE THORで完全に同一の機能による比較ではないため、どちらが優位とは言い難いです。
強いて言えば、訴求力ならTHE THOR、デザイン性とカスタマイズ性ならSWELL優位だと思います。
もしこの記事でSWELLに興味を持っていただけたようでしたら、ぜひSWELL公式サイトを覗いてみてください。