バッヂになるタグ
特定のタグをバッヂ風(?)に表示するスタイルのサンプル。
MTG さとうさんと進捗確認
IDEA 土曜日の朝はカフェ飯を開拓する
表示サンプル(画像)
https://gyazo.com/f455b0e742d85681b254675eb30071ee
code:style.css
/* バッヂ風 */
.line ahref$="/MTG",
.line ahref$="/IDEA" {
display: inline-block; min-width: 3.2em; border-radius: .2em;
text-align: center; font: bolder 100%/normal Futura, Arial, sans-serif; color: #FFF }
.line ahref$="/MTG" { background-color: #08BDBD }
.line ahref$="/IDEA" { background-color: #FF9914 }
インポート構文
code:import.css
@import "https://scrapbox.io/api/code/scrasobox/バッヂになるタグ/style.css";
こんなのアイコン記法でやればいいじゃない? と思ったんだけど、アイコン記法よりタグのほうが楽だったり、ラベル幅を揃えるのもスタイルを変えるだけでよかったり、色替えできたり、そういう感じです。リンクもつながるしね!
#タグとあそぶ #UserCSS #タグスタイル展覧会
初出 2017-09-06
2017-09-14 編集時と表示時でがたつきが少なくなるように調整
2017-11-28 スタイル定義をシンプルにした
2017-11-30 フォント名を指定するようにした
2018-03-27 タグリンクのhref値が変わったぽいので対応
2018-04-01 タグリンクのhref値が変わったぽいので対応
2022-03-19 タグリンクのhref値が変わったぽいので対応