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

テキストボタンはレスポンシブサイトにも最適でフラットデザインとの相性もよく、最近の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:リンク」を選択し、ここからボタンのデザインをしていきましょう。

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

関連記事