Twenty Fourteenに標準装備されているWEBフォント(アイコン文字)のGenericonsをカテゴリのリンクに表示してみた!

※こちらの記事は当ブログがTwentyFourteenを利用していた時に書いたものです。

以前はカテゴリのリンクをフキダシ(矢印)風にしていましたが、結局カテゴリを細分化することにしました。

icons-css

プラグイン
 SEO対策系:スラッグ>seo
 アクセスアップ系:スラッグ>access-up
 セキュリティ系:スラッグ>security
 ソーシャル連携系:スラッグ>social
 問合せ系:スラッグ>inquiry
 投稿便利系:スラッグ>useful
 管理系:スラッグ>manage

そのため、全てを色分けをしてわちゃわちゃするのがイヤなので、せっかくデフォルトで使われてるgenericonsのアイコン文字を使ってリンクにアイコンを配置することにしました。

テーマTwentyFourteenでは、
wp-content/themes/twentyfourteen
のテーマフォルダの中に「genericons」フォルダがあり、そのフォントを利用して、画像のようなアイコンフォントを出力しています。

genericons

これを、カテゴリ「プラグイン」の子カテゴリーリンクに反映したいと思います。

genericons.com

サイト名
genericons.com
サイトリンク

まず、どうやって表示されてるの?

ちょっとコメントのアイコン文字部分を解析してみました。
chromeで「コメントをどうぞ」を右クリック、「要素を検証」してみます。

genericons01

そして、「:before」をクリックしてみましょう。

genericons02

Genericonsのアイコンフォントが使用されているのを確認できます。
つまり、「(バックスラッシュ)f300」がフキダシのアイコンフォントですね。
genericons.comでも確認できます。http://genericons.com/#commentにアクセスして、「Copy CSS」をクリックすれば確認できます。

genericons03

カテゴリリンク内の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で色も変えられるし、大きさも自由自在です!

しかも無料配布とは恐れ入ります・・・ありがたや・・・

Coments

コメントを残す

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