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

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

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

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

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

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

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

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

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

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

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

カテゴリボタン完成イメージサンプル

サンプルサイトを見る


カテゴリボタンの文字色を変えるDress設定
①「ブログ:カテゴリ」
ボーダー:なし
②「ブログ:カテゴリ:リンク」
文字色:#45a575
文字サイズ:12px
行の高さ:1
ボーダー: (四辺とも同じ) 1px 実線 #45a575
ディスプレイ:inline-block
角丸:20px
内余白:上下 5px 左右 15px③「ブログ:カテゴリ:リンク:マウスオーバー」
文字色:#ffffff
背景色:#45a575
透明度:1

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

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

影付きグラデーションのカテゴリボタンの完成例サンプル

サンプルサイトを見る


カテゴリボタンアレンジの設定例
①「ブログ:カテゴリ」
ボーダー:なし
②「ブログ:カテゴリ:リンク」
文字色:#ffffff
文字サイズ:12px
行の高さ:1
表示:inline-block
角丸:5px
内余白:上下 10px 左右 20px
ボックスシャドウ:水平方向 0 垂直方向 2 ぼかし 5 影色 rgba(0,0,0,0.1)③「ブログ:カテゴリ:リンク:マウスオーバー」
ボックスシャドウ:水平方向 0 垂直方向 6 ぼかし 15 影色 rgba(0,0,0,0.1)

④「ブログ:カテゴリ:リンク::before」
表示:inline-block
外余白:右 3px
コンテント:'#'

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

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

影付きボーダーボタンの完成例サンプル

サンプルサイトを見る


影付きボタンのDress設定例
①「ブログ:カテゴリ」
ボーダー:なし
②「ブログ:カテゴリ:リンク」
文字色:#000000
文字サイズ:12px
文字の太さ:bold
行の高さ:1
背景色:#ffffff
ボーダー: (四辺とも同じ) 2px 実線 #000
表示:inline-block
角丸:5px
内余白:上下 10px 左右 15px
ボックスシャドウ:水平方向 3 垂直方向 3 ぼかし 0 影色 rgba(0,0,0,0.15)③「ブログ:カテゴリ:リンク:マウスオーバー」
ボックスシャドウ:水平方向 0 垂直方向 0 ぼかし 0 影色 なし(rgba(0, 0, 0, 0))
透明度:1

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

ふせん風のカテゴリボタンの完成例サンプル

サンプルサイトを見る


付箋風ボタンのDress設定例
①「ブログ:カテゴリ」
ボーダー:なし
②「ブログ:カテゴリ:リンク」
文字色:#000000
文字サイズ:12px
文字の太さ:bold
行の高さ:1
背景色:#ffffff
ボーダー: 左 5px 実線 #e00000
表示:inline-block
内余白:上下 10px 左右 15px
ボックスシャドウ:水平方向 0 垂直方向 2 ぼかし 5 影色 rgba(0,0,0,0.1)③「ブログ:カテゴリ:リンク:マウスオーバー」
ボックスシャドウ:水平方向 0 垂直方向 6 ぼかし 15 影色 rgba(0,0,0,0.1)
透明度:1

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

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

ページの真ん中にカテゴリボタンを配置したアレンジ例

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