外部リンクをファビコンに置き換える記法
[. https://~~~]
参考
デフォルト
対応サイト
code:Template.css
/* テンプレ */
}
code:style.css
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
.line:not(.cursor-line) .deco-\. a.link:is(href$=".pdf")::before { }
}
}
}
}
}
}
}
}
}
ベース
URLの最初の1文字だけを残し(ほかはdisplay: none;)、見た目とクリック判定の大きさを合わせる
文字を透明にして、上からアイコンを被せる
code:style.css
.line:not(.cursor-line) .deco-\. a.link span{
display: inline-block;
height: 100%;
}
.line:not(.cursor-line) .deco-\. a.link span:nth-of-type(1){
width: 34px;
}
.line:not(.cursor-line) .deco-\. a.link span:not(:nth-of-type(1)){
display:none;
}
.line:not(.cursor-line) .deco-\. a.link{
position: relative;
display: inline-block;
text-decoration: none;
color: transparent;
height: 23px;
width: 34px;
border-radius: 3px;
margin-left: 3px;
margin-right: 3px;
transform: translateY(3px);
}
.line:not(.cursor-line) .deco-\. a.link::before{
content: "";
display: inline-block;
position: absolute;
width: 15px;
height: 15px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-size: contain;
pointer-events: none;
background-repeat: no-repeat;
border-radius: 2px;
}
/* ホバーアニメーション */
.line:not(.cursor-line) .deco-\. a.link::after{
content: "";
position: absolute;
top: 0;
left: 0;
display: inline-block;
outline-offset: -1px;
border-radius: 3px;
height: 100%;
width: 100%;
z-index: -1;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
.line:not(.cursor-line) .deco-\. a.link:hover::after{
}
a.linkに直接アウトラインをかけると、リンクを押している間、アウトラインを強制的に0にされてしまう
ので疑似要素でアウトラインをかける
ホバーで注釈をつける
code:style.csss
.line:not(.cursor-line) .deco-\.{position: relative;}
.line:not(.cursor-line) .deco-\.:has(.link) > a.link::after{
content: "新しいタブで開く";
position: absolute;
display: block;
width: 90px;
top: -40px;
left: 50%;
transform: translateX(-50%);
padding: 0 3px;
font-size: 0.6em;
font-weight: bold;
letter-spacing: -0.1em;
text-align: center;
pointer-events: none;
opacity: 0;
border-radius: 4px;
transition: all 300ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0.1s;
}
.line:not(.cursor-line) .deco-\.:has(.link) > a.link:hover::after{
opacity: 1;
transition-delay: 0.5s;
}
.line:not(.cursor-line) .deco-\.:has(.link) > a.link::before{
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
top: -12px;
left: 50%;
transform: translateX(-50%);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
opacity: 0;
transition: all 300ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0.1s;
}
.line:not(.cursor-line) .deco-\.:has(.link)> a.link:hover::before{
opacity: 1;
transition-delay: 0.5s;
}
ダークモード
code:style.css
@media (prefers-color-scheme: dark){
.line:not(.cursor-line) .deco-\. a.link{
}
.line:not(.cursor-line) .deco-\. a.link::before{
filter: saturate(1.2) brightness(0.8);
}
.line:not(.cursor-line) .deco-\. a.link::after{
}
.line:not(.cursor-line) .deco-\. a.link:hover::after{
}
}
埋まっちゃってるwogikaze.icon
めちゃめちゃ作りかけですねnomadoor.icon
なんとかしてなんとかします！
done
GJ!!!wogikaze.icon
[link]でもこうなるようにはできない？wogikaze.icon
そこまで手間でもないからいいか
確かに！nomadoor.icon
と思ったけれど、[link]と[link あいう]を区別する方法がないのか
編集するときにurlが出てきて全体が一気に右にずれるのをなんとか解消できたらやりたいnomadoor.icon
Scrapboxの動作的に仕方がないのだけど、うまく押せなかったりしてあまりUXが良くないの改善したいnomadoor.icon
クリック判定がおかしかった
1文字目をinline-blockにして形を見た目の四角形と同じにした
Scrapboxのせいじゃなかった、すんません！
https://gyazo.com/81c2e470b9f1f3beb00eab068493bb11https://gyazo.com/9f3a14af6275d861ef71716dc88913a0https://gyazo.com/17cc0be9da3b8b1ead194a0f7c31ccab
;){kind=link}
;){kind=link}
;){kind=link}