【SWELL THE THOR 個別機能比較】ピックアップバナー(記事)の設定

SWELLとTHE THOR ピックアップバナー(記事)の設定

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

このブログではSWELLとTHE THORの個別機能に絞って紹介しています。かなり細かな部分の違いを知ることに役立つと思います。

今回はSWELLでは「ピックアップバナー」、THE THORでは「ピックアップ記事」で比較しました。

どちらもメインビジュアルの下に記事を表示する機能です。

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

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

ピックアップバナー機能の使い方 | 【公式サイト】WordPressテーマ SWELL

この記事の目次

SWELL ピックアップバナー

SWELLではメインビジュアルの下に画像形式のバナーを設定することができます。

SWELL ピックアップバナー
SWELL ピックアップバナーの表示場所

表示設定

ピックアップバナーは「外観」→「メニュー」でピックアップバナー用のメニューを作成することで表示されるようになります。

STEP
メニューの新規作成

まずは次の画面の通りピックアップバナー用のメニューを新規作成します。

SWELL ピックアップバナー用メニューの作成
ピックアップバナー用メニューの作成
STEP
表示するページ・リンクを選択

次に左側の「メニュー項目を追加」からピックアップバナーとして表示したいページやリンクを選択し、「メニュー設定」で「ピックアップバナー」にチェックを入れて保存します。

SWELL ピックアップバナーに表示するページ・リンクの選択
ピックアップバナーとして表示したいページやリンクを選択

ここまででトップページに「ピックアップバナー」が表示されるようになりました。

SWELL ピックアップバナーの設置イメージ
この時点だと画像がまだ表示されない

バナーの画像設定

続いてピックアップバナーの画像の設定です。

サイト内のページをピックアップバナーとして設定した場合、自動的にアイキャッチ画像が表示されます。

アイキャッチ画像を使用していなければNO IMAGE画像が表示されます。

SWELL アイキャッチ画像の設定
SWELL アイキャッチ画像の設定
SWELL ピックアップバナー アイキャッチ画像の表示イメージ
設定したアイキャッチ画像が表示される

ただし、

  • アイキャッチ画像とは別の画像を設定したい
  • 外部サイトのURLのため、画像が自動設定されない

などの場合に対応するため、メディアから表示する画像を指定することが可能です。

メディアにある画像を設定する方法

次の画像は先ほど設定したピックアップバナー用のメニュー設定画面です。

SWELL ピックアップバナー 表示する画像の指定
設定欄の「説明」にメディアのURLを入力する

メニュー項目の設定欄にある「説明」にメディアのアップロードした画像のURLを入力することで、バナー用画像として表示することができます。

SWELL ピックアップバナー メディア画像の表示イメージ
メディア画像の表示イメージ
メニューに「説明」を表示する方法

メニュー項目の設定欄に「説明」の表示がない場合は、ページ上部の「表示オプション」→「説明」にチェックを入れてください。

SWELL 表示オプション「説明」表示方法
表示オプション「説明」表示方法

レイアウト・デザインの設定場所

ピックアップバナーのレイアウトとデザインに関する設定は、「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」で行います。

SWELL ピックアップバナーのレイアウト・デザイン設定
SWELL ピックアップバナーのレイアウト・デザイン設定場所

レイアウト設定

バナーレイアウトはPCとスマホで設定可能です。

SWELL ピックアップバナー レイアウト設定
SWELL ピックアップバナー レイアウト設定

バナーレイアウト(PC)一覧

固定幅 4列

SWELL ピックアップバナー PCレイアウト 固定幅4列
PCレイアウト 固定幅4列

固定幅 3列

SWELL ピックアップバナー PCレイアウト 固定幅3列
PCレイアウト 固定幅3列

固定幅 2列

SWELL ピックアップバナー PCレイアウト 固定幅2列
PCレイアウト 固定幅2列

フレックス

SWELL ピックアップバナー PCレイアウト フレックス
PCレイアウト フレックス(横一列に全て並べる)

バナーレイアウト(SP)一覧

固定幅 2列

SWELL ピックアップバナー スマホレイアウト 固定幅2列
スマホレイアウト 固定幅2列

固定幅 1列

SWELL ピックアップバナー スマホレイアウト 固定幅1列
スマホレイアウト 固定幅1列

スライド

SWELL ピックアップバナー スマホレイアウト スライド
スマホレイアウト スライド(横スクロール可能に)

デザイン設定

ピックアップバナーのデザインは次の画面で行います。

SWELL ピックアップバナー デザイン設定
SWELL ピックアップバナー デザイン設定

バナータイトルのデザイン一覧

表示しない

SWELL ピックアップバナー タイトルデザイン 表示しない
タイトルデザイン 表示しない

左上に表示

SWELL ピックアップバナー タイトルデザイン 左上に表示
タイトルデザイン 左上に表示

右下に表示

SWELL ピックアップバナー タイトルデザイン 右下に表示
タイトルデザイン 右下に表示

中央(シンプル)

SWELL ピックアップバナー タイトルデザイン 中央(シンプル)
タイトルデザイン 中央(シンプル)

中央(ボタン風)

SWELL ピックアップバナー タイトルデザイン 中央(ボタン風)
タイトルデザイン 中央(ボタン風)

下にワイド表示

SWELL ピックアップバナー タイトルデザイン 下にワイド表示
タイトルデザイン 下にワイド表示

その他にもバナーの内側に白線をつけたり、バナー画像を少し暗くしたりすることができます。

内側に白線

SWELL ピックアップバナー 白線の設定
ピックアップバナーの内側に白線ラインがつく

バナー画像を少し暗く

SWELL ピックアップバナー 画像の明るさ設定
画像が暗くなると文字が読みやすくなる

バナー画像を少し暗くすることでタイトルテキストの視認性を高めることができます。

下層ページでの表示設定

ピックアップバナーはトップページだけでなく下層ページにも表示することができます。

デザイン設定項目の下に「その他」という項目があります。

SWELL ピックアップバナー 下層ページへの表示設定
チェックを入れると下層ページにも表示される

「トップページ以外の下層ページにも表示する」にチェックを入れると、下層ページにもピックアップバナーが表示されるようになります。

ページごとの表示・非表示設定

さらにページごとにピックアップバナーの表示非表示設定ができます。

SWELL ピックアップバナー ページごとの表示設定
SWELL ピックアップバナー ページごとの表示設定

エディタ画面の右側のカラム→「表示の上書き設定」→「ピックアップバナー」で表示非表示を選択するだけ設定完了です。

THE THOR ピックアップ記事

THE THORではSWELLのピックアップバナーに類似する設定機能として、トップページの下にピックアップ記事を最大3つ設定することができます。

THE THOR ピックアップ記事
THE THOR ピックアップ記事表示場所

設定場所

ピックアップ記事の設定は、「外観」→「カスタマイズ」→「TOPページ設定[THE]」→「ピックアップ3記事設定」で行います。

THE THOR ピックアップ記事の設定
THE THOR ピックアップ記事の設定場所

表示設定

表示設定は「ピックアップ3記事設定」の最初の項目で行います。

THE THOR ピックアップ記事 表示設定
THE THOR ピックアップ記事 表示設定

投稿記事数が3件未満の場合は「表示」を選択してもピックアップ記事は表示されません。

表示するテキスト・アイコンの設定

THE THORではピックアップ記事の見出し周辺のテキストを設定することができます。

THE THOR ピックアップ記事 テキスト・アイコン設定
THE THOR ピックアップ記事 テキスト・アイコン設定
  • セクションの見出しを入力(赤枠線
  • 見出しを太文字にする(赤枠線
  • 見出しの左に表示するアイコンを入力(オレンジ枠線
  • 見出しの右に表示する補足情報を入力(緑枠線

アイキャッチの設定

ピックアップ記事のアイキャッチの設定は次の画面で示した項目で行います。

THE THOR ピックアップ記事 アイキャッチ設定
THE THOR ピックアップ記事 アイキャッチ設定

画像アスペクト比を選択

16:9
THE THOR ピックアップ記事 画像アスペクト比(16:9)
アイキャッチ画像 アスペクト比(16:9)
4:3
THE THOR ピックアップ記事 画像アスペクト比(4:3)
アイキャッチ画像 アスペクト比(4:3)
1:1
THE THOR ピックアップ記事 画像アスペクト比(1:1)
アイキャッチ画像 アスペクト比(1:1)

アイキャッチ上のカテゴリを非表示にする

THE THOR ピックアップ記事 カテゴリ表示設定
カテゴリの表示イメージ

見出し背景の設定

THE THORではピックアップ記事の見出しの背景効果を設定することができます。

THE THOR ピックアップ記事 見出しの背景
赤枠で囲ったエリアが見出しの背景

設定は次の画面で示した項目で行います。

THE THOR ピックアップ記事 見出しの背景設定
THE THOR ピックアップ記事 見出しの背景設定
画像のマスク効果
  • 無し
  • ブラック
  • ブラックメッシュ
  • カラー(「カラー系マスク利用時の色を指定」でカラーを指定します)
  • カラー+画像グレー(カラー指定+画像はモノトーン調になります)

ピックアップする記事の選択

ピックアップする記事は記事IDを入力することで設定できます。

THE THOR ピックアップ記事 記事の選択
THE THOR ピックアップ記事 記事の選択

記事IDは「投稿一覧」で確認できます。

THE THOR 記事ID
記事IDの確認場所

ピックアップ機能の比較結果 まとめ

THE THORのピックアップ記事は非常に目立つサイズで特定の記事をアピールすることができ、この点SWELLよりも優れていると思います。

一方でSWELLの方は投稿記事だけでなく外部サイトへのリンク設置も可能、またバナー数や表示場所の自由度が高いです。

今回はSWELLとTHE THORで完全に同一の機能による比較ではないため、どちらが優位とは言い難いです。

強いて言えば、訴求力ならTHE THORデザイン性とカスタマイズ性ならSWELL優位だと思います。

もしこの記事でSWELLに興味を持っていただけたようでしたら、ぜひSWELL公式サイトを覗いてみてください。

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

SWELLとTHE THOR ピックアップバナー(記事)の設定

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

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

この記事を書いた人

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

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

この記事の目次
閉じる