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

SWELL カスタマイザー完全ガイド！ヘッダー設定のポイントと使い方を初心者さん向けに解説します。

それではご覧ください。

カスタマイザーについて

 WordPressのカスタマイザー（Customizer）は、ユーザーがリアルタイムでウェブサイトの外観と設定をカスタマイズできるツールです。

テーマの変更や ウィジェットの追加、メニューの編集、サイトのタイトルやキャッチフレーズの設定などを視覚的に行うことができます。

カスタマイザーは、『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』で、アクセスします。

以下に主要な機能を簡単に説明します。

カスタマイザーは使いやすく、コーディングの知識がなくてもサイトを自由にカスタマイズできるため、初心者から上級者まで幅広く利用されています。

カスタマイザーの起動手順

カスタマイザーを起動する手順は次の通りです。

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

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

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

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

ヘッダー

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

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

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

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

それではご覧ください。

❶ カラー設定

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

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

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

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

❷ ヘッダーロゴの設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

❺ ヘッダーの追従設定

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

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

❻ ヘッダーバー設定

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

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

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

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

❼ キャッチフレーズ設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

❿ 検索ボタン設定

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

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

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

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

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

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

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

⓫ メニューボタン設定

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

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

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

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

⓬ カスタムボタン設定

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

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

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

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

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

  ヘッダーメニュー（グローバルナビ）の作り方については、以下の記事で詳しくご紹介しています。
あわせてご覧ください。

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

SWELLのカスタマイザーを使ったヘッダー設定のポイントと使い方をご紹介しました。ヘッダーはサイトの顔ともいえる重要な部分で、デザインや配置を工夫することで、より魅力的なサイトに仕上げることができます。

特にヘッダーの設定は早めに行うのがおすすめです。読者が最初に目にする場所だからこそ、インパクトのあるデザインにすることで、サイトの印象が強まり、PVアップにもつながります。

ぜひ今回の内容を参考に、自分のサイトに合ったヘッダーを作成してみてください！この記事がお役に立てれば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／