WordPressテーマ「SWELL」を使い始めて、ヘッダーバーの色や内容を変えたいけれど、どこから設定すればいいかわからない、という方は多いです。ヘッダーバーはサイトの第一印象を左右するエリアですが、SWELLのカスタマイザーを使えばコードなしでもある程度まで整えられます。
この記事では、SWELLのヘッダーバーに関する設定項目を整理します。背景色・文字色・キャッチフレーズ・SNSアイコンの表示設定から、キャッチフレーズの表示幅をCSSで広げる方法、ウィジェット「ヘッダー内部」を使ったボタン・告知設置まで、順番に説明します。
WordPressやSWELLを使い始めたばかりの方でも手順を追えるよう、操作の流れに沿って整理しています。自分のブログのヘッダーをもう少し整えたいと感じているときに、参考にしてみてください。
SWELLのヘッダーバーとは何か、どこにある
ヘッダーバーがどのエリアを指すのか、他のヘッダー要素と混同しやすい部分があります。SWELLのヘッダーまわりには複数のエリアがあり、ヘッダーバーはその中の一つです。設定に進む前に、どこを変えることになるのかを把握しておくとスムーズです。
ヘッダーバーが表示される場所
SWELLにおけるヘッダーバーとは、PC表示のときにページ最上段に表示される細長い帯状のエリアです。ロゴやグローバルナビゲーション（グローバルメニュー）よりも上に位置します。
PC表示のときだけ表示され、スマホ・タブレット（縦向き）では表示されないのが特徴です。訪問者がサイトを開いた瞬間に目に入るエリアですが、スマホからのアクセスには影響しません。
ヘッダーバーに表示できる内容
ヘッダーバーに表示できる情報は、次の4つです。
・キャッチフレーズ（「外観」→「カスタマイズ」→「WordPress設定」→「サイト基本情報」で設定）
・SNSアイコンリスト（各SNSのURLを「SNS情報」で入力すると自動表示）
・検索ボタン（表示位置の設定でヘッダーバー内に割り当て可能）
・コンテンツなしでも細いボーダー線として表示する設定
これらはすべて表示必須ではなく、必要なものだけオンにする形です。4項目すべてをオフにした状態でも、「コンテンツが空でもボーダーとして表示する」をオンにすると、細いラインとして残すこともできます。
ヘッダーバーとヘッダー本体の違い
「ヘッダー」と「ヘッダーバー」は別の設定エリアです。ヘッダー本体はロゴやグローバルナビが並ぶメインエリア、ヘッダーバーはその上に乗る帯状のエリアです。
カスタマイザーでも「ヘッダー」の設定画面の中に「ヘッダーバー設定」というセクションが独立して存在します。背景色・文字色などはそれぞれ個別に設定できるため、ヘッダー本体とヘッダーバーで別の色を使うことも、同じ色でまとめることも可能です。
SNSアイコンや検索ボタンをスマホでも見せたい場合は、固定フッターメニューや別エリアへの配置を検討するとよいでしょう。
- ヘッダーバーはPC表示時のみ、ページ最上段に表示される帯状エリア
- 表示できる内容はキャッチフレーズ・SNSアイコン・検索ボタンの3つ（ボーダーのみも可）
- ヘッダー本体とは別の設定エリアで、色や内容を個別に管理できる
- スマホには表示されないため、スマホ向けには別エリアで対応が必要
カスタマイザーで変更できる基本設定の手順
ヘッダーバーの色や表示内容はカスタマイザーから設定します。カスタマイザーはWordPressの管理画面から「外観」→「カスタマイズ」の順で開けます。設定の変更はリアルタイムでプレビューに反映されるため、確認しながら調整できます。
カスタマイザーの開き方とヘッダーバー設定への移動
WordPressの管理画面にログインし、左メニューの「外観」にカーソルを合わせると「カスタマイズ」が表示されます。クリックするとカスタマイザーが起動します。
カスタマイザーのメニューから「ヘッダー」を選択し、「ヘッダーのカスタマイズ中」の画面を下にスクロールすると「ヘッダーバー設定」のセクションが表示されます。設定を変更したあとは、必ず画面上部の「公開」ボタンをクリックしてください。公開ボタンを押すまでは変更が反映されません。
背景色・文字色の変更方法
「ヘッダーバー設定」には「ヘッダーバー背景色」と「ヘッダーバー文字色」の設定項目があります。それぞれ「色を選択」ボタンから変更できます。
背景色を設定しない場合は、サイト全体設定で設定したメインカラーがそのまま適用されます。SWELLのデフォルト状態では濃い青色が背景色・白色が文字色になっています。自分のサイトのイメージカラーに合わせて変更しておくとよいでしょう。
ヘッダーバー文字色を変更すると、キャッチフレーズの文字だけでなく、ヘッダーバー内に表示されるSNSアイコンリストの色にも反映されます。
SNSアイコンリストの表示設定
「SNSアイコンリストを表示する」のチェックボックスをオンにすると、ヘッダーバーの右側にSNSアイコンが表示されます。ただし、カスタマイザーの「SNS情報」でURLが入力されているSNSのみアイコンが表示される仕組みです。
SNSのURLが未入力の状態でチェックをオンにしても、アイコンは表示されません。先に「SNS情報」でX（旧Twitter）、Instagram、YouTubeなどのアカウントURLを入力しておく必要があります。
検索ボタンをヘッダーバーに表示する方法
カスタマイザーの「ヘッダーメニュー設定」にある「検索ボタンの表示位置（PC）」で、「ヘッダーバー内のアイコンリストに表示」を選ぶと、ヘッダーバーに検索ボタンが追加されます。
この設定を有効にするには、「ヘッダーバー設定」の「SNSアイコンリストを表示する」にチェックが入っている必要があります。チェックが入っていないと、検索ボタンが表示位置を変更しても反映されないため、あわせて確認しておくとよいでしょう。
| 設定項目 | 場所 | 内容 |
|---|---|---|
| ヘッダーバー背景色 | ヘッダー→ヘッダーバー設定 | 帯の背景色を変更。未設定時はメインカラーが適用 |
| ヘッダーバー文字色 | ヘッダー→ヘッダーバー設定 | キャッチフレーズとSNSアイコンの色に反映 |
| SNSアイコンリスト表示 | ヘッダー→ヘッダーバー設定 | オンにするとSNS情報で設定したアイコンが表示 |
| 検索ボタン表示位置 | ヘッダー→ヘッダーメニュー設定 | 「ヘッダーバー内のアイコンリストに表示」を選択 |
| ボーダー表示 | ヘッダー→ヘッダーバー設定 | 内容が空でも細い境界線として表示できる |
- カスタマイザーは「外観」→「カスタマイズ」から開く
- 変更後は「公開」ボタンを押すまで反映されない
- 背景色未設定の場合はメインカラーが自動適用される
- SNSアイコン表示には「SNS情報」へのURL入力が必要
- 検索ボタンをヘッダーバーに表示する場合はSNSアイコン表示のチェックも必要
キャッチフレーズの表示位置と幅の調整
キャッチフレーズをヘッダーバーに表示する場合、デフォルト設定では表示幅に制限があります。文字数が多いキャッチフレーズを使いたいときや、テキストが途中で切れてしまうときは、表示位置の設定と合わせてCSSで調整できます。
キャッチフレーズの表示位置を設定する
キャッチフレーズの表示位置は、カスタマイザーの「ヘッダー」→「キャッチフレーズ設定」から変更できます。「ヘッダーロゴの近くに表示」と「ヘッダーバー内に表示」の2パターンがあります。
ヘッダーバーにキャッチフレーズを表示したい場合は「ヘッダーバー内に表示」を選びます。ヘッダーバーのキャッチフレーズ表示は、ヘッダーのレイアウト（PC）が「ヘッダーナビを下に」のレイアウトと組み合わせると、見た目のバランスが取りやすいとされています。
デフォルトの表示幅と制限
SWELLのヘッダーバーに表示されるキャッチフレーズの表示幅は、デフォルトで50%に設定されています。全角ひらがなで49文字前後が表示できる幅です（50文字目前後から見切れる場合があります）。
サイト名と組み合わせて長めのキャッチフレーズを使いたい場合や、デザイン上の都合でより広い幅で表示したい場合は、追加CSSで調整できます。
CSSでキャッチフレーズの表示幅を広げる方法
ヘッダーバーのキャッチフレーズ表示幅を広げるには、カスタマイザーの「追加CSS」に以下のコードを貼り付けます。
追加CSSの場所：「外観」→「カスタマイズ」→「追加CSS」
貼り付けるコード：
.l-header__bar .c-catchphrase { width: 70%; }
「70%」の数値はお好みで変更できます。80%、90%など大きくするほど表示幅が広がります。ただし、キャッチフレーズ自体が非常に長い場合は幅を広げても切れることがあります。表示幅の調整と合わせてキャッチフレーズの文字数を見直すことも選択肢の一つです。
独自のカスタマイズを継続して使いたい場合は、追加CSSへの記述が安全です。
- キャッチフレーズの表示位置はカスタマイザーの「キャッチフレーズ設定」から選択
- デフォルトの表示幅は約50%（全角49文字前後）
- 追加CSSで width の値を変更することで幅を広げられる
- 追加CSSはテーマアップデートの影響を受けないため安全に使える
ヘッダー内部ウィジェットを使った応用設定
ヘッダーバーのカスタマイズには、カスタマイザー以外にもウィジェットを使う方法があります。SWELLのウィジェット「ヘッダー内部」を活用すると、グローバルナビゲーションの右端にボタンや告知テキストを設置できます。カスタマイザーだけでは対応できないレイアウトも実現しやすくなります。
ヘッダー内部ウィジェットとは何か
「ヘッダー内部」はSWELLの標準ウィジェットエリアの一つで、グローバルナビゲーション（PC表示）の右端に要素を配置できます。SWELL公式サイトでは「購入する」ボタンがこのエリアに設置されています。
カスタマイザーで設定できる内容（キャッチフレーズ・SNSアイコン・検索ボタン）とは独立したエリアです。ボタン・告知テキスト・SNSアイコンなどを自由なデザインで配置できます。
ヘッダー内部にボタンを設置する手順
ヘッダー内部にボタンを設置するには、まずSWELLの「ブログパーツ」機能でボタンを作成し、その呼び出しコードをウィジェットに貼り付ける方法が一般的です。
手順は次の通りです。管理画面の「ブログパーツ」から「新規追加」を開き、SWELLブロックの「SWELLボタン」を使って好みのボタンを作成します。作成後、ブログパーツの一覧画面に表示される「呼び出しコード」をコピーします。次に「外観」→「ウィジェット」から「ヘッダー内部」エリアに「カスタムHTML」を追加し、コピーした呼び出しコードを貼り付けます。
ボタンを複数設置するときの注意点
ヘッダー内部には複数のボタンを並べることもできます。カラムブロックを組み合わせることで横並びにできます。ただし、ボタンが増えるほど視認性が下がり、どれも目立たなくなりやすい点には注意が必要です。
ボタンを2つ設置するなら、色を変えるなど差別化を意識するとよいでしょう。ヘッダーは画面幅に制限があるため、ボタンの数は多くとも2〜3個程度に留めておくのが無難です。
スマホ向けに同様の案内を表示したい場合は、固定フッターメニューやお知らせバーの活用も検討するとよいでしょう。
- 「ヘッダー内部」ウィジェットでグローバルナビ右端にボタンや告知を設置できる
- ブログパーツで作成した呼び出しコードをカスタムHTMLで貼り付けるのが基本手順
- ボタンは複数設置可能だが、視認性の観点から2〜3個程度が目安
- スマホには反映されないため、スマホ向け表示は別途対応が必要
設定時によくある疑問と確認しておきたいポイント
ヘッダーバーの設定をしていると、思った通りに表示されない、設定したのに変化がないといったことが起きやすいです。設定の前後で確認しておくと役立つ点を整理します。
ヘッダーバーが表示されないとき
SWELLのヘッダーバーは、次のいずれかの条件を満たさないと表示されません。
・「SNSアイコンリストを表示する」にチェックが入っている
・キャッチフレーズの表示位置が「ヘッダーバー内に表示」に設定されている
・「コンテンツが空でもボーダーとして表示する」にチェックが入っている
これらのどれにもチェックが入っていない状態では、ヘッダーバーエリア自体が非表示になります。「ヘッダーバー設定」画面で色だけ設定しても、表示条件が満たされていないと画面に出てきません。
SNSアイコンが表示されないとき
「SNSアイコンリストを表示する」をオンにしてもアイコンが出てこない場合は、カスタマイザーの「SNS情報」にURLが入力されていないことが原因の場合がほとんどです。SNSのアカウントURLを入力して初めてアイコンが表示される仕組みです。
SNSをまだ使っていない場合や、ヘッダーバーを表示させたいがSNSは出したくない場合は、「コンテンツが空でもボーダーとして表示する」にチェックを入れるか、キャッチフレーズだけ表示する設定にするとよいでしょう。
CSSの変更がうまく反映されないとき
追加CSSに記述したのに変化がない場合は、いくつか確認すべき点があります。まず、変更後にカスタマイザーの「公開」ボタンを押したか確認します。また、ブラウザのキャッシュが古い状態のまま表示されている場合もあるため、キャッシュをクリアしてから再読み込みするとよいでしょう。
WordPressのキャッシュ系プラグインを使っている場合は、プラグイン側のキャッシュもクリアする必要があります。それでも反映されない場合は、CSSセレクターが正しいかを見直してみてください。
ヘッダーバーのCSSセレクター一覧
SWELLのヘッダーバー関連のCSSセレクターとして参考になる例を以下にまとめます。実際のカスタマイズに活用できます。
| 変更したい箇所 | CSSセレクター（例） |
|---|---|
| キャッチフレーズの表示幅 | .l-header__bar .c-catchphrase { width: 70%; } |
| グローバルナビの上下余白 | .c-gnav { padding-top: 2px; padding-bottom: 2px; } |
| グローバルナビの帯の高さ | .-parallel .l-header__gnav .c-gnav>li>a { padding: 14px 40px; } |
- ヘッダーバーは表示条件を満たさないと画面に出てこない
- SNSアイコン表示には「SNS情報」へのURL入力が必要
- CSS変更後はキャッシュのクリアも忘れずに
- CSSセレクターは追加CSSへの記述が安全（テーマ更新の影響を受けない）
まとめ
SWELLのヘッダーバーは、カスタマイザーの「ヘッダー」→「ヘッダーバー設定」から背景色・文字色・表示内容を設定できます。SNSアイコン・キャッチフレーズ・検索ボタンの組み合わせで、シンプルながら情報量のあるヘッダーにできます。
まず試してみるなら、カスタマイザーを開いてヘッダーバーの背景色と文字色をサイトのイメージカラーに合わせるところからはじめると、全体の印象が整いやすいです。キャッチフレーズの表示幅を広げたい場合は、追加CSSへの1行の記述で対応できます。
設定に迷ったときは、カスタマイザーのプレビュー画面を見ながら変更を試してみてください。公開ボタンを押すまでは反映されないので、いろいろ試してからまとめて公開することもできます。WordPressのブログ制作を少しずつ自分好みに整えていきましょう。
