【SWELL THE THOR 比較】ヘッダーのデザイン・レイアウト設定

SWELLとTHE THOR ヘッダーのデザイン・レイアウト設定の違い

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

今回は、「ヘッダーのデザイン・レイアウト設定」について違いを見ていきます。

なお、過去の投稿でお伝えした通り、当ブログではSWELLをおすすめしています。

SWELL公式サイトの関連マニュアルはこちら

「ヘッダー・ロゴ画像」のデザイン・レイアウト設定 | 【公式サイト】WordPressテーマ SWELL

この記事の目次

ヘッダーカラーの設定

ヘッダーカラーの設定について、「サイト全体の基本カラーの設定方法」で解説した通り、SWELLとTHE THORで基本設定に大きな違いはありあません。

詳細は別記事で紹介していますので、そちらをご覧ください。

【SWELLのみ】ヘッダーの背景の透明化

SWELLではトップページのみヘッダー(グローバルメニューともいう)の背景を透明にすることができます。

SWELL ヘッダーの背景の透明化設定

ヘッダー背景を透明化することで、メインビジュアルをより際立たせることができます!

SWELL ヘッダー透明化適用イメージ
ヘッダーエリアを透明化したイメージ

透明化するときはヘッダーの文字色は黒と白の2色を指定できます。
また透明化する場合に表示するロゴ画像を別途指定できるので、トップページは背景透明用のロゴ画像、その他のページはオリジナルのロゴ画像といった具合に表示するロゴ画像を使い分けることができます。

ヘッダーロゴ画像の設定

SWELLでの設定方法

ヘッダーロゴ画像の設定は「外観」→「カスタマイズ」→「ヘッダー」で行います。

「ヘッダー」メニュー内の「ヘッダーロゴ設定」でロゴ画像を設定します。

ロゴ画像サイズの設定

SWELLではPC ・PC追従ヘッダー・スマホそれぞれでロゴ画像の高さを調節できます。

SWELL ロゴ画像の設定
SWELL ロゴ画像の設定
高さの設定範囲
  • PC:32~120px
  • PC追従ヘッダー:24~48px
  • スマホ(SP):40~80px

THE THORでの設定方法

ヘッダーロゴ画像の設定は「外観」→「カスタマイズ」→「基本設定[THE]」→「サイトロゴの設定」で行います。

THE THORでもPCとスマホでロゴ画像の高さ調整が可能です。

高さはあらかじめ指定された5種類から選びます。

THE THOR ロゴ画像の設定
THE THOR ロゴ画像の設定

ヘッダーのレイアウト・デザイン設定

SWELLでの設定方法

ヘッダーのレイアウト・デザイン設定は「外観」→「カスタマイズ」→「ヘッダー」で行います。

SWELLではロゴ画像とヘッダーメニューの並び方について、PC表示では4種類、スマホ表示で3種類のレイアウトが用意されています。

タブレットの横表示ではPCのレイアウトで表示されます。

SWELL ヘッダーレイアウト設定
SWELL ヘッダーレイアウト設定

SWELL ヘッダーのレイアウト(PC)

ヘッダーナビをロゴの横に(右寄せ)

SWELL ヘッダーレイアウト(PC) ヘッダーナビをロゴの横に(右寄せ)

ヘッダーナビをロゴの横に(左寄せ)

SWELL ヘッダーレイアウト(PC) ヘッダーナビをロゴの横に(左寄せ)

ヘッダーナビを下に

SWELL ヘッダーレイアウト(PC) ヘッダーナビを下に

ヘッダーナビを上に

SWELL ヘッダーレイアウト(PC) ヘッダーナビを上に

SWELL ヘッダーのレイアウト(スマホ)

ロゴ:左 / メニュー:右

SWELL ヘッダーレイアウト(SP) ロゴ:左 / メニュー:右

ロゴ:中央 / メニュー:右

SWELL ヘッダーレイアウト(SP) ロゴ:中央 / メニュー:右

ロゴ:中央 / メニュー:左

SWELL ヘッダーレイアウト(SP) ロゴ:中央 / メニュー:左

THE THORでの設定方法

ヘッダーレイアウトの設定は「外観」→「カスタマイズ」→「共通エリア設定[THE]」→「ヘッダーエリア設定」で行います。

THE THORではPCとスマホで共通のヘッダーレイアウトが2種類用意されています。

THE THOR ヘッダーレイアウト設定
THE THOR ヘッダーレイアウト設定

THE THOR ヘッダーのレイアウト(PC)

シンプル(default)

THE THOR ヘッダーレイアウト(PC) シンプル

ダイナミック

THE THOR ヘッダーレイアウト(PC) ダイナミック

THE THOR ヘッダーのレイアウト(スマホ)

シンプル(default)

THE THOR ヘッダーレイアウト(SP) シンプル

ダイナミック

THE THOR ヘッダーレイアウト(SP) ダイナミック

またヘッダーメニューの表示非表示をPCとスマホ別々に選択することも可能です。

THE THOR グローバルメニュー設定
THE THOR グローバルメニュー設定

グローバルメニューを表示する

THE THOR ヘッダーレイアウト(PC) シンプル
グローバルメニューを表示(PC)
THE THOR ヘッダーレイアウト(SP) シンプル
グローバルメニューを表示(スマホ)

グローバルメニューを表示しない

THE THOR ヘッダーレイアウト(PC) グローバルメニュー表示なし
グローバルメニューを非表示(PC)
THE THOR ヘッダーレイアウト(SP) グローバルメニュー表示なし
グローバルメニューを非表示(スマホ)

ヘッダーの追従設定

SWELLとTHE THORどちらも追従ヘッダーの設定が可能です。

SWELLでの設定方法

PCとスマホそれぞれで追従させるかどうか設定できます。

SWELL ヘッダーの追従設定
SWELL ヘッダーの追従設定

SWELLではPC表示に限って、追従ヘッダーの背景の透明度を設定することができます。

THE THORでの設定方法

赤枠で囲った部分で追従ヘッダー設定を行います。

THE THOR ヘッダーの追従設定
THE THOR ヘッダーの追従設定

ヘッダーメニュー(グローバルナビ)のエフェクト設定

SWELLではヘッダーメニューのエフェクト設定ができますが、THE THORではエフェクト設定が用意されていないため、CSSのカスタマイズが必要です。

SWELLでの設定方法

SWELLではヘッダーメニューの各メニュー項目にマウスホバーした時のエフェクトを5種類から選ぶことができます。

SWELL ヘッダーメニューのマウスホバーエフェクト設定
SWELL ヘッダーメニューのマウスホバーエフェクト設定

エフェクトで出てくるラインの色・サブメニューの背景色を2色から選ぶことができます。

THE THORでの設定

THE THORではSWELLのようなマウスホバーエフェクトを設定する機能が用意されていません。

デフォルトのエフェクトを変更したい場合は追加CSSなどでカスタマイズする必要があります。

スマホヘッダーに表示するボタンの設定

SWELLではスマホヘッダーのボタンの背景色とアイコン下に表示するテキストを設定できますが、THE THORでは同等の機能が用意されていないため、CSSのカスタマイズが必要です。

SWELLでの設定方法

SWELLではスマホのヘッダーに「メニューボタン」と「カスタムボタン」の2つを設置することができます。

SWELL スマホヘッダーに表示するボタンの設定
SWELL スマホヘッダーに表示するボタンの設定

メニューボタン(赤線)とカスタムボタン(青線)それぞれボタンの背景色とアイコン下に表示するテキストを設定することができます。

カスタムボタンはデフォルトで検索ボタンになっています。
好きなアイコン・リンク先に変更することが可能です。

THE THORでの設定方法

THE THORではメニューボタンの背景色とアイコンの下に表示するテキストをカスタマイズする機能はありません。

追加CSSでカスタマイズすれば、好みのデザインにすることができるはずですが、ネットで調べても詳しい情報が見つからなかったので、ハードル高いと感じました。

まとめ ヘッダーの設定はSWELLの方が柔軟

SWELLとTHE THORで「ヘッダーのデザイン・レイアウト設定」について比較しましたが、SWELLの方がテーマカスタマイザーでできることが多いです。

SWELLのスマホメニューアイコンの下に任意のテキストを表示できるところとか、ほんと痒い所に手が届くように作られているなと感心しました。

またTHE THORからSWELLに乗り換えて感じたことの一つは圧倒的に追加CSSを使うことがなくなったということです。

SWELLは追加CSSを使わなくて済むようにテーマカスタマイザーが大変丁寧に作られていると思います!(SWELLさまさまです。)

SWELLのこともっと知りたくなりましたか?

SWELLにはここでは紹介しきれない素晴らしい機能がまだまだあるので、よかったら公式サイトも覗いてみてください。

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

SWELLとTHE THOR ヘッダーのデザイン・レイアウト設定の違い

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

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

この記事を書いた人

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

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

この記事の目次
閉じる