【はてなブログ-カスタマイズ】カテゴリーリンクのデザインを変更してみる（その２）（CSS対応）

ちょっと前にカテゴリーリンクのデザインを変更したのですが、またしても変更してみました。

ちょっと最近ブログカスタマイズが楽しくなってきてます。
そのうち落ち着きそうですが楽しいうちに色々と投稿してみます。

今回のデザイン変更はこちらのサイトを参考にさせて頂きました。
ありがとうございます。

参考記事

ではどんな変更をしたか書いていきます。

まずは手っ取り早く、デザイン変更前後の画像を載せます。
「変更前」「変更後（前回）」「変更後（今回）」の3つです。

こんな感じです。
今回はアイコンフォントを使用してみました。
結果的に変更前（元々のデザイン）に近くなった気がします。

ホバーのデザインはこんな感じです。
アンダーラインを引くことでリンク感を出しています。

.entry-category-link {
    text-decoration: none;
}
.entry-category-link:before {
    font-family: "blogicon";
    content: "\f04a  ";
}

.entry-category-link:hover {
    text-decoration: underline;
}

前回と同じ流れなのですみませんが省略します。前回のを見て頂ければと。
デザインの適用手順

おそらくいないとは思いますが、前回のを適用している人はその部分のCSSを消したうえで今回のCSSを適用してください。

はてなブログで適用したものです。
はてなブログ以外では試してないので、うまく動かない可能性があります。

今使っているSilenceというデザインテーマに追加でCSS適用した形となります。

他のデザインテーマを使っている方や、他にもCSSやJSを埋め込んでいる人はうまく動かない可能性がありますので、もし今回記載のCSSを適用しようとしている方はその辺りご了承ください。
※これも前回と同様です。

ということで、またしてもカテゴリーリンクのデザインを少し変更してみました。
またしれっとデザインが変わってたり戻ってたりするかもしれません。

ただ、ブログで履歴を残しているので前回の記事を参照すれば前回のデザインにすぐ戻せるのは良いですね。

HTML・CSSに関連する記事は他にも書いています。
気になる記事があればぜひ。

みやもとメモ