CSSでカテゴリリンクを矢印アイコン風に

CSSの設定を上手く利用すれば、カテゴリ毎に色分けしたアイコンを作成することができます。

icons-css

twenty-fourteen のテーマでは、カテゴリやタグを設定した

タグの中にカテゴリスラッグを含んだクラスが付加されます。

カスタマイズのスラッグをcustomizeにしていたため、category-customizeというクラスがあります。

css-arrow02

これがカテゴリ:プラグインの記事の場合は、スラッグをpluginにしていたので、category-pluginのクラスがあります。

css-arrow03

これらのクラスを利用し、カテゴリごとの色分けを実装していきたいと思います!

まずはフキダシ風のCSSを簡単に作れるCSSジェネレーターを紹介しますね。
こちら!
http://cssarrowplease.com/

サイト名:
cssarrowplease.com
サイトリンク:
http://cssarrowplease.com/

フキダシの位置や、ボーダーのサイズ、背景色、これらをプレビューを見ながら作成していくことができ、出来上がったCSSをコピペするだけです。

.arrow_box {
	position: relative;
	background: #000;
}
.arrow_box:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(235, 235, 235, 0);
	border-top-color: #000;
	border-width: 8px;
	margin-left: -8px;
}

ジェネレーターでは.arrow_boxとなっていますが、これをカテゴリリンクのクラスに置き換えればいいんですね。

article タグの中の cat-links、つまり

article .cat-links a {

}

です。

.cat-links a {
	position: relative;
	background: #000;
}
.cat-links a:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(235, 235, 235, 0);
	border-top-color: #000;
	border-width: 8px;
	margin-left: -8px;
}

.cat-links a には、ドロップシャドウや角丸、位置調整のプロパティも追加してみようと思います。
また、リンクの色も初期化します。

.cat-links a {
  position: relative;
  /* 位置調整 */
  top:-5px;
  background: #000;
  /* 余白調整 */
  padding:5px 10px;
  /* 角丸 */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  /* ドロップシャドウ */
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  /* リンク色初期化 */
  color:#fff;
}
.cat-links a:hover {
  /* リンクホバー色変更 */
  color:#fff;
  /* ホバー時のアクション */
  top:-7px;
  -moz-opacity: 0.70;
  opacity: 0.70;
}
.cat-links a:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(235, 235, 235, 0);
  border-top-color: #000;
  border-width: 8px;
  margin-left: -8px;
}

ここまでで出来たのは黒地に、白いテキストの噴出しです。
あとは追加で

category-customize の時の色
category-plugin の時の色
を追加してあげましょう。

.category-customize .cat-links a {
/*フキダシの色*/
background :#24890d;
}
.category-customize .cat-links a:after {
/* フキダシ(矢印)の色 */
border-top-color:#24890d;
}
.category-plugin .cat-links a {
/*フキダシの色*/
background :#0f5089;
}
.category-plugin .cat-links a:after {
/* フキダシ(矢印)の色 */
border-top-color:#0f5089;
}

カテゴリが増えたら、background と border-top-color のCSSだけ追加をしていけばいいんですね。

無事、タイトル上のカテゴリリンクがフキダシに変わりました!

css-arrow04

css-arrow05

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。