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

こんにちは! BiNDupで、テンプレートのデザインディレクターをしている、デザイナーのオモトです。 新しいBiND Pressは、カテゴリやタグによる分類ができるようになりました。 それに伴い、Dressでカテゴリ・タグボタンのデザインが編集できるようになりましたので、今回はクリックしやすいカスタマイズのノウハウをご紹介します! タグも設定箇所を変えて、同じように設定すればサンプルのデザインになるので、カテゴリの方だけやり方を書きますね。 設定できなかった方にはダウンロードデータを用意しているのでご安心を。 ※ブログの内容についてはサポート対象外なので要注意!質問いただいてもお答えできませんのでご注意ください!(ごめんなさい!)

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

カテゴリ・タグボタン関係のDressは、「リンク・画像」の一覧にズラッと並んでいます。 これらを使って表現していきます。 それぞれ、
  • リンクは、通常時のデザイン
  • マウスオーバーは、ボタンにマウスを乗せた時のデザイン
  • 訪問済み、は1度見たことのあるリンクのデザイン
  • 選択中、は選択中のリンクのデザイン
の編集ができます。 基本的に、「リンク」と「マウスオーバー」だけデザインすれば十分です。そのほかは、より細かくデザインしたいときに使用します。

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

BiNDCAMPのカテゴリボタンを再現しました! サンプルサイトを見る
①「ブログ:カテゴリ」 ボーダー:なし ②「ブログ:カテゴリ:リンク」 文字色:#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 コンテント:'#'

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

罫線の太さや、影の雰囲気を調整すると、コミカルなデザインにもできますよ。 サンプルサイトを見る
①「ブログ:カテゴリ」 ボーダー:なし ②「ブログ:カテゴリ:リンク」 文字色:#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

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

サンプルサイトを見る
①「ブログ:カテゴリ」 ボーダー:なし ②「ブログ:カテゴリ:リンク」 文字色:#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

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

カテゴリは単体で使われることが多いですが、例えばヘッダーの下の罫線にピッタリくっつけて、ページのデザインの一部にしてしまうのもいいですね。 いかがでしたでしょうか? アイデア次第で、いろいろな表現ができるので是非試してみてくださいね!