UserCSS:ハッシュタグ
Scrapbox:ハッシュタグ
UserCSS:hashtag
ハッシュタグの表示のカスタマイズ
UserCSS:ハッシュタグ不可視
UserCSS:ハッシュタググラデーション
code:style.css
:root {
--main-color: DarkGray; /* 主調色 */
--assort-color: White; /* 従属色 */
--base-color: WhiteSmoke; /* 背景色 */
--accent-color: BlueViolet; /* 強調色 */
}
共通の設定
code:style.css
atype="hashTag" {
color: var(--assort-color);
background-color: var(--main-color);
padding: 4px 6px;
border-radius: 4px;
/* フォント指定 */
font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
font-size: 0.9em;
/* フォントを太字にする */
font-weight: bold;
}
シンプル
code:stylexx.css
atype="hashTag" {
border:1px solid currentColor;
}
影文字
code:stylexx.css
atype="hashTag" {
/* テキストシャドウ */
text-shadow: 1px 1px var(--accent-color, #CCC);
/* ボックスシャドウ */
box-shadow: 1px 1px var(--accent-color);
}
縁取り + 影文字
code:stylexx.css
atype="hashTag" {
/* テキストシャドウ */
text-shadow: 1px 1px 0px var(--assort-color, #EEE),
1px -1px 0px var(--assort-color, #EEE),
-1px 1px 0px var(--assort-color, #EEE),
-1px -1px 0px var(--assort-color, #EEE),
2px 2px 0px var(--accent-color, #CCC);
/* ボックスシャドウ */
box-shadow: 2px 2px var(--accent-color);
}
砂文字 1
code:stylexx.css
atype="hashTag" {
/* テキストシャドウ */
text-shadow: 0 0 5px var(--accent-color);/* */
/* ボックスシャドウ */
box-shadow: 0px 0px 5px var(--accent-color);/* */
}
砂文字 2
code:stylexx.css
atype="hashTag" {
/* テキストシャドウ */
/* text-shadow: 0 0 5px var(--accent-color);/* */
text-shadow: 1px 1px 0px var(--assort-color, #EEE),
1px -1px 0px var(--assort-color, #EEE),
-1px 1px 0px var(--assort-color, #EEE),
-1px -1px 0px var(--assort-color, #EEE),
0px 0px 5px var(--main-color, #CCC);
/* ボックスシャドウ */
/* box-shadow: 0px 0px 5px var(--main-color);/* */
box-shadow: 0px 0px 5px currentColor;/* */
}
hoverしない
code:stylexx.css
atype="hashTag":not(:hover) {
color: var(--main-color);
background-color: var(--assort-color);
}
code:stylexx.css
.line:not(.cursor-line) atype="hashTag":not(:hover) {
color: var(--main-color);
background-color: var(--assort-color);
}
code:style.css
.line:not(.cursor-line) atype="hashTag":not(:hover) {
color: var(--text-color);
background-color: var(--assort-color);
}
atype="hashTag" {
/* border:1px solid var(--text-color); /* */
border:1px solid currentColor;
}
hover
code:stylexx.css
.line:not(.cursor-line) atype="hashTag":hover {
color: var(--assort-color);
background-color: var(--main-color);
text-shadow: none;
/* ボックスシャドウ */
/* box-shadow: 0px 0px 5px var(--accent-color);/* */
}
code:style.css
.line:not(.cursor-line) atype="hashTag":hover {
color: var(--assort-color);
background-color: var(--text-color);
text-shadow: none;
}
Photonっぽくした
code:stylexx.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag" {
display: inline-block;
margin: 4px;
font-size: 14px;
height: 32px;
width: auto;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 2px;
border-style: none;
color: #0c0c0d !important;
background-color: rgba(12, 12, 13, 0.1);
}
atype="hashTag":hover {
background-color: rgba(12, 12, 13, 0.2);
}
atype="hashTag":active {
background-color: rgba(12, 12, 13, 0.3);
}
UserCSS.icon
#UserCSS-term
https://img.shields.io/badge/UserCSS-ハッシュタグ-1572B6.svg?logo=css3&style=for-the-badge