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

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

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

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

あわせて読みたい

【SWELL THE THOR 比較】当ブログで2つのワードプレステーマの比較記事を書く理由 【なぜSWELLとTHE THORの比較記事を書こうと思ったのか？】 SWELLとTHE THORの違いについてまとめた記事はたくさんあります。 内容のほとんどは価格、デザイン性、操作…

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

ベースカラーの設定

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

SWELLの設定方法

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

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

THE THORの設定方法

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

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

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

ヘッダーの色

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

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

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

SWELLの設定方法

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

THE THORの設定方法

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

フッターの色

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

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

SWELLの設定方法

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

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

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

THE THORの設定方法

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

「追加CSS」の設定場所は「外観」→「カスタマイズ」→「追加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ではスマホメニューエリアの次の要素を簡単に調整することができます。

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

THE THORの設定方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SWELL公式サイト