スマホにも最適！メニューをテキストボタンにアレンジ

BiNDで作成したサイトにボタンを配置する時、多くの場合はSiGNなどで作った画像ボタンを使用しますが、テキストボタンを使いたいという方もいらっしゃると思います。シンプルなテキストボタンはフラットなデザインとの相性もよく、最近のWebサイトでは多く見かけるようになりました。 そこで今回は、BiNDに用意されている既存メニューをアレンジしてテキストボタンを作る方法をご紹介します。

テキストボタンのメリット

• テキストの修正・差し替えが容易です。
• 解像度を気にしなくて良いので、スマホでもきれいに表示されます。
• デザインをDressで管理できるので、複数のボタンを使う時にデザインが統一でき、一括変更もできます。

基本的な流れ

1. BiNDにはメニューの種類がA〜Eまで用意されていますので、まずはどのメニューをボタン用にアレンジするかを決めます。 ※デザインを変更しても他に影響がないメニューを選びましょう。ヘッダーやフッターなどで、すでに使用しているメニュー以外を選ぶと良いです。
2. Dressを使ってメニューのデザインをボタンパーツとしてアレンジします。（詳しくは後述参照）
3. あとはブロックエディタでアレンジしたメニューを配置すればボタンっぽく使用できます。

Dressでのアレンジ例

デザインのカスタマイズ方法はいろいろなやり方がありますが、今回はサンプルとして「メニューC」を使ったDressでの設定方法を紹介します。

【1】Dressを開く

Dressを開き、「メニュー」タブの中にあるメニューCのスタイルを編集していきます。 Dress作成方法は「Dressの編集方法」をご覧ください。

【2】「メニューC」を設定

メニューCにはデフォルトで背景色が入っているため、まずは「メニューC」を選択し背景色をなし（透明）に変更します。

【3】「メニューC：リスト」を設定

次に境界線を消します。「メニューC：リスト」を開いて、ボーザーをなしに設定します。

【4】「メニューC：リンク」を設定

「メニューC：リンク」を選択し、ここからボタンのデザインをしていきましょう。