【SWELL THE THOR 比較】お知らせバーの設定

SWELLとTHE THOR お知らせバーの設定の違い

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

今回はヘッダー周辺に表示できる「お知らせバーの設定」についてです。

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

SWELLとTHE THORではグローバルメニューの周辺にお知らせバーを表示することができます。

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

ヘッダー上下に設置できる「お知らせバー」の設定方法 | 【公式サイト】WordPressテーマ SWELL

この記事の目次

SWELLのお知らせバー

設定場所

SWELLのお知らせバーに関する設定は、「サイト全体設定」→「お知らせバー」で行います。

SWELL お知らせバーの表示設定
SWELL お知らせバーの表示設定場所

設定できること

【表示位置の設定】

SWELLのお知らせバーの表示はグローバルメニューの上部もしくは下部で表示することができます。

SWELL お知らせバーの表示位置設定
SWELL お知らせバーの表示位置設定
SWELL お知らせバーの表示位置イメージ
SWELL お知らせバーの表示位置イメージ

【表示内容の設定】

さらに表示内容について次のような設定項目が用意されています。

SWELL 表示内容の設定
SWELL 表示内容の設定
お知らせバーの文字の大きさ

大中小の3サイズを選択

表示タイプ
テキスト位置固定(バー全体がリンク)

お知らせバー全体がリンクになります。テキストに動きはありません。

テキスト位置固定(ボタンを設置)

テキストの横にリンクボタンを設置することができます。
テキストに動きはありません。

SWELL テキスト位置固定(ボタンを設置)
SWELL ボタンありの表示イメージ
テキストを横に流す

テキストが画面右から左へ流れていくような表示になります。
お知らせバー全体がリンクになります。

お知らせ内容

入力したテキストがお知らせバーに表示されます。

リンク先URL

お知らせバーのリンク先を指定できます。

ボタンテキスト

表示タイプで「テキスト位置固定(ボタンを設置)」を選択した場合のみ出現します。

【背景効果】

SWELLではお知らせバーの背景効果を設定できます。

SWELL 背景効果の設定
SWELL 背景効果の設定

設定できる背景効果はグラデーションと斜めストライプに2種類です。

SWELL 背景効果の設定
おしゃれなお知らせバーが簡単に設定できます

お知らせバーの背景色は次で説明するカラー設定で任意の色に変更できます。
簡単に美しいデザインのお知らせバーを作ることができるので楽しいです!

【カラー設定】

お知らせバー設定項目の一番下で色に関する設定をすることができます。

SWELL カラー設定
グラデーションの追加背景色はここで設定できます
各カラーの役割
  • お知らせバー文字色
  • ボタン背景色
    • 表示タイプで「テキスト位置固定(ボタンを設置)」を選択した場合のみ出現
  • お知らせバー背景色
  • グラデーション用の追加背景色
    • 背景効果で「グラデーション」を選択した場合のみ出現

THE THORのお知らせバー

設定場所

THE THORのお知らせバーに関する設定は、「共通エリア設定[THE]」→「ヘッダーボトムエリア[検索窓・お知らせ]」で行います。

THE THORではお知らせバーという呼称はありませんが、わかりやすさ優先でSWELLと統一して表記しています。

THE THOR ヘッダーボトムエリア設定
THE THOR お知らせバーの表示設定場所

設定できること

THE THORのお知らせバーの表示設定は次の4項目です。

THE THOR ヘッダーお知らせの表示設定
ヘッダーお知らせの表示設定でお知らせバーの設定ができる
ヘッダーお知らせを表示するか選択

「表示」を選択するとグローバルメニューの下にお知らせバーが表示されます。

THE THOR お知らせバーの表示位置イメージ
THE THORではグローバルメニューの下のみ表示設定できる
お知らせとして表示する文章を入力

入力したテキストがお知らせバーに表示されます。

リンク先URLを入力

 お知らせバーのリンク先を指定できます。

お知らせバーに関するSWELLとTHE THORの違い

お知らせバーについてSWELLとTHE THORで比べてみると、できることに随分差があることが分かりました。

差分機能は次に列記した通りです。

SWELLとTHE THORの違い

(1)SWELLではお知らせバーの表示場所を選ぶことができる

まあこの機能はあってもなくてもそれほど困らないかと。

(2)SWELLではではお知らせバーに表示する文字の大きさを調整できる

(1)に同じでなくても困らないかと。

フォントサイズを変更したい場面は少ないと思います。

(3)THE THORでは表示タイプがテキストを横に流すパターンしかない

ここはちょっと残念。

動きがある表示が好きでない人もいるかと思います。

(4)SWELLではお知らせバーに背景効果をつけることができる

SWELLではお知らせバーにグラデーションやストライプの背景効果をつけることができます。

SWELLの背景効果の美しさを知ってしまうと、背景色しか設定できないTHE THORに物足りなさを感じてしまいました。

(5)THE THORでは文字色の変更ができない

文字色の変更ができないので、背景色の選択肢が狭まります。
追加CSSで変更できるかと思いますが、この機能は欲しかった。

THE THOR 視認性の悪いお知らせバーの設定イメージ
白文字のみのため背景色次第で視認性が悪くなります

SWELLとTHE THOR 両方に対しての要望

お知らせバーはページによっては表示したくない場面があると思います。

しかしながらSWELLとTHE THORともに特定のページで非表示にするという機能はないようです。
(あるよ!って人いたらご教示ください!)

個人的にはすべてのページで表示する、しないというほうが運用面で楽なので構わないですし、実装されても多分使わないかと思いますが、人によっては欲しい機能だと思うのでこちらで記載させていただきました。

まとめ

SWELLの方が機能が充実!使って楽しい!

お知らせバーの設定はTHE THORよりもSWELLの方が充実しています。

背景効果でグラデーション付けるところとかいじってて楽しいです!

THE THORはテキストの文字色は変更できるようにして欲しい

THE THORはテキストの文字色が変更できないところがかなり残念です。

白文字だけだと使える背景色の選択肢が狭まります。

サイトのメインカラーによっては背景色に薄い色を使いたい場合もあるかと思いますので白文字・黒文字選択できるようにしてもらいたいです。

楽しいことはいいことだ!

SWELLはテーマカスタマイザーさわっているだけで楽しいです。

今回紹介した背景効果のように、マウスでポチポチするだけで、きれいなデザインが出来上がるので、サイトデザインするのが楽しくなります。

普通ならワードプレスのサイトデザインって結構退屈な作業なんですよ。

サイトデザインするだけで楽しいテーマってなかなか貴重です。

「楽しい」って体験はきっとブログを続ける活力になります。
SWELLは間違いなく「楽しい」テーマです。

この記事で興味持っていただけたら下のリンクから公式サイトも覗いてみていただけますか?

ブログ活動のやる気につながります。

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

SWELLとTHE THOR お知らせバーの設定の違い

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

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

この記事を書いた人

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

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

この記事の目次