※こちらの記事は当ブログがTwentyFourteenを利用していた時に書いたものです。
以前はカテゴリのリンクをフキダシ（矢印）風にしていましたが、結局カテゴリを細分化することにしました。
プラグイン
SEO対策系：スラッグ＞seo
アクセスアップ系：スラッグ＞access-up
セキュリティ系：スラッグ＞security
ソーシャル連携系：スラッグ＞social
問合せ系：スラッグ＞inquiry
投稿便利系：スラッグ＞useful
管理系：スラッグ＞manage
そのため、全てを色分けをしてわちゃわちゃするのがイヤなので、せっかくデフォルトで使われてるgenericonsのアイコン文字を使ってリンクにアイコンを配置することにしました。
テーマTwentyFourteenでは、
wp-content/themes/twentyfourteen
のテーマフォルダの中に「genericons」フォルダがあり、そのフォントを利用して、画像のようなアイコンフォントを出力しています。
これを、カテゴリ「プラグイン」の子カテゴリーリンクに反映したいと思います。
目次
genericons.com
- サイト名
- genericons.com
- サイトリンク
- [browser-shot width=”600″ url=”http://genericons.com/”]
まず、どうやって表示されてるの？
ちょっとコメントのアイコン文字部分を解析してみました。
chromeで「コメントをどうぞ」を右クリック、「要素を検証」してみます。
そして、「:before」をクリックしてみましょう。
Genericonsのアイコンフォントが使用されているのを確認できます。
つまり、「（バックスラッシュ）f300」がフキダシのアイコンフォントですね。
genericons.comでも確認できます。http://genericons.com/#commentにアクセスして、「Copy CSS」をクリックすれば確認できます。
カテゴリリンク内のa:beforeにfont-familyを設定
.cat-links a:before {
display: inline-block;/* 位置調整のため */
position: relative;
top: 4px;
margin-right: 4px;
font-family: Genericons;/* フォント指定 */
font-size: 140%;
font-weight:normal;
}
そして、個別にフォントのナンバーを指定
ベタに、「問合せ系」にメールマークのアイコンフォントを導入してみます。
twentyFourteenでは、articleタグに「category+カテゴリスラッグ」のクラスが出力されますので、
/* 問合せ系 */
.category-inquiry .cat-links a:before {
content: '\f410';
}
としました。
こちらで確認できます。
カテゴリー別アーカイブ: 問合せ系
この調子で、各最下層カテゴリにアイコンを適用しましたよ～＾＾
けっこうわかりやすいかも！
フキダシの色や、フキダシアイコンにした記事はこちらをご覧下さい！
CSSでカテゴリリンクを矢印アイコン風に
むむむ・・・こうなると左サイドのカテゴリアーカイブも同じにしてあげたい。。。
やりましょう！！！
ウィジェットでカテゴリを表示している場合、「cat-item-カテゴリID」というクラスが出力されていますので、同じ要領でカテゴリごとにアイコンを表示することが可能です。
もう、一気に載せちゃいますね。
コツは、共通のCSSをまとめることですね。
ただでさえクラスが沢山あって、CSSも膨大な量なので、「なるべく同じ記述は書かないようにする（まとめる）」というのは心がけたいところです。
/* Genericons カテゴリリンク */
.cat-links a:before {
display: inline-block;
position: relative;
top: 4px;
margin-right: 4px;
font-family: Genericons;
font-size: 140%;
font-weight:normal;
}
/* Genericons カテゴリアーカイブ */
.cat-item a:before {
display: inline-block;
position: relative;
top: 2px;
margin-right: 2px;
font-family: Genericons;
font-size: 120%;
font-weight:normal;
}
/* ベクター素材 */
.cat-item-23 a:before,
.category-vector .cat-links a:before {content: '\f473';}
/* 写真素材 */
.cat-item-24 a:before,
.category-photo .cat-links a:before {content: '\f102';}
/* カスタマイズ */
.cat-item-9 a:before,
.category-customize .cat-links a:before {content: '\f462';}
/* 問合せ系 */
.cat-item-27 a:before,
.category-inquiry .cat-links a:before {content: '\f410';}
/* 管理系 */
.cat-item-31 a:before,
.category-manage .cat-links a:before {content: '\f445';}
/* アクセスアップ系 */
.cat-item-28 a:before,
.category-access-up .cat-links a:before {content: '\f107';}
/* セキュリティ系 */
.cat-item-29 a:before,
.category-security .cat-links a:before {content: '\f470';}
/* ソーシャル連携系 */
.cat-item-32 a:before,
.category-social .cat-links a:before {content: '\f221';}
/* 投稿便利系 */
.cat-item-33 a:before,
.category-useful .cat-links a:before {content: '\f461';}
/* SEO対策系 */
.cat-item-30 a:before,
.category-seo .cat-links a:before {content: '\f425';}
いいですねーアイコンフォント！ジェネリコンズ！
font系のCSSで色も変えられるし、大きさも自由自在です！
しかも無料配布とは恐れ入ります・・・ありがたや・・・