下線に色をつけるUserCSS
動機
3色ボールペンみたいに色をつけて下線をいれたい
重要な箇所には赤のアンダーライン、面白いと思った箇所には緑のアンダーライン、というように、目的によってアンダーラインの色を使い分ける
code:style.css
.deco-\_ {
text-decoration: underline solid ; /* アンダーライン */
text-decoration-thickness: 2px; /* 線の太さ */
text-decoration-color: var(--page-text-color, black); /* */
text-decoration-color: lightblue;/* */
& > span:nth-child(1) > a { display: none; }
}
text-decoration-color: red;/* */
& > span:nth-child(1) > a { display: none; }
}
text-decoration-color: green;/* */
& > span:nth-child(1) > a { display: none; }
}
text-decoration-color: yellow;/* */
text-decoration-thickness: 4px; /* 線の太さ */
& > span:nth-child(1) > a { display: none; }
}
text-decoration-color: black;/* */
& > span:nth-child(1) > a { display: none; }
}
}
んー、下線記法はHTMLがなんか特殊で、DOMにstyleが直接書かれているのよね…who.icon
code:下線の.HTML
<span style="text-decoration: underline;">
<span class="deco-_">
<...>
</span>
</span>
ああいや、元のままでもとくに不都合ないのか
自分は自分のProjectで下線を波線に変えようとして引っかかったんですよね
ので簡単にオン・オフできるようにUserCSSをあらかじめ設置しておこう
あとテキストのロールと色分けの関係性は自明でないという問題がある 対処としては、リンク名や文字装飾の意図がセマンティックに伝えられるようにあのUserCSSを改変すること 仮に重要な箇所には赤のアンダーラインを引くのだったら赤線が引かれるリンク名を[important]にするとか
::before/::after疑似要素で別途記号を表示するとかですね
関連ページリストの 2-hop link を無効にするUserCSS
code:style.css
code:disabled
.related-page-list .links-2-hop:has(
) {
display: none !important;
}
テスト suto3.icon テスト
red テスト suto3.icon テストテスト 適用例
https://gyazo.com/7835d821e7c0eec412260c43895ab119
UserCSS.icon