SWELLとTHE THORを細かく比較|メインビジュアルの設定(前編)画像効果・テキスト設定

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

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

今回はサイトの顔である「メインビジュアル」についてです。

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

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

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

この記事の目次

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

まずは両テーマのメインビジュアルの設定場所についてです。
(機能比較だけ知りたい方は飛ばしてOKです。)

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では「表示設定」でメインビジュアルの高さ設定を4種類から選択できます。

SWELL メインビジュアルの高さ設定
SWELL メインビジュアルの高さ設定

太文字の「メインビジュアルの高さ設定」のところで選択してください。

高さ設定は次の4種類から選択
  • 画像・動画サイズのまま
  • コンテンツに応じる
  • 数値で指定する
  • ウィンドウサイズにフィットさせる

数値で指定する

高さを「数値で指定する」場合、PCサイズ (幅960px以上)と SPサイズ(幅960px未満)で分けて指定できます。

余白をつける

また「周りに余白をつける」でメインビジュアルに余白をつけることができます。

SWELL メインビジュアルの余白設定
SWELL メインビジュアルの余白設定

余白をありなしイメージです。

SWELL メインビジュアルの余白ありなし
SWELL メインビジュアルの余白イメージ

THE THORでの設定

THE THORでは「メインビジュアル設定」でメインビジュアルの高さと横幅を設定できます。

THE THOR メインビジュアルの高さ・横幅設定
THE THOR メインビジュアルの高さ・横幅設定
横幅の設定

横幅は次の3種類から選択します。

  • ワイドサイズ
  • ノーマルサイズ
  • ビッグワイド
高さの設定

高さはPC・スマホそれぞれで任意の数値を入力することで指定できます。

画像効果の設定

SWELLでの設定

SWELLではメインビジュアルに適用するフィルター処理被せるカラーの指定ができます。

SWELL 画像効果の設定
SWELL 画像効果の設定

フィルター処理

メインビジュアルの画像(動画)にエフェクトを加えることができます。

動画でも試しましたが、ちゃんと同じように効果つきました!

フィルター処理なしの状態

SWELL メインビジュアル フィルター処理なし
フィルター処理なし

ブラー(ぼかし)

SWELL メインビジュアル ブラー(ぼかし)
ブラー(ぼかし)

グレースケール

SWELL メインビジュアル グレースケール
グレースケール

ドット

SWELL メインビジュアル ドット
ドット

ブラシ

SWELL メインビジュアル ブラシ
ブラシ

オーバーレイカラー

メインビジュアルに好きな色を任意の不透明度(opacity)で被せることも可能です。

不透明度:0.2

SWELL メインビジュアル オーバーレイカラー(#e2ea48)
オーバーレイカラー:#e2ea48 不透明度:0.2

不透明度:0.7

SWELL メインビジュアル オーバーレイカラー(#1ca8db)
オーバーレイカラー:#1ca8db 不透明度:0.7

メインビジュアルをスライドショー形式で複数画像掲載する場合、画像効果はすべての画像に適用されます。

THE THORでの設定

THE THORではSWELLと同じくメインビジュアルに適用するフィルター処理(マスク)被せるカラーの指定ができます。

THE THOR マスク効果の設定
THE THOR マスク効果の設定

画像のマスクを選択

メインビジュアルの画像(動画)にエフェクトを加えることができます。

マスク処理なし

THE THOR メインビジュアル マスク処理なし
マスク処理なし

ブラック

THE THOR メインビジュアル ブラック
ブラック

ブラックメッシュ

THE THOR メインビジュアル ブラックメッシュ
ブラックメッシュ

カラー

THE THOR メインビジュアル カラー
カラー(任意のカラーを画像に被せます)

任意のカラーを画像に被せます。

カラー+画像グレー

THE THOR メインビジュアル カラー+画像グレー
カラー+画像グレー

画像をモノクロに処理した後で、その上に任意のカラーを被せます。

「カラー」と「カラー+画像グレー」はかなり違いが分かりにくいです。
普通にカラー設定するとほとんど同じ印象に仕上がると思います。

動画に「カラー」と「カラー+画像グレー」のマスク設定をしても、IE・Edgeは未対応とのこと。

THE THOR メインビジュアル 動画のマスク設定
IE・Edgeでカラーマスク未対応
SWELLとここが違う

機能としてはほぼSWELLと同じですが、マスクの不透明度設定はできません。

その一方、スライドショー形式で複数画像掲載する場合、画像1枚ごとにマスク設定と被せるカラーを指定することができます

テキスト・リンクの設定

SWELLでの設定

SWELLではメインビジュアルの上に任意のテキストとリンクを設定することができます。

入力項目
  • メインテキスト
  • サブテキスト
  • リンク先URL
  • ボタンテキスト:リンク先URLが空欄の場合は入力しても非表示です。
SWELL メインビジュアル テキスト・リンク設定
テキスト・リンク設定項目と適用箇所

リンク先URLを入力するとボタンのリンク先が指定できます。
ただし、ボタンテキストが空欄の場合は画像全体がリンクとなります。

SWELL メインビジュアル ボタンリンクの表示
リンク先URLとボタンテキストが入力されるとボタンが出現
SWELL メインビジュアル 画像全体のリンク化
リンク先URLのみ入力すると画像全体がリンク化

その他メインビジュアルにブログパーツとalt属性を設定できます。

SWELL メインビジュアル ブログパーツIDとalt属性
ブログパーツとalt属性の設定も可能

THE THORでの設定

THE THORでもメインビジュアルに設定する要素は同じです。

THE THOR メインビジュアル テキスト・リンク設定
THE THOR テキスト・リンク設定箇所
入力項目
  • タイトル(タグ利用)
  • サブタイトル(タグ利用)
  • ボタンのテキスト
  • ボタンのリンク先URL

THE THORの場合、タイトルとサブタイトルの入力欄で「タグ利用可」と表示されています。

つまり<br>で改行したり<img>で任意の画像を載せたりすることができます。

THE THOR メインビジュアル ボタンリンク
ボタンテキストとリンク先URLの入力でボタンが出現

ボタンのリンク先URLに任意のURLを登録するとボタンリンクが表示されます。

SWELLとここが違う

THE THORではリンクはボタンのみ設定可能で、SWELLのように画像全体をリンクにするような機能はありません。

テキスト・ボタンデザインの設定

SWELLでの設定

SWELLではカスタマイザーの「メインビジュアル」内でテキストとボタンの各デザインに関する設定が可能です。

SWELL メインビジュアル テキスト・ボタンデザインの設定(1/2)
テキスト・ボタンデザインの設定(1/2)
SWELL メインビジュアル テキスト・ボタンデザインの設定(2/2)
テキスト・ボタンデザインの設定(2/2)
テキストの位置

テキストの表示位置を変えることができます。

SWELL メインビジュアル テキストの位置(左)
テキストの位置(左)
SWELL メインビジュアル テキストの位置(中央)
テキストの位置(中央)
SWELL メインビジュアル テキストの位置(右)
テキストの位置(右)
テキストカラー

メインテキストとサブテキストの文字色を設定できます。

テキストシャドウカラー

メインテキストとサブテキストの影色を設定できます。

ボタンカラー

ボタンの背景色を設定できます。

ボタンタイプ

ボタンのデザインを「白抜き」と「ボーダー」の2種類から選択します。

「ボーダー」では、文字色がボタンカラーと同じ色に自動調整されます。

SWELL メインビジュアル ボタンタイプ(白抜き)
ボタンタイプ(白抜き)
SWELL メインビジュアル ボタンタイプ(ボーダー)
ボタンタイプ(ボーダー)

ここまでの設定はメインビジュアルに表示する画像1枚ごとに変更することが可能です。
次の設定からはメインビジュアル共通のデザイン設定で、画像1枚ごとに変更することはできません。

画像(動画)の上に表示されるボタンの丸み

ボタンの形を設定できます。

SWELL メインビジュアル ボタンの丸み(なし)
ボタンの丸み(なし)
SWELL メインビジュアル ボタンの丸み(少し丸める)
ボタンの丸み(少し丸める)
SWELL メインビジュアル ボタンの丸み(丸める)
ボタンの丸み(丸める)
Scrollボタンを表示する

メインビジュアルの下部に「Scroll」ボタンが表示されます。

SWELL メインビジュアル Scrollボタンの表示
Scrollボタンの表示

THE THORでの設定

THE THORではテキストやボタンのデザイン変更はできるものの、設定方法とその影響範囲に注意が必要です。

テキストカラー・テキストシャドウカラーの変更

THE THORにはテキストカラーに関する設定項目がないため、変更する場合はCSSの記述が必要です。

タイトルとサブタイトルの入力欄ではタグ利用が可能なので、こちらでフォントカラー(プロパティ:color)テキストシャドウカラー(プロパティ:text-shadow)を設定するのが一番簡単だと思います。

ボタンのデザイン変更

メインビジュアル上に表示するタンデザインの変更は、「外観」→「カスタマイズ」→「パーツスタイル設定[THE]」→「共通ボタン設定(全ページ用)」で行います。

THE THOR メインビジュアル ボタンデザインの設定場所
ボタンデザインの設定項目は「共通ボタン設定」内にある

「共通ボタン設定」では「プライマリーボタン」「セカンダリーボタン」「ノーマルボタン」の3種類のボタンを設定することができます。

THE THOR 共通ボタンのイメージ一覧
THE THORでは3種類の共通ボタンが用意されている

メインビジュアル上のボタンデザインを変更する場合は「プライマリーボタンの設定」を変更します。

THE THOR プライマリーボタンの設定
文字色と背景色の設定ができる
THE THOR メインビジュアル ボタンデザインの変更イメージ
プライマリーボタンの設定がメインビジュアルのボタンに適用

ここで注意しなければならないのは、共通ボタン設定の変更は全ページに適用されるため、プライマリーボタンの設定を変更すると、メインビジュアル上のボタンだけでなく、サイト内に設置されたプライマリーボタンすべてのデザインが変更されます。

CTAボタンやサーチパネルの検索ボタンもプライマリーボタンですのでデザイン変更する際は影響範囲に注意が必要です。

まとめ

メインビジュアルの表示設定について、レイアウトとデザインのカスタマイズ性の観点で比較すると、SWELLはテキストとボタンの表示に関して一通りの機能を備えています。

一方で、THE THORは文字色を変更するのにstyle属性の直書きが必要であったり、ボタンデザインの変更の影響がサイト全体のプライマリーボタンに及んでしまったりする部分に使いにくさを感じます。

次回はメインビジュアルのスライドショー・動画表示など今回の記事で説明しきれなかった機能についてです。

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

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

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

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

この記事を書いた人

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

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

この記事の目次