AFFINGER・STINGER PRO｜タグクラウドの文字に飾りをつけるCSS

おのです。

Affinger5、Stinger Pro2などのシリーズで、タグクラウドの文字の前に飾りをつけるCSSです。

デフォルトではタグクラウドは文字だけですが、Font Awesomeのアイコンをつけたりしたい人もいると思います。

そこで本記事では、タグクラウドの文字の前に飾りをつけるCSSについて書きました。

このCSSで一発です。

ということで早速ですが、
Affinger5、Stinger Pro2などのシリーズで、タグクラウドの文字の前に飾りをつけるCSSです。

また今回は、
以下の2パターンの書き方について書いておきます。

タグクラウドの文字に飾りをつけるCSS

こんな感じで説明していきます。

まずはシンプルに文字、記号をつけるCSSです。

/*タグクラウドの文字の前*/
.tagcloud a::before{
  content: "#";
}

これでタグクラウドの文字の前に、記号や文字をつけられます。

「#」の部分を自分の好きな文字や記号に変えればオッケーです。

続いて、Font Awesome4のアイコンをつけるパターンです。

/*タグクラウドの文字の前*/
.tagcloud a::before {
  content: "\f02b\00a0";
  font-family: FontAwesome;
}

上記CSSで、「f02b」の部分を使いたいFont Awesome4の「Unicode」に書き換えます。

赤文字の前後は「￥」もしくは「＼」バックスラッシュです。
バックスラッシュは普通に打っても出ないので、￥で大丈夫です。

ちなみに、「00a0」の意味は半角の改行されないスペースなので、何があっても文字の横に固定されます。

通常の半角スペースには「0020」を使います。

Unicodeは、Font Awesomeのロゴ取得画面で以下の部分に書いてあります。

一応、CSSを書き込む場所を書いておきます。

ワードプレスの場合、以下の2パターンです。

こういった感じです。

↓追加CSSはここ。

↓style.cssはここ。

そんな感じで、Affinger5、Stinger Pro2などのシリーズで、タグクラウドの文字の前に飾りをつけるCSSでした。

好きなようにタグクラウドをいじってください。

では。