SWELLのヘッダー設定方法｜おすすめ設定とカスタマイズ手順を解説

SWELLのヘッダーは、サイトの第一印象や使いやすさを左右する重要なエリアです。

SWELLのヘッダー設定でできること

SWELLのヘッダー設定では、サイト上部に表示されるヘッダーエリアを自由にカスタマイズできます。

主に設定できる項目は以下のとおりです。

• サイトロゴ
• ヘッダーレイアウト
• ヘッダー背景色
• グローバルナビゲーション
• 検索ボタン
• 追従ヘッダー
• スマホヘッダー

これらを適切に設定することで、読者が目的のページへ移動しやすくなります。

SWELLのヘッダー設定画面を開く方法

まずは、WordPress管理画面からヘッダー設定画面を開きます。

Menu『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。

カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。

「カスタマイザー」画面で以下の手順で進み、詳細を設定します。

この記事では、「ヘッダー」の詳細設定項目について紹介していきます。（赤破線部）

ヘッダーの詳細設定項目

• カスタマイザー起動後の手順になります。

ヘッダーでは、ヘッダーエリア内の各要素の色や背景画像を自由に設定できます。

ウェブサイトの最上部に配置されるヘッダーは、訪問者の第一印象を左右する重要な部分です。視認性やデザイン性を高めることで、サイト全体の印象を大きく向上させることができます。SWELLでは、細かなカスタマイズが可能なため、自分のサイトに合った色や背景を設定しましょう。

この章では、「ヘッダー」の詳細設定項目を順番にご紹介していきます。

カスタマイザーの設定を変更したら必ず、『公開』！その他の設定を変更したら必ず、設定ページの『変更を保存』！…を忘れずにクリックしましょう。

それではご覧ください。

❶ カラー設定

カラー設定では、ヘッダーの背景色と文字色を設定できます。

『カラー設定』の設定画面と設定項目は以下の通りです。

カラー設定のサンプル画像

ヘッダーの背景色と文字色の反映を確認できるサンプルです。

❷ ヘッダーロゴの設定

ヘッダーロゴの設定では、ロゴ画像の設置や画像サイズ（ヘッダーの高さ）を設定できます。

『ヘッダーロゴの設定』の設定画面と設定項目は以下の通りです。

ヘッダーロゴの設定のサンプル画像

ヘッダーロゴの画像を設定していないサンプルです。

ヘッダーロゴの画像を設定をしたサンプルです。

PC追従ヘッダーを表示したサンプルです。（ヘッダーと同様に反映されます）

スマホ表示：画像サイズ(sp): 40~80px　※ 表示イメージは同様のため、省略します。

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

レイアウト・デザイン設定では、PCとSP で別々にレイアウトとデザインを設定できます。

『レイアウト・デザイン設定』の設定画面と設定項目は以下の通りです。

ヘッダーのレイアウト(PC)のサンプル画像

『ヘッダーナビをロゴの横に（右寄せ）』に設定したサンプルです。

『ヘッダーナビをロゴの横に（左寄せ）』に設定したサンプルです。

『ヘッダーナビを下に』に設定したサンプルです。

『ヘッダーナビを上に』に設定したサンプルです。

ヘッダーのレイアウト(SP)のサンプル画像

『ロゴ:中央 / メニュー：左』に設定したサンプルです。

『ロゴ:中央 / メニュー：右』に設定したサンプルです。

『ロゴ:左 / メニュー：右』に設定したサンプルです。

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

トップページでの特別設定では、ヘッダーの背景を透明に設定できます。さらに、文字色を白か黒か選択することができます。また、ヘッダーロゴの画像を設定した場合、トップページ専用のロゴ画像を設定することもできます。

『トップページでの特別設定』の設定画面と設定項目は以下の通りです。

トップページでの特別設定のサンプル画像

背景を透明にして、文字色を白にし、ロゴ画像に白色の画像を設定したサンプルです。

❺ ヘッダーの追従設定

ヘッダーの追従設定では、ヘッダーの追従と背景の不透明度を設定できます。

『ヘッダーの追従設定』の設定画面と設定項目は以下の通りです。

❻ ヘッダーバー設定

ヘッダーバー設定は、サイトの各ページの最上部に表示される狭いバーで、通常はメインカラーで表示されます。ここの設定では、背景色や文字色を設定することができます。

『ヘッダーバー設定』の設定画面と設定項目は以下の通りです。

ヘッダーバー設定のサンプル画像

ヘッダーバーの設定の反映を確認できるサンプルです。

❼ キャッチフレーズ設定

キャッチフレーズ設定は、ヘッダーバーに表示されます。また、キャッチフレーズとサイトのタイトルを横並びで表示することもできます。

『キャッチフレーズ設定』の設定画面と設定項目は以下の通りです。

キャッチフレーズ設定のサンプル画像

『ヘッダーバーに表示』に設定したサンプルです。

『ヘッダーロゴの近くに表示』に設定したサンプルです。

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

ヘッダーメニュー（グローバルナビ）設定では、ホバー時のデザインやメニュー・サブメニュー（ドロップダウンメニュー）の背景色を設定できます。

『ヘッダーメニュー（グローバルナビ）設定』の設定画面と設定項目は以下の通りです。

ヘッダーメニュー（グローバルナビ）設定のサンプル画像

ヘッダーメニュー（グローバルナビ）設定は、以下のエリアに反映されます。

• PCではヘッダーのレイアウトが縦並びの時に有効です。

ヘッダーメニューの背景色は、以下のエリアに反映されます。

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

ヘッダーメニュー（SP）設定では、スマホ用ヘッダー（メニュー位置）の表示・非表示設定をできます。

『ヘッダーメニュー（SP）設定』の設定画面と設定項目は以下の通りです。

ヘッダーメニュー（SP）設定のサンプル画像

ヘッダーメニュー（SP）設定は、以下のエリアに反映されます。

❿ 検索ボタン設定

検索ボタン設定では、検索ボタン（アイコン）をPCとSPで別々に表示設定できます。
（検索アイコンをクリックすると検索フォームが出てくるボタンです）

『検索ボタン設定』の設定画面と設定項目は以下の通りです。

検索ボタン設定：検索ボタンの表示位置（PC）のサンプル画像

『ヘッダーバー内のアイコンリストに表示』で設定したサンプルです。

『ヘッダーメニューに表示』で設定したサンプルです。

検索ボタン設定：検索ボタンの表示位置（SP）のサンプル画像

『カスタムボタンにセット』で設定したサンプルです。

⓫ メニューボタン設定

メニューボタン設定では、スマホで表示されるメニューをメニューを表示させるボタン（アイコン）をカスタマイズできます。

『メニューボタン設定』の設定画面と設定項目は以下の通りです。

メニューボタン設定のサンプル画像

メニューボタン設定の反映を確認できるサンプルです。

⓬ カスタムボタン設定

カスタムボタン設定では、デフォルトで「検索ボタン」が設定されていますが、任意の「アイコン・背景色・テキスト・リンク先URL」を設定して、ボタンのカスタマイズができます。

• カスタムボタンはスマホのみ有効です。

『カスタムボタン設定』の設定画面と設定項目は以下の通りです。

カスタムボタン設定のサンプル画像

カスタムボタン設定の反映を確認できるサンプルです。

初心者におすすめのヘッダー設定例

設定に迷う場合は以下の構成がおすすめです。

項目	おすすめ設定
ロゴ	設定する
背景色	白
レイアウト	ロゴ左・メニュー右
検索ボタン	表示
追従ヘッダー	ON
スマホヘッダー	シンプル構成

ヘッダー設定が完了したら、以下の設定もあわせて見直しましょう。

ヘッダー・フッター・サイドバーのデザインを統一すると、サイト全体に統一感が生まれ、より見やすく使いやすいサイトになります。

SWELLのヘッダー設定に関するよくある質問

SWELLのヘッダーは固定表示できますか？

はい。追従ヘッダーを有効化すると固定表示できます。

ロゴ画像の推奨サイズはありますか？

横幅300〜600px程度のPNG画像がおすすめです。

スマホとPCで別の表示にできますか？

はい。SWELLではスマホ向け設定も用意されています。

追従ヘッダーは有効にした方がいいですか？

基本的には有効化がおすすめです。読者がメニューへアクセスしやすくなります。

CSSなしでもカスタマイズできますか？

はい。SWELLの標準機能だけで多くの設定が可能です。

まとめ！SWELL カスタマイザー完全ガイド｜ヘッダー設定のポイントと使い方を解説

SWELLのヘッダー設定を活用すると、サイトの見た目や使いやすさを大きく改善できます。

まずは以下の項目から設定してみましょう。

• サイトロゴを設定する
• ヘッダーレイアウトを整える
• 追従ヘッダーを有効化する
• 検索ボタンを表示する

ヘッダーは読者が最初に目にする重要なエリアです。見やすく整理されたヘッダーを作り、使いやすいブログを目指しましょう。