【SWELL】初心者にも分かりやすく解説！テーマカスタマイザーの使い方【ヘッダー】編

この記事では有料WordPressテーマ「SWELL」での「テーマカスタマイザー」の使い方を初心者にもわかりやすく詳しく解説します。SWELLでは設定の多くをテーマカスタマイザーで行いますが今回は「ヘッダー」を中心に解説します。

【SWELL】テーマカスタマイザー「ヘッダー」でできること

SWELLのテーマカスタマイザーでは、リアルタイムで設定変更が反映されるので変更箇所が分かりやすく非常に便利な機能です。「ヘッダー」へはWordPressの、「外観」>「カスタマイズ」>「ヘッダー」をクリックします。

「ヘッダー」では、表示するロゴや背景色に加え、メニューレイアウトの設定が可能です。ヘッダー内容はサイト上常に表示される部分になるので、見やすいデザインを心がけると離脱率の低減につながります。

■カラー設定

「カラー設定」では、ヘッダー部分の背景色や文字色の設定が可能です。デフォルトでは「ヘッダー背景色」には白（#fdfdfd）が、「ヘッダー文字色」には黒（#333）が設定されています。

テーマカスタマイザーのヘッダー > ■ヘッダーメニュー（グローバルナビ）設定 > ヘッダーメニューの背景色 で、「色を指定する」を選択した場合、ヘッダー文字色は白色に設定されます。

■ヘッダーロゴの設定

「ヘッダーロゴの設定」ではサイトアイコンを設定できます。

設定する画像サイズは、「画像サイズ（PC）」「画像サイズ（PC追従ヘッダー内）」「画像サイズ（sp）」それぞれで設定可能です。

■レイアウト・デザイン設定

「レイアウト・デザイン設定」では、ロゴマークとヘッダーナビ（ヘッダーメニュー）の位置やヘッダーとヘッダー境界線のスタイルを設定できます。

「ヘッダーのレイアウト（PC）」ではPCでサイトを表示した際のヘッダーレイアウトを設定できます。デフォルトでは「ヘッダーナビをロゴの横に（右寄せ）」が設定されています。

「ヘッダーのレイアウト（PC）」で「ヘッダーナビをロゴの横に（右寄せ）」を選択した場合

「ヘッダーのレイアウト（PC）」で「ヘッダーナビをロゴの横に（左寄せ）」を選択した場合

「ヘッダーのレイアウト（PC）」で「ヘッダーナビの下に」を選択した場合

「ヘッダーのレイアウト（PC）」で「ヘッダーナビの上に」を選択した場合

「ヘッダーのレイアウト（SP）」ではスマホやタブレットでサイトを表示した際のヘッダーレイアウトを設定できます。デフォルトでは「ロゴ：中央 / メニュー：左」が設定されています。

「ヘッダーのレイアウト（SP）」で「ロゴ：中央 / メニュー：右」を選択した場合

「ヘッダーのレイアウト（SP）」で「ロゴ：左 / メニュー：右」を選択した場合

「ヘッダーのレイアウト（SP）」で「ロゴ：左 / メニュー：左」を選択した場合

「ヘッダー境界線」ではヘッダーとメイン画面の境界線のスタイルを変更できます。デフォルトでは「影」が設定されています。

「ヘッダー境界線」で「なし」を選択した場合

「ヘッダー境界線」で「線」を選択した場合

「ヘッダー境界線」で「影」を選択した場合

■トップページでの特別設定

ここでは、トップページのヘッダー部分を透明にするかを設定できます。SWELLの公式ページのようなトップページが簡単に作成できます。なお、設定はPC表示の場合のみ有効となりますので注意してください。

「ヘッダーの背景を透明にするかどうか」で「しない」を選択した場合

「ヘッダーの背景を透明にするかどうか」で「する（文字色：白）」を選択した場合

「ヘッダーの背景を透明にするかどうか」で「する（文字色：黒）」を選択した場合

お知らせバーを表示してる場合、ヘッダーの背景を透明にすると強制的に非表示となります。（各記事ページのお知らせバーは表示されます。）トップページにお知らせバーを表示させたい場合は、「しない」を選択してください。

「トップページでの特別設定」を行う場合のレイアウト方向について

「トップページでの特別設定」を行う場合、PCのヘッダーレイアウトは横並びにするように注意書きがされています。仮に「外観」>「カスタマイズ」>「ヘッダー」の「■レイアウト・デザイン設定」より「ヘッダーのレイアウト（PC）」を「ヘッダーナビの下に」または「ヘッダーナビの上に」と選択した場合、以下のような表示となります。

ヘッダーの背景を透明とすることはできるようですが、公式推奨ではないため将来仕様変更で設定ができない可能性もあることを理解した上で自己責任で行ってください。

■ヘッダーの追従設定

「ヘッダーの追従設定」では縦長のページでスクロールした際に、ヘッダーが追従して表示させるかの設定が行えます。デフォルトではPC、スマホどちらも「ヘッダーを追従させる」にチェックが入っています。

「ヘッダーを追従させる（PC）」にチェックを入れた場合

「ヘッダーを追従させる（PC）」のチェックを外した場合

「ヘッダーを追従させる（SP）」にチェックを入れた場合

「ヘッダーを追従させる（SP）」のチェックを外した場合

「追従ヘッダー（PC）の背景不透明度」では、追従ヘッダーの背景色を透過するかの設定が行えます。デフォルトでは「1」（透過しない）が設定されています。設定値は０から１まで小数点第一位までで設定が可能です。

■ヘッダーバー設定

「ヘッダーバー設定」では、ヘッダーバーの背景色やSNSアイコンの表示、設定したキャッチフレーズの文字色の設定が行えます。ヘッダーバーはPC表示中のみに表示され、スマホでサイトを閲覧時には表示されません。

「ヘッダーバー背景色」ではヘッダーバーの背景色を設定できます。デフォルトでは未選択となっています。未選択の場合背景色は、テーマカスタマイザーのサイト全体設定 > 基本カラー > メインカラーに設定した背景色が設定されます。

「ヘッダーバー背景色」未設定の場合

「ヘッダーバー背景色」を設定した場合

「ヘッダーバー文字色」ではヘッダーバーに表示したキャッチフレーズやSNSアイコンの文字色を設定できます。デフォルトでは「#fff」(白)が設定されています。

「表示設定」では、SNSアイコンの表示有無やコンテンツが空の場合のヘッダーバー表示有無を設定できます。デフォルトでは「SNSアイコンリストを表示する」にのみチェックが入っています。

「SNSアイコンリストを表示する」にチェックを入れた場合

表示されるSNSアイコンリストは、テーマカスタマイザーのSNS情報 > SNSリンク設定に設定されたSNSリンクがアイコンとして表示されます。

表示可能なSNSアイコンは以下の通りです。

「コンテンツが空でもボーダーとして表示する」にチェックを入れるとヘッダーバーに表示するコンテンツが無い場合でも、ボーダーとしてヘッダーバーを表示することができます。なお、「ヘッダーバーに表示するコンテンツが無い」設定は以下の2つをどちらも満たす設定がされている状態をいいます。

「ヘッダーバーに表示するコンテンツが無い」設定

設定状態	設定箇所（テーマカスタマイザー）
SNSアイコンリストを表示しない	ヘッダー > ■ヘッダーバー設定 > 表示設定 の「SNSアイコンリストを表示する」チェックを外す
キャッチフレーズを表示しない	ヘッダー > ■キャッチフレーズ設定 > キャッチフレーズの表示位置 で「ヘッダーバーに表示」以外を設定。

ヘッダーバーを表示させたくない場合

ヘッダーバーを表示させたくない場合、以下3点を満たす必要があります。

「ヘッダーバー」を表示させたくない場合、必要な設定３点

設定状態	設定箇所（テーマカスタマイザー）
SNSアイコンリストを表示しない	ヘッダー > ■ヘッダーバー設定 > 表示設定 の「SNSアイコンリストを表示する」チェックを外す
キャッチフレーズを表示しない	ヘッダー > ■キャッチフレーズ設定 > キャッチフレーズの表示位置 で「ヘッダーバーに表示」以外を設定。
コンテンツが空の場合ヘッダーバーを表示させない	ヘッダー > ■ヘッダーバー設定 > 表示設定 の「コンテンツが空でもボーダーとして表示する」チェックを外す

■キャッチフレーズ設定

「キャッチフレーズ設定」では設定したキャッチフレーズの表示位置やキャッチフレーズにサイトのタイトルを追加するかを設定できます。

「キャッチフレーズの表示位置」ではテーマカスタマイザーのWordPress設定 > サイト基本情報 > キャッチフレーズ で設定したキャッチフレーズの表示位置を設定できます。デフォルトでは、「ヘッダーバーに表示」が設定されています。

「キャッチフレーズの表示位置」を「表示しない」に設定した場合

「キャッチフレーズの表示位置」を「ヘッダーバーに表示」に設定した場合

「キャッチフレーズの表示位置」を「ヘッダーロゴの近くに表示」に設定した場合

■ヘッダーメニュー（グローバルナビ）設定

ここではヘッダーメニュー内の項目にマウスを合わせた時の動きやデザインをカスタマイズできます。細かく設定可能なのでサイトにあったデザインを見つけてください。

「マウスホバーエフェクト」では、グローバルナビに設定した項目にカーソルを合わせた際にの動作を設定できます。デフォルトでは「ラインの出現（中央から）」が設定されています。この設定はPCでサイトを閲覧した際にのみ有効な設定となります。

「マウスホバーエフェクト」に「ラインの出現（中央から）」を設定した場合

「マウスホバーエフェクト」に「ラインの出現（左から）」を設定した場合

「マウスホバーエフェクト」に「ブロックの出現」を設定した場合

「マウスホバーエフェクト」に「背景グレー」を設定した場合

「マウスホバーエフェクト」に「背景明るく」を設定した場合

「マウスホバーエフェクト」に「ラインの出現（中央から）」「ラインの出現（左から）」「ブロックの出現」のいずれかを選択した場合、「ホバー時に出てくるラインの色」設定項目が選択できます。デフォルトでは「メインカラー」が設定されています。

「ホバー時に出てくるラインの色」に「メインカラー」を設定した場合

「ホバー時に出てくるラインの色」に「テキストカラー」を設定した場合

図39

「ヘッダーメニューの背景色」ではグローバルナビの背景色を設定できます。デフォルトでは「背景色は設定しない」が設定されています。この設定は、テーマカスタマイザーのヘッダー > ■レイアウト・デザイン設定 > ヘッダーのレイアウト（PC）で、「ヘッダーナビを下に」「ヘッダーナビを上に」のいずれかを選択した際に有効な設定になります。

「ヘッダーメニューの背景色」に「背景色は設定しない」を設定した場合

「ヘッダーメニューの背景色」に「色を指定する」を設定した場合

「サブメニューの背景色」ではグローバルナビに設定したサブメニューの背景色を設定できます。デフォルトでは「ホワイト」が設定されています。

「サブメニューの背景色」に「ホワイト」を設定した場合

「サブメニューの背景色」に「メインカラー」を設定した場合

■ヘッダーメニュー（SP）設定

「ヘッダーメニュー（SP）設定」ではスマホ表示の時にヘッダー部分をループ表示させるかどうかを設定できます。デフォルトでは「ヘッダーメニューをループさせる」にはチェックが入っていません。
なお、この設定はあらかじめWordPressの、「外観」>「メニュー」>「メニュー設定」から「スマホ用ヘッダー」にチェックを入れておく必要があります。

スマホ表示時のループ設定

「ヘッダーメニューをループさせる」のチェックを外した場合

「ヘッダーメニューをループさせる」にチェックを入れた場合

■検索ボタン設定

「検索ボタン設定」では、検索ボタンの表示位置をPCで表示した場合、スマホで表示した場合それぞれで設定することができます。

「検索ボタンの表示位置（PC）」ではPCでサイトを閲覧した際の検索ボタンの表示位置を設定することができます。デフォルトでは「ヘッダーバー内のアイコンリストに表示」が設定されています。

「検索ボタンの表示位置（PC）」に「表示しない」を設定した場合

ヘッダーバー、ヘッダーメニュー共に検索ボタンが表示されません。

「検索ボタンの表示位置（PC）」に「ヘッダーバー内のアイコンリストに表示」を設定した場合

「検索ボタンの表示位置（PC）」に「ヘッダーメニューに表示」を設定した場合

「検索ボタンの表示位置（SP）」ではスマホでサイトを閲覧した際の検索ボタンの表示位置を設定することができます。デフォルトでは「検索ボタンの表示位置（PC）」では「カスタムボタンにセット」が設定されています。

「検索ボタンの表示位置（SP）」に「表示しない」を設定した場合

「検索ボタンの表示位置（SP）」に「カスタムボタンにセット」を設定した場合

■メニューボタン設定

「メニューボタン設定」ではスマホでサイトを表示した際のメニューアイコンのカスタマイズが可能です。

「アイコン下に表示するテキスト」はメニューアイコンの下に表示するテキストを設定できます。

「メニューボタン背景色」ではメニューアイコンの背景色を設定できます。デフォルトでは未設定（背景色なし）の状態となります。

■カスタムボタン設定

「カスタムボタン設定」ではスマホでサイトを表示したした場合に表示できるカスタムボタンを変更できます。SNSや特定のランディングページに遷移させることも可能です。

SWELLで利用できるアイコンクラスが100種類以上用意されています。デフォルトでは「icon-search」（検索ボタン）が設定されています。

今回の例ではSWLLのロゴを表示させていますが、その他にも数多くのアイコンクラスが用意されているので用途にあったアイコンを選択してください。

「アイコン下に表示するテキスト」では、アイコンの下にコメントを表示できます。

デフォルトでは「未設定」（テキスト表示なし）が設定されています。

「カスタムボタン背景色」ではカスタムボタンの背景色を設定できます。デフォルトでは「未設定」（背景色無し）が設定されています。

「リンク先URL」では設定したカスタムボタンの遷移先を設定できます。デフォルトでは何も設定されていない状態です。スマホでサイトを閲覧する際の注意点として、テーマカスタマイザーの、ヘッダー > 検索ボタンの設定 > 検索ボタンの表示設定（SP）に、「カスタムボタンにセット」を選択している場合、ここで設定したリンク先URLよりも検索機能が優先されます。

まとめ

SWELLテーマカスタマイザーの「ヘッダー」について解説しました。
サイトのヘッダーは各記事ページ上にも表示され、一番目に留まりやすい部分にもなっています。

各設定を行うと、どのような表示になるのかできる限り詳しく記載しました。
今回の記事がサイト運営の手助けになれば幸いです。