開発 デザイン

【WordPress】CSSで付箋風タグを作る

初期状態↓

やり方

FontAwesomeのアイコンを消す

デフォルトのタグは左側にFontAwesomeのアイコンが入っているので削除する。

付箋に色を付ける

左側に太い線を付ける(border-leftで線の太さを変える)

タグごとに色を分ける

WordPress(Cocoonだけ?)のタグは左上からtag-link-position-1tag-link-position-2……とtag-link-position-nの形式になっているので、色を変えたい番号をnth-childで指定すれば番号ごとに色を変えることができる。

例)9番目と10番目のタグの色を別々に指定する

カテゴリごとに色を分けたい時に便利

まとめて色を変える

 

  • この記事を書いた人

やみみん

FGOの考察ブログです。 妄想9割、真面目な考察が1割なので基本当たりません。 Twitter→ @yamimiin

-開発, デザイン
-

© 2021 源氏画報 Powered by AFFINGER5