THORの違いについて、設定方法一つひとつにフォーカスして解説します。今回は、「ヘッダーのデザイン・レイアウト設定」について違いを見ていきます。過去の投稿でお伝えした通り、当ブログではSWELLをおすすめしています。THORの違いについてまとめた記事はたくさんあります。THORで基本設定に大きな違いはありあません。詳細は別記事で紹介していますので、そちらをご覧ください。THORの違いについて、設定方法一つひとつにフォーカスして解説します。今回は、「サイト全体の基本カラーの設定方法」について違いを見...【SWELLのみ】ヘッダーの背景の透明化SWELLではトップページのみヘッダー(グローバルメニューともいう)の背景を透明にすることができます。ヘッダー背景を透明化することで、メインビジュアルをより際立たせることができます!ヘッダーエリアを透明化したイメージ透明化するときはヘッダーの文字色は黒と白の2色を指定できます。透明化する場合に表示するロゴ画像を別途指定できるので、トップページは背景透明用のロゴ画像、その他のページはオリジナルのロゴ画像といった具合に表示するロゴ画像を使い分けることができます。ヘッダーロゴ画像の設定SWELLでの設定方法ヘッダーロゴ画像の設定は「外観」→「カスタマイズ」→「ヘッダー」で行います。「ヘッダー」メニュー内の「ヘッダーロゴ設定」でロゴ画像を設定します。・PC追従ヘッダー・スマホそれぞれでロゴ画像の高さを調節できます。THORでの設定方法ヘッダーロゴ画像の設定は「外観」→「カスタマイズ」→「基本設定[THE]」→「サイトロゴの設定」で行います。THORでもPCとスマホでロゴ画像の高さ調整が可能です。高さはあらかじめ指定された5種類から選びます。ロゴ画像の設定ヘッダーのレイアウト・デザイン設定SWELLでの設定方法ヘッダーのレイアウト・デザイン設定は「外観」→「カスタマイズ」→「ヘッダー」で行います。SWELLではロゴ画像とヘッダーメニューの並び方について、PC表示では4種類、スマホ表示で3種類のレイアウトが用意されています。タブレットの横表示ではPCのレイアウトで表示されます。THORでの設定方法ヘッダーレイアウトの設定は「外観」→「カスタマイズ」→「共通エリア設定[THE]」→「ヘッダーエリア設定」で行います。THORではPCとスマホで共通のヘッダーレイアウトが2種類用意されています。ヘッダーのレイアウト(スマホ)シンプル(default)ダイナミックまたヘッダーメニューの表示非表示をPCとスマホ別々に選択することも可能です。THORどちらも追従ヘッダーの設定が可能です。SWELLでの設定方法PCとスマホそれぞれで追従させるかどうか設定できます。ヘッダーの追従設定SWELLではPC表示に限って、追従ヘッダーの背景の透明度を設定することができます。赤枠で囲った部分で追従ヘッダー設定を行います。THORではエフェクト設定が用意されていないため、CSSのカスタマイズが必要です。SWELLでの設定方法SWELLではヘッダーメニューの各メニュー項目にマウスホバーした時のエフェクトを5種類から選ぶことができます。ヘッダーメニューのマウスホバーエフェクト設定エフェクトで出てくるラインの色・サブメニューの背景色を2色から選ぶことができます。THORではSWELLのようなマウスホバーエフェクトを設定する機能が用意されていません。デフォルトのエフェクトを変更したい場合は追加CSSなどでカスタマイズする必要があります。THORでは同等の機能が用意されていないため、CSSのカスタマイズが必要です。SWELLでの設定方法SWELLではスマホのヘッダーに「メニューボタン」と「カスタムボタン」の2つを設置することができます。スマホヘッダーに表示するボタンの設定メニューボタン(赤線)とカスタムボタン(青線)それぞれボタンの背景色とアイコン下に表示するテキストを設定することができます。カスタムボタンはデフォルトで検索ボタンになっています。好きなアイコン・リンク先に変更することが可能です。THORではメニューボタンの背景色とアイコンの下に表示するテキストをカスタマイズする機能はありません。追加CSSでカスタマイズすれば、好みのデザインにすることができるはずですが、ネットで調べても詳しい情報が見つからなかったので、ハードル高いと感じました。THORで「ヘッダーのデザイン・レイアウト設定」について比較しましたが、SWELLの方がテーマカスタマイザーでできることが多いです。SWELLのスマホメニューアイコンの下に任意のテキストを表示できるところとか、ほんと痒い所に手が届くように作られているなと感心しました。THORからSWELLに乗り換えて感じたことの一つは圧倒的に追加CSSを使うことがなくなったということです。SWELLは追加CSSを使わなくて済むようにテーマカスタマイザーが大変丁寧に作られていると思います!(SWELLさまさまです。)SWELLのこともっと知りたくなりましたか?SWELLにはここでは紹介しきれない素晴らしい機能がまだまだあるので、よかったら公式サイトも覗いてみてください。気軽に、楽しく記事を書こう。購入前に読んで欲しいSWELLの素敵な公式マニュアル【10選】2021年11月28日satou金融系Web広告担当ブログ未経験でいきなりワードプレスからはじめました!金融業界で働く一介のWeb広告担当者です。わかりやすい肩書はWebマーケターだけど、マーケティングって言えるほど大層な仕事でもない。ブログでは、Webマーケティングのことや生活を豊かにする情報をシェアしていきます。最近はワードプレステーマ『SWELL』にどっぷりハマってます。『SWELL』についてばかり書くことになりそう。