【SWELL THE THOR 比較】サイト全体の基本カラーの設定方法の違い

SWELLとTHE THOR サイト全体の基本カラーの設定方法の違い

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

今回は、「サイト全体の基本カラーの設定方法」について違いを見ていきます。

なお、前回投稿した通り、当ブログではSWELLをおすすめしています。

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

この記事の目次

ベースカラーの設定

ブログのベースカラーを決める設定方法ですが、SWELLとTHE THORで特筆する違いはありません。

SWELLの設定方法

ベースカラーの設定場所は「外観」→「カスタマイズ」→「サイト全体」→「基本カラー」です。

SWELLでは4つのカラーでベースカラーを設定します。

SWELL ベースカラー設定方法
SWELL ベースカラー設定方法

THE THORの設定方法

ベースカラーの設定場所は「外観」→「カスタマイズ」→「基本設定[THE]」→「基本スタイル設定」です。

THE THORの場合は3つのカラー設定を行います。

THE THOR ベースカラー設定方法
THE THOR ベースカラー設定方法

THE THORではテキストカラーを変更する場合は追加CSSの設定が必要となります。
とはいえデフォルトのテキストカラーは黒なので変更できなくても問題ないかと思います。

ヘッダーの色

ヘッダーカラーの設定方法について比較してみます。

この部分の設定方法でもSWELLとTHE THORで特筆する違いはありません。

両者ともヘッダーの背景色と文字色の設定をテーマカスタマイザーから行うことができます。

SWELLの設定方法

ヘッダーカラーの設定場所は「外観」→「カスタマイズ」→「ヘッダー」です。

SWELL ヘッダーカラー設定方法
SWELL ヘッダーカラー設定方法

THE THORの設定方法

ヘッダーカラーの設定場所は「外観」→「カスタマイズ」→「共通エリア設定[THE]」→「ヘッダーエリア設定」です。

THE THOR ヘッダーカラー設定方法
THE THOR ヘッダーカラー設定方法

フッターの色

フッターカラーの設定方法についてはSWELLとTHE THOR
で違いがあります。

SWELLの場合、カスタマイザー上で気軽に変更できるのに対して、THE THORの場合は追加CSSで記述する必要があります。

SWELLの設定方法

フッターカラーの設定場所は「外観」→「カスタマイズ」→「フッター」です。

フッターのカラー設定エリアは次の画像の赤枠で囲ったフッターエリアと青枠で囲ったフッターウィジェットエリアに分かれています。

SWELL フッターカラー設定方法
SWELL フッターカラー設定方法

それぞれのエリアで背景色と文字色をカラーピッカーで設定できるようになっています。
好みの色にカスタマイズしましょう。

THE THORの設定方法

THE THORにはカスタマイザー内にフッターカラーを調整する機能が用意されていませんが、「追加CSS」機能を使うことでフッターカラーを変更することができます。

「追加CSS」の設定場所は「外観」→「カスタマイズ」→「追加CSS」です。

THE THOR フッターカラー設定方法
THE THOR 追加CSSでフッターカラー変更

参考までにTHE THORのフッターCSSカスタマイズ例を記載しました。
下記のCSSを追加CSSのコード欄に入力するとフッターカラーを変更することができます。

/*フッターのカスタマイズ 背景と文字色*/
.l-footer .bottomFooter {
background-color: #f9f9f9;
}
.bottomFooter__copyright, .bottomFooter__producer, .bottomFooter__link {
color: #999 ;
}

スマホメニューの色

スマホのハンバーガーメニューのカラー変更の場合、THE THORよりもSWELLのほうが簡単にカスタマイズすることができます。

SWELLの設定方法

SWELLではスマホメニューエリアの次の要素を簡単に調整することができます。

カラー設定できる要素
  • 文字色
  • 背景色
  • 背景の透明度
  • オーバーレイカラー
  • オーバーレイカラーの透明度

各要素のが適用される場所

SWELL スマホメニューカラー設定方法
SWELL スマホメニューカラーの適用場所

THE THORの設定方法

THE THORではスマホメニューエリアにあるウィジットの見出しの色は変更できますが、それ以外のカラー変更はフッターの時と同じように、追加CSSで対応する必要があります。

THE THOR メニューパネル ウィジットカラー設定方法
THE THOR メニューパネル ウィジットカラー設定方法

まとめ サイトカラーの設定ひとつ取っても結構違う

今回はサイト全体の基本カラーの設定というかなり基本的な部分での比較でしたが、思いのほか設定機能に違いがあることが分かりました。

THE THORはなぜフッターカラーが調整できないのか?

いや追加CSS機能使えばでできるのですが、そういうできるではなく。

フッターカラーはサイトカラーに合わせて調整必須だと思うのですが、THE THORではフッターカラーの変更機能が公式には提供されていないのがすごく疑問です。

追加CSS使えば変更できるというのは理解しつつも、そもそも追加CSS機能を使わなく済むように、フッターカラーの変更機能は公式に提供して欲しいところです。

SWELLの方がサイトカラーの設定が簡単だった

SWELLは簡単にきれいなサイトに仕上がるのに対して、THE THORは細部の設定で実は手間がかかるというのが率直な感想です。

今後詳しく紹介していく予定ですが、最新のブロックエディター『Gutenberg』に完全対応しているSWELLでは、サイトカラーに限らず、ほとんどのデザインがマウスでクリックしていくだけで設定することができます。

SWELLでブログを書くとデザインするのが本当に楽になります。

簡単に・楽しく・素早く書ける

まさにSWELLのことだと思います。

SWELLはブログを楽しく続けたいという方にピッタリのワードプレステーマです。

もしSWELLに興味持っていただけたら公式サイトも覗いてみてください。
(きっとワクワクすると思います!)

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

SWELLとTHE THOR サイト全体の基本カラーの設定方法の違い

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

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

この記事を書いた人

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

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

この記事の目次