CSSの設定を上手く利用すれば、カテゴリ毎に色分けしたアイコンを作成することができます。
twenty-fourteen のテーマでは、カテゴリやタグを設定したタグの中にカテゴリスラッグを含んだクラスが付加されます。
カスタマイズのスラッグをcustomizeにしていたため、category-customizeというクラスがあります。
これがカテゴリ：プラグインの記事の場合は、スラッグをpluginにしていたので、category-pluginのクラスがあります。
これらのクラスを利用し、カテゴリごとの色分けを実装していきたいと思います！
まずはフキダシ風のCSSを簡単に作れるCSSジェネレーターを紹介しますね。
こちら！
http://cssarrowplease.com/
- サイト名：
- cssarrowplease.com
- サイトリンク：
- [browser-shot width=”600″ url=”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だけ追加をしていけばいいんですね。
無事、タイトル上のカテゴリリンクがフキダシに変わりました！
