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

2021-01-13

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

おのです。

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

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

 

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

このCSSで一発です。

 


スポンサーリンク


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

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

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

 

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

  1. 文字・記号をつける
  2. Font Awesome4のアイコンをつける

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

 

1. 文字・記号をつける

タグの前に文字やFont Awesomeを追加することができます

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

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

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

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

 

 

2. Font Awesome4 のアイコンをつける

Font Awesome 4 のアイコンをつける

 

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

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

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

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

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

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

 

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

Font Awesome4の「Unicode」に書き換えます

≫Font Awesome 4|Icons

 

CSSを書く場所

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

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

  • 「外観」→「カスタマイズ」→「追加CSS」に書き込む。
  • 「外観」→「テーマエディター」→「style.css」に書き込む。

こういった感じです。

 

↓追加CSSはここ。

追加CSSはここ

 

↓style.cssはここ。

style.cssはここ

 

 

あわせて読みたい

 

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

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

では。

 

おすすめ≫WordPress|おしゃれでSEOに強いおすすめの有料18テーマ【厳選】

おすすめ≫アフィリエイト|やり方・始め方:初心者はまずおすすめのASPに登録

このエントリーをはてなブックマークに追加

 

 無料オンライン体験レッスン可・プログラミング学習でスキルアップ!

WebデザインやHTML、CSS、サイトカスタマイズに関するプログラミング学習は、
プログラミングのオンラインスクールCodeCampがおすすめです。

特に、初心者でもHTMLとCSSの基礎を学んでおくと、ブログやサイトのデザインカスタマイズが圧倒的に上達してスムーズにできるようになります。

無料オンライン体験レッスンが可能なので、興味のある人は受講してみるといいです。当然、完全に初めての人でも問題ありません。

やはり自分のブログやサイトのデザインを自由にコントロールスキルが身につくと、サイト運営がとても楽になます。スキルアップもできるし、とても勉強になりますよ。

≫CodeCamp

-AFFINGER・STINGER
-, , ,

© 2020 OnoCode.