SWELLとTHE THORを細かく比較|メインビジュアルの設定(後編)スライドショー・動画表示設定

SWELLとTHE THOR メインビジュアルの設定(後編)

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

今回はメインビジュアルのスライドショー・動画の表示設定についてです。

画像効果やテキスト関連の設定については前回の記事にまとめてありますので、そちらもご覧ください。

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

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

メインビジュアルの設定方法 | 【公式サイト】WordPressテーマ SWELL

この記事の目次

メインビジュアルの設定画面

SWELL THE THORともに静止画、スライドショー、動画形式でメインビジュアルを設定することができます。

SWELLでの設定場所

SWELLのメインビジュアルの設定は、「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」で行います。

SWELL メインビジュアルの設定場所
SWELL メインビジュアルの設定場所

最初の表示項目で画像もしくは動画を選択するとメインビジュアルが表示されるようになります。

SWELL メインビジュアルの表示内容
SWELL メインビジュアルの表示内容

THE THORでの設定場所

THE THORのメインビジュアルの設定は、「外観」→「カスタマイズ」→「TOPページ設定[THE]」→「メインビジュアル設定」で行います。

THE THOR メインビジュアルの設定
THE THOR メインビジュアルの設定場所

メインビジュアルの表示選択で「表示」を選択するとメインビジュアルが表示されるようになります。

THE THORメインビジュアルの設定
THE THORメインビジュアルの設定

動画やスライドショーなどの表示形式は「メインビジュアルの表示モード設定」で選択します。

スライドショーの設定

SWELLはシンプルでオシャレ

SWELLでは、メインビジュアルの静止画を「各スライドの設定」で指定することができます。

画像は最大で5枚、PCとスマホ別々に指定することが可能です。

SWELL メインビジュアル スライド画像の設定
スライド画像はPCとスマホで別々に設定可能

画像を2枚以上設定すると「画像スライダー設定」が出現します。

画像スライダー設定

SWELL 画像スライダーの設定(1/2)
画像スライダー設定(1/2)
SWELL 画像スライダーの設定(2/2)
画像スライダー設定(2/2)

スライドの切り替えアニメーション

SWELLではスライドが切り替わる際のアニメーションパターンが2種類用意されています。

フェード

フェードアウトしながら切り替わります。

スライド

左にスライドして切り替わります。

スライドの表示中アニメーション

表示しているメインビジュアルのアニメーションを決める項目です。

画像をゆっくりズームしたり、左から右へ動かすアニメーションをつけることができます。

ズームイン

ゆっくり画像にズームします。

左から右へ

画像がゆっくり水平に動きます。

カメラが右から左へ動いているから「右から左へ」では?と思いましたが、被写体が「左から右へ」動いているということですね。多分。

ナビゲーションの表示設定

スライド表示のナビゲーションは2種類用意されています。

SWELL メインビジュアル ナビゲーションの表示設定
ナビゲーションの表示設定と適用箇所
ナビゲーション設定でできること
  • 矢印ナビゲーション:メインビジュアル左右の矢印
  • ページネーション:メインビジュアル下部の「〇●〇」表示部分

その他次のような設定も可能です。

  • スライドの切り替わり速度:次のスライドに切り替わるまでの速度
  • スライドが切り替わる間隔:1枚のスライドが表示されている時間
  • スライドの表示枚数:1度に表示するスライド枚数
  • スライドの表示枚数(SP):表示枚数設定のスマホ版です。
  • テキストの固定表示設定:1枚目のスライドのテキストを固定表示できます。

THE THORはクセ強アニメーション豊富

THE THORでは、メインビジュアルの表示モード設定で「スライドショー」を選択するとメインビジュアルに表示する画像を最大5枚設定できるようになります。

THE THOR メインビジュアル スライド画像の設定
表示する画像はPCとスマホで共通

PCとスマホで異なる画像を設定することはできません。

「スライドショー時の設定」でスライドショーの再生速度や切り替えアニメーションの設定ができます。

THE THOR メインビジュアル スライドショー時の設定
スライドショー時の設定項目

自動再生機能の選択

THE THORではスライドショーの自動再生のON・OFFを設定することができます。

自動再生ON時の再生速度をミリ秒で入力

自動再生をONにした場合に1枚のスライドを表示する時間をミリ秒単位で設定できます。

スライドエフェクトの選択

スライドが切り替わる際のアニメーションパターンが4種類用意されています。

横スライド

左にスライドして切り替わります。

平面回転

クルクル回転します。

キューブ回転

なかなかクセ強エフェクトです。

カバーフロー

もう言葉で伝えられないので動画見てください。

ぶっちゃけTHE THORのスライドアニメーションは4つ内3つがクセ強いです。
ちょっとしばらく見たことないアニメーションでびっくりしました。

THE THORではスライドの切り替わり速度の調整はできません。

動画の設定

SWELLはメディア内の動画から設定

SWELLではPCとスマホで再生する動画を1枚ずつ設定することができます。

SWELL メインビジュアル 動画の設定(PC)
動画とポスター画像の設定(PC)
SWELL メインビジュアル 動画の設定(スマホ)
動画とポスター画像の設定(スマホ)

動画はワードプレスの「メディア」にアップロードした動画ファイルから選択します。

ワードプレス メディアライブラリ(動画)
ワードプレスのメディア内から動画を選択

設定した動画はカスタマイザー内で再生して確認することができるが結構便利です。

また動画が読み込まれるまでの間表示するポスター画像もPCとスマホで指定することが可能です。

THE THORはYouTubeから動画を設定

THE THORでは再生する動画を1枚だけ設定することができます。

PCとスマホで同じ動画を再生する仕様のため、デバイスごとに出しわけることはできません。

THE THOR メインビジュアル 動画の設定

プレビュー表示されている画像は動画が読み込まれるまでの間表示するポスター画像です。

動画はYouTubeの動画IDを入力することで設定します。

【THE THORのみ】注目エリア機能

THE THORにはメインビジュアルの下に注目エリアというお知らせ欄を設定することができます。

THE THOR 注目エリア
メインビジュアル下に注目エリアを設定できる

SWELLにはこのような表示エリアはありません。

設定は、「外観」→「カスタマイズ」→「TOPページ設定[THE]」→「メインビジュアル下お知らせ設定」で行います。

THE THOR メインビジュアル下お知らせ設定
注目エリアの設定は「メインビジュアル下お知らせ設定」内にある

メインビジュアルで設定したテキストとボタンリンクに加えて、注目エリアでさらにメッセージとリンクを置くことができるので、ファーストビューでの訴求量とCTA導線をより強めることが可能です。

THE THOR 注目エリアの設定
注目エリアの設定項目
注目エリア設定項目
  • 表示非表示
  • キャッチコピー
  • ボタンのテキスト
  • ボタンのリンク先URL
  • 注目エリアの背景色

まとめ

メインビジュアルのスライドショーと動画表示機能について、SWELLとTHE THORで大きな違いはないと思いますが私なりの見解を述べたいと思います。

THE THORの良いところ・気になったところ

注目エリアの機能で特定の記事や広告をアピールしやすそう!

・スライドアニメーションのクセが強い。
(好みの問題です。)
・スライドの切替速度の調整はできない。
(体感ちょっと速い)

SWELLの良いところ・気になったところ

・スライドアニメーションどれも使いやすい!
(好みの問題ですよ!)
・スライドの切替速度調節できる!
・ナビゲーションガイドが表示非表示選べる!

正直ないです。
強いて言えば、自動再生のON・OFFあると便利かも。

最後は好みで選んで問題なし!

純粋に機能の違いで比べるとSWELLはメインビジュアルをPCとスマホで出し分けられるのに対して、THE THORではできないといった優劣はつけられるのですが、個人的にはメインビジュアルをデバイスで出し分ける必要性をあまり感じないので、その機能で優劣をつけるべきではないと考えています。

メインビジュアル周辺で特定の記事や広告をアピールしていきたいのであれば、THE THORのほうが注目エリアの設定ができる分、アクセス増えるかもしれません。

好みだけで選ばせていただけるならSWELLを推します。

メインビジュアルのアニメーションはTHE THORよりもSWELLの方が、シンプルで使い勝手が良いです。

THE THORのアニメーションはちょっとクセ強くて使いづらい…。

見る人の印象が大きく変わるメインビジュアルのアニメーションは他の設定項目よりも重要視されるべきだと思います。

以上

SWELLとTHE THORで悩んでいるかたのご参考になれば幸いです。

よろしければ下のリンクから公式サイトも覗いてみていただけますか?
ブログ活動のやる気につながります。

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

SWELLとTHE THOR メインビジュアルの設定(後編)

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

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

この記事を書いた人

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

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

この記事の目次
閉じる