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

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

スマホでメニューボタンを押したとき、PC用のグローバルナビと同じ項目が出てきて戸惑うことがあります。

これは不具合とは限りません。SWELLでは、スマホ専用メニューを割り当てていない場合、グローバルナビが代わりに表示されます。

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

最初に分ける：スマホ開閉メニューとグローバルナビ

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

項目が多くて押しにくい、スマホでは問い合わせを上へ出したい、といった理由があるときだけ専用メニューを作ります。

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

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

まずは項目名を短くし、同じ行き先を別名で重複させないようにします。スマホ用だからといって、サイト内のすべてのページを並べる必要はありません。

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

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

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

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

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

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

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

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

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

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

検索窓や短いプロフィールは候補になりますが、要素を増やすほど最重要リンクが埋もれます。最初は1つだけ置き、実際のスマホ幅でスクロール量を確認してください。

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

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

項目が違う

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

PC用項目が出る

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

色だけ変わらない

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

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

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

下部要素が出ない

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

管理画面だけ正しい

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

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

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

320px、375px、390px前後で確認すると、長い項目名の折り返しやタップしにくさを見つけやすくなります。

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

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

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

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

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

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

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

スマホメニューなどの標準機能を使うためにテーマを替える価値があるか、Cocoonとの違いと17,600円の費用から判断できます。

公式情報

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