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

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

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

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

基本的な流れ

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

Dressでのアレンジ例

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

【1】Dressを開く

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

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

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

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

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

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

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