新BiND PressのカテゴリやタグのデザインをDressで変更する方法

こんにちは！
BiNDupで、テンプレートのデザインディレクターをしている、デザイナーのオモトです。

新しいBiND Pressは、カテゴリやタグによる分類ができるようになりました。
それに伴い、Dressでカテゴリ・タグボタンのデザインが編集できるようになりましたので、今回はクリックしやすいカスタマイズのノウハウをご紹介します！
タグも設定箇所を変えて、同じように設定すればサンプルのデザインになるので、カテゴリの方だけやり方を書きますね。

設定できなかった方にはダウンロードデータを用意しているのでご安心を。
※ブログの内容についてはサポート対象外なので要注意！質問いただいてもお答えできませんのでご注意ください！（ごめんなさい！）

Dressでカスタマイズするときの基本設定

カテゴリ・タグボタン関係のDressは、「リンク・画像」の一覧にズラッと並んでいます。

これらを使って表現していきます。
それぞれ、

• リンクは、通常時のデザイン
• マウスオーバーは、ボタンにマウスを乗せた時のデザイン
• 訪問済み、は１度見たことのあるリンクのデザイン
• 選択中、は選択中のリンクのデザイン

の編集ができます。
基本的に、「リンク」と「マウスオーバー」だけデザインすれば十分です。そのほかは、より細かくデザインしたいときに使用します。

①マウスオーバーで色が変わるボタン 難易度：★

BiNDCAMPのカテゴリボタンを再現しました！

サンプルサイトを見る

②影付き！グラデーションボタン 難易度：★★

影の効果でふわっとひろがるように見えるリアルなボタンです。
オプションにある「::before」を使えば、任意のテキストをカテゴリ名の前に付けられます。

サンプルサイトを見る

③コミック調のデザイン 難易度：★

罫線の太さや、影の雰囲気を調整すると、コミカルなデザインにもできますよ。

サンプルサイトを見る

④ふせん風のボタン 難易度：★★

サンプルサイトを見る

ページのワンポイントに！こんなカテゴリーボタンの表現も

カテゴリは単体で使われることが多いですが、例えばヘッダーの下の罫線にピッタリくっつけて、ページのデザインの一部にしてしまうのもいいですね。

いかがでしたでしょうか？
アイデア次第で、いろいろな表現ができるので是非試してみてくださいね！