オモトこんにちは、テンプレートディレクターのオモトです!ユーザーさんから方法が知りたいとよく言われる、BiNDでのスマホメニューのカスタマイズ・テクニック第2弾です。前回、「見慣れたスマホメニューをカスタマイズするテクニック・基本編」では、Dressを使ったハンバーガーメニューの基本的なデザイン編集方法についてまとめました。後編の今回は、もうちょっと変わったデザインに挑戦したいときのテクニックとして、応用編を解説したいと思います。一部はBiND10のテンプレートにも入っているデザインで、ちょっと高度なものもありますが、難易度を書いておいたので参考にしてください。設定できなかった方にはダウンロードデータを用意しているのでご安心を。お読みください!※これからご紹介する3つのやり方は、BiND9以降のソフトまたはBiNDクラウドじゃないとできません!BiND8以前のソフトではできません。※ブログの内容についてはサポート対象外なので要注意!質問いただいてもお答えできません。(ごめんなさい!)前回のおさらいDressでカスタマイズするときの基本設定ハンバーガーメニュー関係のDressは、Dress編集画面のデバイス切り替えで「スマホ」タブにしないと設定が表示されないので注意。ハンバーガーメニューのデザインはDressのスマホメニューのボタン枠スマホメニューボタン内の3本線を使って表現します。基本構造と概念(CSSがわかる人向け)デフォルトで設定されている3本線は、「スマホメニューの3本線」で線の色を変更できますが、線と線の間の余白を調節したり細かい調整ができません。これ以外のハンバーガーメニューに割り当てられる要素を使い、まっさらな状態から新しく3本線を作成する必要があるのです。具体的にいうと、「スマホメニューのボタン枠」は非表示(display:none)にしてしまうので、「スマホメニューのボタン枠」と、そこに当てられる疑似要素「::before」と「::after」をつけた3箇所のみで表現しなければいけないということになります。ここが頭の使いどころ。私は発想を逆転し、3本の線の色は背景色で、線と線の隙間をborder2本を使って表現するという方法を開発しました。企業サイトでよく見るハンバーガーメニュー3本の線の下に「MENU」という文字を配置して、アイコンの意味を説明しているパターン。3本線だけだとそれが「メニュー」だと、認識しづらいユーザーが多くいるのも事実です。初回の訪問者にもわかりやすく見せる対策としてよく使用されています。Corporationで使用されています。#f1f1f1表示(display):block幅(width):30pxコンテント(content):‘MENU’ポジション(position):relativeトップ(top):4pxレフト(left):-6px3本線が華奢で美しいハンバーガーメニューハンバーガーメニューに慣れている層をメインターゲットとし、デザインのプライオリティが高いビジュアル重視のサイトに積極的に取り入れたい美しいデザインのハンバーガーメニューです。INTERIORで使用されています。#ffffff表示(display):blockコンテント(content):‘’を追加ポジション(position):relativeトップ(top):-2pxおまけ:横長でメニューの文字が大きいハンバーガーメニューこれ以上なく大きくメニューという文字が入っているので、メニューがどこにあるのか特に認識しづらいユーザーには最大限の効果を発揮しそうなハンバーガーメニューです。文字色:#ffffff文字サイズ:11px表示(display):blockコンテント(content):‘MENU’ポジション(position):absoluteトップ(top):5pxレフト(left):44pxハンバーガーメニューは、自分のサイトのターゲットに合わせてデザインをカスタマイズしていくと、より効果を発揮しそうですね。今回作成したサンプルサイトのダウンロード自分では設定ができなそう・・と不安な方は今回のサンプルサイトのサイトデータを用意しましたので、以下よりログインしてダウンロードしてみてください。CAMPで最も読まれた記事は?コンセプト。