開発 デザイン

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

初期状態↓

やり方

FontAwesomeのアイコンを消す

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

付箋に色を付ける

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

タグごとに色を分ける

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

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

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

まとめて色を変える

 

-開発, デザイン
-

© 2021 Studio Yamimin Powered by AFFINGER5