連載  /  

DreamweaverとBootstrapで作るレスポンシブページ 第4回 「Bootstrapボタンをゴーストボタンに変身させる」

BY 公開

この連載では、DreamweaverのBootstrap機能を使って素早く効率的にページをオーサリングするチュートリアルを紹介します。

前回の「第3回 SVGでロゴ設置 & 画像のレスポンシブ対応」ではDreamweaverにIllustratorからインラインSVGをコピペして、レスポンシブなロゴを設置してみました。Bootstrapのレスポンシブ画像コンポーネントの使い方も覚えましたね。

今回はヒーローエリアのBootstrapのボタンをゴーストボタンに変身させてみましょう。

Bootstrapのボタンをゴーストボタンにカスタマイズ

さぁ、早速ボタンをカスタマイズしていきましょう。

一般的にゴーストボタンとは、背景が透けて見える罫線だけのボタンのことで、大きな背景写真の上によく配置されます。
このサイト上でもデザイントレンドとして解説記事がありますので、下記記事をご覧になってください。

参考記事 : Webデザイントレンド定点観測 背景が透けてみえる「ゴーストボタン」

ghost_sample
主に海外のWebサイトでトレンドとなっているゴーストボタンの例

せっかくですので、BootstrapのButtonコンポーネントの派生コンポーネントとして使えるようにゴーストボタンを作ってみましょう。

BootstrapのButtonコンポーネント

まず、BootstrapのButtonコンポーネントはどのようなものかを把握しておきましょう。
Buttonコンポーネントには、次のように6種類(+無色)に色分けされたボタンが存在しています。

BootstrapのButtonコンポーネント

HTMLには、以下のようにボタンの共通スタイルとなる.btnと合わせて、.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-linkといった種類別のclassを付けることで色を変えることができます。

<a href="#" class="btn btn-default">Default</a>

<a href="#" class="btn btn-primary">Primary</a>

<a href="#" class="btn btn-success">Success</a>

<a href="#" class="btn btn-info">Info</a>

<a href="#" class="btn btn-warning">Warning</a>

<a href="#" class="btn btn-danger">Danger</a>

<a href="#" class="btn btn-link">Link</a>

その他にも、幅いっぱいにボタンを広げる.btn-blockや、サイズの種類となる.btn-xs.btn-sm.btn-lgなどのclassを掛け合わせることができます。
詳しくは以下の記事を参照してください。

なお、これらの種類のボタンは、Dreamweaverの挿入パネルからも個別に挿入することができます。

挿入パネルのButtonsコンポーネント

「.btn-ghost」というオリジナルのコンポーネント用classを作る

それでは、上記のBootstrapのButtonコンポーネントに.btn-ghostというオリジナルのclassを合わせることで、ゴーストボタンという新しいコンポーネントを使えるようにしてみましょう。図で表すと以下の様なイメージですね。

「ゴースト」ボタンですので、まずは以下のようにbackground: transparent;を指定して背景を透過にします。(第1回で作成したstyle.cssに書き加えます)

.btn-ghost {
  background: transparent;
}

続いて、各色ボタンごとに.btn-ghostと組み合わせた場合のテキスト色を指定します。BootstrapのButtonコンポーネントは、通常テキストの色が白なので、背景色として使われている色に変更します。

.btn-ghost.btn-default {
  color: #777;
}

.btn-ghost.btn-primary {
  color: #337ab7;
}

.btn-ghost.btn-success {
  color: #5cb85c;
}

.btn-ghost.btn-info {
  color: #5bc0de;
}

.btn-ghost.btn-warning {
  color: #f0ad4e;
}

.btn-ghost.btn-danger {
  color: #d9534f;
}

hover時のスタイルも整えましょう。hover時には背景色を付け、テキストの色を白にするようにします。(hover時の背景色はBootstrapのButtonコンポーネントのスタイルをそのまま使うので、ここではわざわざ指定しません)

.btn-ghost.btn-primary:hover,
.btn-ghost.btn-success:hover,
.btn-ghost.btn-info:hover,
.btn-ghost.btn-warning:hover,
.btn-ghost.btn-danger:hover {
  color: #fff;
}

これで、BootstrapのButtonコンポーネントに、.btn-ghostというゴーストボタンの形状のコンポーネントを追加することができました。

なお、枠線もテキストも白色となるボタンはBootstrapにはありませんので、このタイミングで.btn-whiteというclassを用意しましょう。7色目のボタンコンポーネントとなります。

.btn-ghost.btn-white {
  color: #fff;
  border: 1px solid #fff;
}

.btn-ghost.btn-white:hover {
  color: #333;
  background: #fff;
}

以下のように、class="btn btn-primary btn-ghost"などとclassを掛け合わせれば、各色ごとのゴーストボタンとして表示されます。

<a href="#" class="btn btn-default btn-ghost">Default</a>

<a href="#" class="btn btn-primary btn-ghost">Primary</a>

<a href="#" class="btn btn-success btn-ghost">Success</a>

<a href="#" class="btn btn-info btn-ghost">Info</a>

<a href="#" class="btn btn-warning btn-ghost">Warning</a>

<a href="#" class="btn btn-danger btn-ghost">Danger</a>

<a href="#" class="btn btn-white btn-ghost">White</a>

このHTMLをブラウザで見ると、ちゃんとすべての色が、背景透過の枠線付きゴーストボタンとして表示されました。(最後の.btn-whiteのボタンが見えるようにグレー背景にしています)

ゴーストボタンを表示させた

ヒーローエリアのボタンをゴーストボタンにする

ヒーロエリア(Jumbotron)の中にあるボタンのコードを以下の様に変更しましょう。.btn-primary.btn-whiteに変更し、.btn-ghostを追加します。

<p><a class="btn btn-white btn-lg btn-ghost" href="#" role="button">Learn more</a></p>

ビジュアルエディター上でもちゃんとゴーストボタンとして表示されています。

ヒーローエリアのボタンをゴーストボタンに変更した

なお、ボタンの角丸をなくすのであれば、.btn-ghostborder-radius: 0;を書き加えておきます。これでゴーストボタンだけが角丸ではなくなります。

.btn-ghost {
  background: transparent;
  border-radius: 0;
}

Bootstrapのデフォルトのスタイルを上書きしないのがコツ

これまでのように、ゴーストボタンを用意するのに.btn-ghostというclassを新たに作りました。
この方法では、Bootstrapの既存のButtonsコンポーネントのスタイルを変更・上書きを全くしていません。

例えば、BootstrapのButtonsコンポーネントそのものである.btnに対してスタイルを上書き適用してしまうとしましょう。

.btn {
  background: transparent;
  border-radius: 0;
}

この場合、あとからBootstrapのデフォルトのButtonsコンポーネントを使いたくなった場合に困ることになります。
すべてのボタンの角丸をなくしたいなど、サイト全体の明確なレギュレーションとするのであればよいのですが、Bootstrapというフレームワークの持つ柔軟性は失われます。

Bootstrapのデフォルトのスタイルを上書きはよく考えて行う必要がある、ということです。

では、最後にボタンの中身を調整して終わりにしましょう。

Bootstrapのアイコンフォントを使う

このボタンは購入を促すボタンですのでそれなりの見た目がほしいところです。カートアイコンをボタン内に付けたいと思います。

Bootstrap 3には250種類のアイコンが含まれていますから、カートアイコンを探してみましょう。

Bootstrapのアイコンフォント

これらのアイコンは、もちろんDreamweaverの挿入パネルからも挿入することが可能です。
ですが、なんと、250種類中の5つしか挿入することができません

挿入パネルからアイコンを挿入できる
なのでこれら5種類以外のアイコンを使いたい際は、一度コードビューにアイコンを挿入した後にclassを書き換える必要があります。

下記コードのように、適当なアイコン(下のコードではホームアイコン)を挿入パネルから挿入した後、.glyphicon-homeの部分を、任意のアイコンのclass名に書き換えます。

<p><a class="btn btn-white btn-lg btn-ghost" href="#" role="button"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Learn more</a></p>

今回はカートアイコンにしたいので、公式サイトのGlyphiconsコンポーネントからカートアイコンを探すと.glyphicon-shopping-cartが見つかりました。

Boosttrapのカートアイコンを探す
先に追加したアイコンのclass名を
.glyphicon-shopping-cart
に変更しましょう。

<p><a class="btn btn-white btn-lg btn-ghost" href="#" role="button"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Learn more</a></p>

これでボタン内にカートアイコンを挿入することができました。

ボタン内にカートアイコンを挿入できた

Dreamweaverの今後のアップデートで、挿入パネルから250種類すべてのアイコンを使えるようになるといいですね。

ということで、最終的には以下のコードに調整しました。ヒーローエリア内のゴーストボタンの完成です。

<p>
  <a class="btn btn-white btn-lg btn-ghost" href="#" role="button">
    <span class="small">Original Blend 200g / ¥1,200</span><br>
    <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> BUY
  </a>
</p>

以上でサンプルページのヒーローエリアを作り終えることができました。

これで、レスポンシブなヒーローエリアが完成

背景の写真に馴染んでしまってテキストやボタンが見づらくなっている部分もありますが、これは写真を変えたり加工したり、レイアウト変更でカバーしたり調整してみましょう!

次回は、レスポンシブページの最重要課題であるグリッドレイアウトの作成に進みます。


  AUTHOR

松田 直樹

ゲーム業界にて企画開発に従事した後、Web業界に転身。 2011年より株式会社まぼろしにCCOとして参加。ゲーム業界で培った企画力を生かしつつ、デザイン・マークアップ・プログラム、書籍の執筆や講演といった業務を幅広く担当している。 また、日本史の歴史系ライティング活動も行っている。 近著に『これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装』(MdN・共著)、『Web制作者のためのIllustrator&ベクターデータの教科書』(インプレス・共著)がある。