こんにちは。SaitoKouです。今回はWordPressテーマNeveの「モバイルサイドバー」という機能について触ってみましたので、メモしていきたいと思います。
モバイルサイドバーとは？
そもそもNeveでいうモバイルサイドバーとは何かというと、スマホ表示の場合に、ボタンを押すと出てくる画面外からメニューのことです。
スマホ表示の場合、PCに比べて画面が小さいため、載せられる情報量が少なくなります。そこで、PC版ではヘッダーに表示させていたメニューを、スマホ版ではボタンをクリックしたときに見えるようにする工夫があります。（ハンバーガーメニューとかって言ったりしますね。）
下の画面では、右上の3本線ボタンを押すと、
メインメニューが展開します。
ここに表示するメニューの文字位置や、表示するときのアニメーションをNeveの「モバイルサイドバー」設定で編集できます！
モバイルサイドバーでできること
設定できることは以下です！
- メニュー表示時のアニメーション
- メニュー自体の文字、背景の色
- メニューのテキストの位置（右揃え、中央揃え、左揃え）
早速設定してみましょう！
管理画面 ＞ カスタマイズ ＞ ヘッダー ＞ モバイルサイドバー
の順に選択します。
すると、こんな画面になります。
ここで、「レイアウト」タブの「配置」を中央ぞろえにしてみましょう。
すると、メニューの文字の位置が変わります。中央ぞろえになりましたね。
「開く際の挙動」は、メニューを展開するときのアニメーション設定ができます。いろいろ種類がありますが、動かしてみてください。ちょっと紛らわしかったのは以下です。
- 左からスライド：左からメニューが出てくる。後ろの背景は固定。
- 左から引く：左からメニューが出てくる。後ろの背景はそれに合わせて右に押し出される。
おススメ設定
個人的に見栄えがまとまっているなと思った組み合わせを下に書いておきます。
- 配置：左揃え、挙動：左からスライド
- 配置：中央ぞろえ、挙動：フルキャンバス
まとめ
スマホ向けレイアウトも考える場合は、このメニューも設定が必要です！コーディングしなくていい分楽になりますね。
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
