/suto3/UserCSS:ハッシュタグ

generated at 11/17/2024, 10:57:15 AM
UserCSS:ハッシュタグ
Scrapbox:ハッシュタグ
UserCSS:hashtag
ハッシュタグの表示のカスタマイズ
UserCSS:ハッシュタグ不可視
UserCSS:ハッシュタググラデーション

style.css  :root {
   --main-color: DarkGray;      /* 主調色 */
   --assort-color: White;       /* 従属色 */
   --base-color: WhiteSmoke;    /* 背景色 */
   --accent-color: BlueViolet; /* 強調色 */
}

共通の設定

style.css a[type="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;
}

シンプル
stylexx.css a[type="hashTag"] {
  border:1px solid currentColor;
}

影文字
stylexx.css a[type="hashTag"] {
  /* テキストシャドウ */
  text-shadow: 1px 1px var(--accent-color, #CCC);
  
  /* ボックスシャドウ */
  box-shadow: 1px 1px var(--accent-color);
}

縁取り + 影文字
stylexx.css a[type="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
stylexx.css a[type="hashTag"] {
  /* テキストシャドウ */
  text-shadow: 0 0 5px var(--accent-color);/* */
  
  /* ボックスシャドウ */
  box-shadow: 0px 0px 5px var(--accent-color);/* */
}

砂文字 2
stylexx.css a[type="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しない

stylexx.css  a[type="hashTag"]:not(:hover) {   
   color: var(--main-color);
   background-color: var(--assort-color);
 }

stylexx.css .line:not(.cursor-line) a[type="hashTag"]:not(:hover) {
   color: var(--main-color);
   background-color: var(--assort-color);
 }

style.css .line:not(.cursor-line) a[type="hashTag"]:not(:hover) {
   color: var(--text-color);
   background-color: var(--assort-color);
 }
a[type="hashTag"] {
  /* border:1px solid var(--text-color); /* */
  border:1px solid currentColor;
}

hover
stylexx.css  .line:not(.cursor-line) a[type="hashTag"]:hover {
   color: var(--assort-color);
   background-color: var(--main-color);
   text-shadow: none;
   /* ボックスシャドウ */
   /* box-shadow: 0px 0px 5px var(--accent-color);/* */
 }

style.css  .line:not(.cursor-line) a[type="hashTag"]:hover {
   color: var(--assort-color);
   background-color: var(--text-color);
   text-shadow: none;
 }

Photonっぽくした

stylexx.css/* ＃で始まるタグをラベル風にする */
a[type="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);
}

a[type="hashTag"]:hover {
  background-color: rgba(12, 12, 13, 0.2);
}

a[type="hashTag"]:active {
  background-color: rgba(12, 12, 13, 0.3);
}

#UserCSS-term