/suto3/UserCSS:リンクを派手にする

generated at 2/11/2025, 10:13:52 AM
UserCSS:リンクを派手にする
実は、そんなに派手 ではない
stylexx.css body{
  --page-link-color: #6e8af3; /* */
  --page-link-hover-color: #3f57b1;
  --page-link-color-cursor-line: #8159c3;
  --empty-page-link-color: #fb7476;
  --empty-page-link-hover-color: #cf554d;
  
  --marker-color: var(--accent-color, yellow); /* 強調色 */
}

style.css body{
  --page-link-color: rgba(20,20,64,0.8);
  --page-link-hover-color: rgba(10,10,255,0.9);
  --page-link-color-cursor-line: rgba(64,20,64,0.8);
  --empty-page-link-color: rgba(64,20,20,0.8);
  --empty-page-link-hover-color: rgba(255,10,10,0.9);
  
  --marker-color: var(--accent-color, yellow); /* 強調色 */
}

UserCSS:キーワード応じてページリストの背景色を変更する

FontAwesome を使って外部リンクをわかりやすくする → /scrasobox/settings#59c9c7c996b9040000063c35
style.css /* External links */
.line a.link:not(.icon)::after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  /* content: ' \f35d'; /* */
  content: ' \f360';
  display: inline-block;
}

ページリンク
style.cssa.link, a[type="link"] {
  /* --page-link-color: green; /* */
  color: var(--page-link-color) ;
　　　　font-weight: bold;
　　　　/* background-color: pink; */
  --marker-color: var(--page-link-color, yellow);　/* */
}

空ページへのリンク
style.cssa[type="link"].empty-page-link {
  /* --empty-page-link-color: green; /* */
  color: var(--empty-page-link-color) ;
  --marker-color: var(--empty-page-link-color, yellow);　/* */
}

stylexx.cssa[type="link"].empty-page-link {
  /* --empty-page-link-color: green; /* */
  color: var(--text-color) ;
  background-color: var(--empty-page-link-color) ;
}

hover時に文字を大きくする
style.css.line a:hover {
	font-size:1.2em;
	font-weight: bold;
}

hover時に下線を引く
stylexx.css.line a:hover {
	text-decoration: underline;
}

hover時に下線を引く
stylexx.css.line a:hover {
  /*--marker-color: var(--page-link-color, yellow);　/* */
  /*--marker-color: var(--accent-color, yellow); /* 強調色 */
  background: linear-gradient( to right,
                               var(--marker-color),
                               transparent 25%,
                               transparent 75%,
                               var(--marker-color)
                              ) 0% center / 400% auto ; /* グラデーション */
  padding: 0.1em 0.2em 0.1em 0.2em;
  animation: marker 10s linear infinite;
  animation-direction: reverse;
}

stylexx.cssa[type="link"].page-link, a[type="hashTag"].page-link, .line a.link {
  /* --page-link-color: green;*/
  color: var(--page-link-color) ;
  /* background-color: pink; */
}
a[type="link"].empty-page-link, a[type="hashTag"].empty-page-link {
  /* color: #b45332 ; */
  color: var(--empty-page-link-color) ;
}

stylexx.cssa[type="link"].page-link, a[type="hashTag"].page-link, .line a.link {
  color: #1d5bf4 !important;
}
a[type="link"].empty-page-link, a[type="hashTag"].empty-page-link {
  color: #b45332 !important;
}

stylexx.cssa,
.page-list-item .description .link {
	color: #8f8f8f;
}

a:hover, a:active {
	color: #3068ff ;
}

.line a.empty-page-link {
	color: #000 ;
}

.line a.empty-page-link:hover  {
	color: #2e2e2e ;
}

stylexx.css.grid li.relation-label.links .arrow {
  border-left-color: #fff;
}
.grid li.relation-label.links a {
  background-color: #FFF;
}
.grid li.relation-label.links a .title {
  color: #333;
}
.grid li.relation-label a {
  color: #333
}

影文字
stylexx.cssa.link, a[type="link"] {
  color: var(--page-link-color) ;
  /* text-shadow: 1px 1px var(--accent-color); /* */
  text-shadow: 1px 1px var(--main-color);
}

ふち取り
stylexx.cssa.link, a[type="link"] {
  /* --page-link-color: green; /* */
  color: var(--page-link-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);
}

砂文字
stylexx.cssa.link, a[type="link"] {
  /* --page-link-color: green; /* */
  color: var(--page-link-color) ;
  /* text-shadow: 0 0 9px var(--accent-color); /* */
  text-shadow: 0 0 9px var(--main-color); /* */
}

UserCSS:ハッシュタグ
programming-notes - /programming-notes/リンク・空リンクの色を変えるUserCSS

UserCSS:リンク
Scrapbox:リンク