SWELLのスマホ用ヘッダーは、サイトの印象だけでなく、読者が目的のページへ移動しやすいかどうかを左右する部分です。設定項目が「外観」のメニュー画面とカスタマイザーに分かれているため、どこを変更すればよいのか迷う方もいるでしょう。
基本は、スマホ上部に表示するメニューを作成し、カスタマイザーでロゴの位置や各ボタンの表示を整える流れです。パソコン用のグローバルナビをそのまま使う方法と、スマホ専用に項目を絞る方法のどちらも選べます。
在宅でブログやサービスサイトを運営する場合は、限られた画面内に情報を詰め込みすぎず、「読者が次に押したい場所」を優先してみてください。この記事では、初めてでも進めやすい順番で設定方法と確認ポイントを整理します。
SWELLスマホ用ヘッダーの設定場所と基本手順
最初に、SWELLスマホ用ヘッダーを構成する設定場所を整理します。メニューの内容はWordPress管理画面の「外観」から作成し、ロゴやボタンの配置はカスタマイザーで整えると、作業の行き来が少なくなります。
スマホ上部に表示するメニューを作成する
スマホのヘッダー部分にページへのリンクを表示するには、WordPress管理画面の「外観」から「メニュー」を開きます。新しいメニューを作成する場合は、分かりやすい名前を付け、固定ページ、カテゴリー、カスタムリンクなど必要な項目を追加してください。
メニュー設定欄にある表示位置では「スマホ用ヘッダー」を選びます。パソコンと同じ項目を表示する場合は、既存メニューに「グローバルナビ」と「スマホ用ヘッダー」の両方を指定する方法が簡単です。スマホでは項目数が多いと横幅に収まりにくいため、主要な2〜4項目程度から試すと確認しやすいでしょう。
スマホ専用メニューと開閉メニューを区別する
SWELLには、ヘッダー上に横並びで表示する「スマホ用ヘッダー」と、メニューボタンを押した後に開く「スマホ開閉メニュー内」があります。名前が似ていますが、表示される場所が異なるため、目的に合わせて割り当てることが大切です。
例えば、「ホーム」「サービス」「お問い合わせ」は上部のスマホ用ヘッダーに置き、プロフィールやカテゴリー一覧、利用規約などは開閉メニュー内へまとめる方法があります。すべてを上部に並べるより、よく使う導線だけを残したほうが、スマホ画面がすっきり見えます。
カスタマイザーでスマホ表示を確認する
メニューを保存したら、「外観」から「カスタマイズ」を開き、「ヘッダー」へ進みます。画面下部にある端末切り替えアイコンでスマホ表示を選ぶと、公開前の状態をプレビューしながらロゴやボタンの位置を調整できます。
設定画面の名称や並びは、利用しているSWELLのバージョンによって変わる場合があります。項目が見つからないときは、SWELL公式サイトの「ヘッダー・ロゴ画像」の設定ページと「スマホメニューの設定方法」を確認してください。変更後は「公開」を押し、実機でも表示を確かめます。
開閉メニュー内の項目とは表示場所が異なります。
保存後はカスタマイザーと実際のスマホの両方で確認してください。
具体的には、最初に「ホーム」「記事一覧」「お問い合わせ」の3項目だけで保存し、スマホで文字の重なりや折り返しがないか確認します。問題がなければ、必要に応じて1項目ずつ追加すると、崩れの原因を見つけやすくなります。
- メニューの内容は「外観」→「メニュー」で作成します。
- 表示位置は「スマホ用ヘッダー」を選びます。
- 開閉メニュー内とは役割を分けて考えます。
- 保存後はスマホ表示へ切り替えて確認します。
ロゴ・メニュー・ボタンを見やすく整える方法
基本のメニューを表示できたら、次はヘッダー内の配置を整えます。スマホでは使える横幅が限られるため、ロゴ、メニューボタン、検索ボタン、カスタムボタンの優先順位を決めてから設定するとまとまりやすくなります。
ロゴとメニューボタンの位置を選ぶ
SWELLのヘッダー設定では、スマホ向けのレイアウトとして、ロゴを左側または中央へ配置し、メニューボタンを左右のどちらかへ置く組み合わせを選べます。一般的には、ロゴを左、メニューボタンを右にすると、多くのサイトで見慣れた配置になります。
一方、ブランド名やロゴを印象的に見せたい場合は中央配置も選択肢です。ただし、左右に検索ボタンやカスタムボタンを置くと、ロゴの表示領域が狭くなることがあります。見た目だけで決めず、サイト名が読める大きさを保てるか確認するとよいでしょう。
ロゴ画像の高さをスマホ向けに調整する
ロゴが小さすぎるとサイト名を認識しにくくなり、大きすぎると本文の表示開始位置が下がります。「外観」→「カスタマイズ」→「ヘッダー」にあるロゴ画像の設定で、スマホ表示時の高さを確認しながら調整してください。
横長のロゴは、画像内の余白が多いと設定値を上げても文字部分が小さく見えます。その場合は、画像編集ツールで不要な透明余白を取り除くと改善しやすくなります。法人サイトでは正式なロゴ利用規定を確認し、個人・小規模サイトでは読みやすさを優先した簡潔な画像を用意するとよいでしょう。
検索・メニュー・カスタムボタンを選別する
スマホヘッダーには、検索ボタン、開閉メニューボタン、カスタムボタンなどを表示できます。すべてを有効にすると操作の選択肢は増えますが、ロゴ周辺が窮屈になり、どこを押すべきか分かりにくくなることもあります。
記事数が多いブログでは検索ボタンが役立ちます。サービス申込みを優先するサイトでは、カスタムボタンへ「相談する」「予約する」などのリンクを設定する方法があります。ただし、リンク先が未完成のまま公開したり、似た役割のボタンを複数置いたりしないようにしてください。
| 要素 | 向いているサイト | 確認ポイント |
|---|---|---|
| 検索ボタン | 記事数が多いブログ | 検索結果が適切に表示されるか |
| メニューボタン | ページ数が多いサイト | 開閉メニューの項目が整理されているか |
| カスタムボタン | 申込みや予約を促すサイト | リンク先と文言が一致しているか |
| 横並びメニュー | 主要ページが少ないサイト | 文字が折り返されていないか |
例えば、ブログを始めたばかりで記事数が少ない段階なら、右側にメニューボタンだけを置き、検索ボタンは非表示にする形でも十分です。記事が増えた後に検索を追加すれば、初期設定を複雑にしすぎずに済みます。
- ロゴとボタンが重ならない配置を選びます。
- 画像内の透明余白もロゴの見え方に影響します。
- ボタンはサイトの目的に合うものへ絞ります。
- リンク先とボタン文言の一致を確認します。
表示されない・崩れるときの確認ポイント
配置を整えても、メニューが表示されない、変更が反映されない、文字が重なるといったことがあります。ここでは、設定漏れ、キャッシュ、項目数、子メニューの扱いを順番に見直し、原因を切り分ける方法を整理します。
メニューの表示位置と保存状態を見直す
スマホ用ヘッダーが表示されないときは、最初に「外観」→「メニュー」を開き、対象メニューの表示位置へ「スマホ用ヘッダー」が指定されているか確認します。メニューを作成しただけでは、表示位置が未設定のままになっている場合があります。
項目を追加した後に「メニューを保存」を押していないケースもあります。複数のメニューを作成している場合は、編集対象を取り違えていないかも確認してください。パソコン用とスマホ用で別メニューを使うときは、似た名前を避け、「PCグローバル」「スマホ上部」など用途が分かる名称にすると管理しやすくなります。
子メニューと項目数を整理する
SWELL公式の案内では、スマホ用ヘッダーメニューでは子メニューが非表示になる仕様が示されています。親項目の下へページを階層化していても、スマホ上部の横並びメニューから直接選べない場合があるため注意してください。
階層化したページを見せたい場合は、スマホ開閉メニュー内へ配置するか、親ページに一覧リンクを用意する方法があります。また、横並び項目が多すぎると、文字が極端に小さくなったり画面外へ続いたりします。短いラベルへ変更し、「お問い合わせ」を「相談」へするなど意味が伝わる範囲で調整してみてください。
キャッシュと実機表示を確認する
管理画面では変更されているのにスマホで古い表示が残る場合は、ブラウザ、キャッシュ系プラグイン、サーバー側キャッシュの影響が考えられます。まずシークレットモードや別のブラウザで開き、同じ状態になるか確かめます。
キャッシュを削除する際は、利用中のプラグインやサーバー会社の公式手順に沿って操作してください。削除後はトップページだけでなく、投稿ページ、固定ページ、検索結果ページも確認します。画面幅による違いを把握するため、可能であればスマホを縦向きと横向きの両方で表示すると安心です。
子メニューはスマホ用ヘッダーで表示されない場合があります。
変更後はキャッシュを確認し、実機で複数ページを開いてください。
Q. パソコンとスマホで別のメニューを使えますか。
はい、それぞれ専用のメニューを作成し、表示位置を分けて指定できます。スマホ側は主要ページへ絞ると、限られた横幅でも読みやすくなります。
Q. CSSを追加しないと整えられませんか。
基本的な配置、色、ロゴサイズ、ボタン表示はカスタマイザーで調整できます。標準設定で目的を満たせるか確認してからCSSを検討すると、更新後の不具合を避けやすくなります。
- 対象メニューの表示位置と保存状態を確認します。
- 子メニューは開閉メニュー内で見せる方法もあります。
- 横並びの項目は短く、少なく整えます。
- キャッシュ削除後に実機で確認します。
まとめ
SWELLスマホ用ヘッダーは、メニューの表示位置を設定し、カスタマイザーでロゴとボタンを整えると完成します。
最初は主要な2〜4項目だけを配置し、スマホの実機で文字の重なり、リンク先、開閉操作を確認してみてください。
一度に多くの機能を加えず、読者が迷わず次のページへ進める構成から始めると、すっきりしたヘッダーへ近づけられます。
本記事は一般的な情報提供を目的としており、起業・副業による収益や成果を保証するものではありません。税務・法務に関する判断は、国税庁や税理士など専門家・公的機関の情報を必ずご確認ください。
