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

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

icons-css

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

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

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

css-arrow02

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

css-arrow03

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

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

サイト名:
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

Coments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です