BiNDの使い方

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

テキストボタンはレスポンシブサイトにも最適でフラットデザインとの相性もよく、最近のWebサイトで多く見かけます。ぜひ作り方をマスターしましょう。なお今回作成したテキストボタンのダウンロードデータを用意しましたのでこちらもご活用ください。

上級
この記事は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:リンク」を選択し、ここからボタンのデザインをしていきましょう。
  • テキストボタンは編集しやすく、フラットデザインとも相性がよい
  • Dressを使って既存メニューをアレンジ
  • フォントや背景、ボーダーなどを調整して好みのデザインに
コメントを開く

※BiNDの操作に関するお問い合わせは、サポートセンターで受け付けております。

●すでに製品をお持ちの方のテクニカルサポート:https://mypage.digitalstage.jp/
●ご購入前のお客様:contact@digitalstage.jp

ブログの投稿に関係のないご質問や、公序良俗に反する内容、誹謗中傷、広告行為、著作権侵害等のメッセージは掲示いたしかねますのでご了承ください。