UserCSS:リンクを派手にする
実は、そんなに派手 ではない
code: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); /* 強調色 */
}
code: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
code: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;
}
ページリンク
code:style.css
a.link, atype="link" {
/* --page-link-color: green; /* */
color: var(--page-link-color) ;
font-weight: bold;
/* background-color: pink; */
--marker-color: var(--page-link-color, yellow);　/* */
}
空ページへのリンク
code:style.css
atype="link".empty-page-link {
/* --empty-page-link-color: green; /* */
color: var(--empty-page-link-color) ;
--marker-color: var(--empty-page-link-color, yellow);　/* */
}
code:stylexx.css
atype="link".empty-page-link {
/* --empty-page-link-color: green; /* */
color: var(--text-color) ;
background-color: var(--empty-page-link-color) ;
}
hover時に文字を大きくする
code:style.css
.line a:hover {
font-size:1.2em;
font-weight: bold;
}
hover時に下線を引く
code:stylexx.css
.line a:hover {
text-decoration: underline;
}
hover時に下線を引く
code: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;
}
code:stylexx.css
atype="link".page-link, atype="hashTag".page-link, .line a.link {
/* --page-link-color: green;*/
color: var(--page-link-color) ;
/* background-color: pink; */
}
atype="link".empty-page-link, atype="hashTag".empty-page-link {
/* color: #b45332 ; */
color: var(--empty-page-link-color) ;
}
code:stylexx.css
atype="link".page-link, atype="hashTag".page-link, .line a.link {
color: #1d5bf4 !important;
}
atype="link".empty-page-link, atype="hashTag".empty-page-link {
color: #b45332 !important;
}
code:stylexx.css
a,
.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 ;
}
code: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
}
影文字
code:stylexx.css
a.link, atype="link" {
color: var(--page-link-color) ;
/* text-shadow: 1px 1px var(--accent-color); /* */
text-shadow: 1px 1px var(--main-color);
}
ふち取り
code:stylexx.css
a.link, atype="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);
}
砂文字
code:stylexx.css
a.link, atype="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:リンク
UserCSS.icon
https://img.shields.io/badge/UserCSS-リンクを派手にする-1572B6.svg?logo=css3&style=for-the-badge