SWELLのスマホメニューをカスタマイズする方法｜開閉メニューとグローバルナビの違い

※本記事にはプロモーションが含まれます。

SWELLのスマホメニューは、表示項目・色・補助情報で設定場所が異なります。項目は「外観→メニュー」、見た目はカスタマイザー、検索などはウィジェットが入口です。PCと同じ項目でよいかを先に決め、違いが必要な場合だけスマホ専用メニューを作りましょう。

スマホにPCと同じ項目が出る場合は、専用メニューの割り当てを確認します。SWELLではスマホ専用メニューを指定しないとグローバルナビが使われるため、同じ表示だけでは不具合と判断できません。

以下では、設定場所を混同しないように、項目・見た目・補助情報を分けて確認します。

PCと同じ項目でよいか、スマホ専用に絞るかを決める

スマホ用のメニューを作らなければ、グローバルナビが代わりに出ます。PCとスマホで同じ導線でよければ、そのままでも問題ありません。

専用メニューを作る理由は、スマホで優先したい行き先がPCと違うことです。たとえばサービスサイトなら「料金・制作例・問い合わせ」を先に見せ、細かな説明は各入口の先へまとめます。項目を減らすこと自体を目的にせず、読者の用事を一つずつたどれるかで選んでください。

表示項目は「外観」のメニューで決める

SWELL公式マニュアルでは、「スマホ開閉メニュー内」に割り当てたメニューがあれば、グローバルナビより優先して表示されると案内されています。

項目名は短く、行き先を想像できる言葉にします。「ご案内」より「料金」「お問い合わせ」など具体的な名前が候補です。同じURLを別名で並べず、詳細ページはカテゴリなどの入口にまとめると、狭い画面でも選びやすくなります。

色・透明度・タイトルはカスタマイザーで整える

スマホ開閉メニューの見た目は、「外観」からカスタマイザーを開き、「サイト全体設定」内の「スマホ開閉メニュー」へ進んで調整します。

文字色と背景色だけでなく、背景の不透明度とメニュー展開時のオーバーレイも別項目でした。画像の数値は当サイトの設定例で、全サイト向けの推奨値ではありません。

公式マニュアルで確認できる主な項目は、背景色、文字色、透明度、メインメニュー上に出すタイトルです。

サイトの背景と似た色にすると、開いたパネルの境界が分かりにくくなります。文字と背景のコントラストを確保し、リンクだと判別できる状態を優先してください。

タイトルのデザインは別の場所です。「サイト全体設定」の「タイトルデザイン」にある、スマホメニュー内のタイトルデザインを確認します。

設定箇所が分かれているため、色だけ変わってタイトルが変わらなくても、すぐにキャッシュ不具合と判断しないことが大切です。

メニュー下へ検索やプロフィールを置く

開閉メニューの下に補助情報を置きたい場合は、メニュー項目へ無理に混ぜずウィジェットを使います。

「外観」のウィジェット画面にある「スマホ開閉メニュー下」へ、必要なウィジェットを配置します。

補助情報は、目的のページを探す助けになるものから一つ置きます。記事数が多ければ検索、運営者の説明が必要なら短いプロフィールが候補です。追加後はスマホで開き、主要リンクへ到達するまでのスクロールが増えすぎていないか確認しましょう。

ウィジェットタイトルの見た目は、メニュー本体の色設定とは別です。タイトルデザイン側を確認すると、CSSを足さずに揃えられる場合があります。

反映されないときは設定場所を順番に切り分ける

項目が違う

スマホ開閉メニュー内へ割り当てたメニュー名を確認する。

PC用項目が出る

専用メニューが未割り当てか、保存されていない可能性を確認する。

色だけ変わらない

スマホ開閉メニューの色設定と文字のコントラストを確認する。

タイトルの形だけ変わらない

タイトルデザイン側の設定を確認する。

下部要素が出ない

スマホ開閉メニュー下のウィジェットエリアを確認する。

管理画面だけ正しい

ログアウト状態、別ブラウザ、キャッシュ削除後の表示を比較する。

ここまでで原因を絞れない場合も、追加CSSを先に増やすのは避けます。CSSは設定ミスを覆い隠し、後のテーマ更新で差分を追いにくくするからです。

スマホ幅で見る最終チェック

完成の確認は、メニューの色を見るだけでなく「開く→行き先を選ぶ→戻る→閉じる」まで行います。長い項目名が折り返しても押し間違えないか、下までスクロールして主要リンクに届くかを見てください。問題がある場合は項目名と配置から直し、その後に装飾を調整します。

設定後はページ全体の横はみ出しだけでなく、メニューを開く・項目を選ぶ・閉じるという操作も確認してください。この記事では、メニュー設定の実操作は検証していません。

SWELLでCSSを増やす前に標準設定を使う

スマホメニューの項目、色、タイトル、ウィジェットは、SWELLの標準設定でかなりの範囲を調整できます。

独自CSSは、標準設定で目的を満たせない箇所が残ったときだけにします。見出しを含むCSS調整の考え方は、同じクラスターの見出しCSS記事へ分け、メニュー設定と混在させません。

SWELLを利用中の方は、ここまでの設定とスマホ表示チェックで作業を完了できます。

関連する設定は、見出しCSSを安全に調整する手順で確認できます。

SWELLをまだ利用していない方へ

スマホ導線を標準機能で整えるためにテーマを替える方は、CocoonとSWELLの機能差と移行時の作業を確認する記事へ進めます。今のテーマでできることと、導入後に減らせる作業を比べて判断してください。

公式情報

• スマホメニューの設定方法
• SWELL設定マニュアル