スマホメニューをカスタマイズするテクニック

スマホメニューの基本カスタマイズから、よりこだわった上級者向けカスタマイズまでご説明致します。

皆様こんにちは。ディレクターのコウで御座います。

本日はセミナーでも何度か扱いました、スマホメニューのカスタマイズについてご説明したいと思います。
スマホメニューは予めデザインされているので、そんなに気にしなくてもそのまま使うことは可能ですが、Dressを使って細かくカスタマイズする事も可能です。

スマホメニューの基本

スマホメニューが使えるのはレスポンシブ形式のみ

まず、基本中の基本ですが、BiNDテンプレートはレスポンシブWebに対応した「レスポンシブ形式」と、従来の「BiND7形式」の2種類存在しています。
スマホメニューが使えるのは勿論「レスポンシブ形式」になりますので、「デザイン形式」をチェックしてください。
「BiND7形式」の場合はレスポンシブ化の作業が必要になりますので、こちらの記事を参考にしてください。

img_01 「BiND7形式」の場合レスポンシブWebにならないのでお気をつけください。

スマホメニューのルール

PC版で最初に設定したメニューパーツが、スマホ表示の際にスマホメニューに変換されます。

img_02 メニューのスタイルを充てましょう。

スマホメニューの設定

スマホメニューの配置スタイルで位置を調整

右上にあるスマホプレビューに切り替えると設定ボタンが表示されます。
まずは「配置スタイル」からスマホメニューの位置を決めます。固定にすればスクロールしてもメニューが付いてきます。

アニメーション選択で演出

「アニメーション」からメニューの表示演出が選択できます。
スライドの方向などを決められますので、お好みでお選びください。

img_04 メニューがスライドする方法を決めましょう。

Dressを使ってデザインのカスタマイズ(基本編)

基本を覚えたところでここからがカスタマイズの本題です。
ピンクのスマホメニューを作ってみましょう。

※PC環境から見る場合はスマホメニューに変換されるまでブラウザウィンドウの幅を狭めてください

色と角丸をカスタマイズ

まず右上にあるDressボタンを押します。
すでにDressをカスタマイズしている方は「テンプレートを編集」をクリックしてください。
Dressをカスタマイズしていない方は、現在選択されているDressテンプレートを複製します。

複製ボタンを押してテンプレート名を入力すれば「テンプレートを編集」ボタンが表示されます。 サイトテンプレートから作っている場合は複製してから編集しましょう。

Dressの編集画面が開いたら「デバイス切替」でスマホ表示を選択して、「編集中のページでプレビュー」をチェックして現在開いているページのプレビューに切り替えてください。
ここではボタン枠の色の変更を行ってみましょう。
メニュー>スマホメニュー:ボタン枠
の順にタブを開きます。
img_06 該当するセレクタを選択して編集するのがDressの基本です。

そうするとプロパティと呼ばれる設定一覧が開きますので、その中から「ボーダー」を開きます。
右ウィンドウに設定が開きますので、「設定する」にチェックを入れてから下の画像の示す位置に色(カラーコード)を指定してください。
ここではピンク(#ff7891)を設定してみました。
同様に「背景」にも色を設定してみましょう。
「角丸」を選択して「四隅とも同じ」をチェックしてから数字を入力してください。数字が大きいほど角が丸くなります。

img_07 プロパティを全て設定する必要はないので、必要な箇所だけを設定しましょう。
続いてボタン枠の三本線の色の変更です。

このコンテンツを閲覧するにはログインが必要です。→ . 会員登録はお済みですか? 会員について

関連記事