外部リンクをファビコンに置き換える記法
[. https://~~~] 参考
デフォルト
対応サイト
Template.css/* テンプレ */
.line:not(.cursor-line) .deco-\. a.link:is([href^="URL最初の方"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=ファビコンを使いたいURL);
} style.css.line:not(.cursor-line) .deco-\. a.link:is([href^="https://www.reddit.com"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://www.reddit.com);
}
.line:not(.cursor-line) .deco-\. a.link:is([href*="wikipedia.org"],[href^="https://en.wikipedia.org"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://ja.wikipedia.org);
}
.line:not(.cursor-line) .deco-\. a.link:is([href*="https://github.com"],[herf^="https://gist.github.com/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://github.com);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://gigazine.net"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://gigazine.net);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://note.com"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://note.com);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://huggingface.co"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://huggingface.co);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://huggingface.co/spaces"])::before {
background-image: url(https://i.gyazo.com/81c2e470b9f1f3beb00eab068493bb11.png);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://colab.research.google.com"])::before {
background-image: url(https://i.gyazo.com/9f3a14af6275d861ef71716dc88913a0.png);
}
.line:not(.cursor-line) .deco-\. a.link:is([href*="bilibili.com"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://www.bilibili.com);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://stability.ai"],[href^="https://ja.stability.ai/"],[href^="https://platform.stability.ai"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://stability.ai);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://arxiv.org"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://arxiv.org);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://openai.com"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://openai.com);
}
.line:not(.cursor-line) .deco-\. a.link:is([href*="cohere.com"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://cohere.com/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://civitai.com"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://civitai.com);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://qiita.com/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://qiita.com);
}
.line:not(.cursor-line) .deco-\. a.link:is([href*="hatenablog.com"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://hatenablog.com);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://twitter.com"],[href^="https://x.com"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://twitter.com);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://www.twitch.tv/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://www.twitch.tv/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://www.youtube.com/"],[href^="https://youtu.be"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://www.youtube.com/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://zenn.dev"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://zenn.dev/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://www.notion.so"],[href*="notion.site/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://www.notion.so/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://discord.com/"],[href^="https://discord.gg/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://discord.com/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href*="nvidia.com/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://www.nvidia.com/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href*="meta.com/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://meta.com/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://wikiwiki.jp/sd_toshiaki"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://wikiwiki.jp/sd_toshiaki);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://www.marktechpost.com/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://www.marktechpost.com/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://comfy.icu/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://comfy.icu/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href$=".pdf"])::before {
background-image: url(https://i.gyazo.com/17cc0be9da3b8b1ead194a0f7c31ccab.png);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://openart.ai/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://openart.ai/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href*="cao.go.jp/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://www.cao.go.jp/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://store.steampowered.com/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://store.steampowered.com/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://store.epicgames.com/"],[href^="https://www.epicgames.com/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://store.epicgames.com/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://drive.google.com/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://drive.google.com/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href*="fal.ai"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://fal.ai/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://play.google.com/store/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://play.google.com/store/);
}
.line:not(.cursor-line) .deco-\. a.link:is([href^="https://apps.apple.com/"])::before {
background-image: url(http://www.google.com/s2/favicons?domain=https://apps.apple.com/);
}ベース
URLの最初の1文字だけを残し(ほかはdisplay: none;)、見た目とクリック判定の大きさを合わせる
文字を透明にして、上からアイコンを被せる
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;
background: #ebf0f7;
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: "";
background-image: url(https://gyazo.com/8c65c8c1aaf9cf2c94368fbb40f63da0/max_size/400);
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: 0px solid #d8d8d8;
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{
outline: 3px solid #d8d8d8;
}a.linkに直接アウトラインをかけると、リンクを押している間、アウトラインを強制的に0にされてしまう
ので疑似要素でアウトラインをかける
ホバーで注釈をつける
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%);
color: #ebf0f7;
padding: 0 3px;
font-size: 0.6em;
font-weight: bold;
letter-spacing: -0.1em;
text-align: center;
pointer-events: none;
opacity: 0;
background-color: #282828;
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-top: 6px solid #282828;
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;
}ダークモード
style.css@media (prefers-color-scheme: dark){
.line:not(.cursor-line) .deco-\. a.link{
background: #333e4f;
}
.line:not(.cursor-line) .deco-\. a.link::before{
filter: saturate(1.2) brightness(0.8);
}
.line:not(.cursor-line) .deco-\. a.link::after{
outline: 2px solid #99421300;
}
.line:not(.cursor-line) .deco-\. a.link:hover::after{
outline: 2px solid #994213;
}
}埋まっちゃってる
めちゃめちゃ作りかけですね
なんとかしてなんとかします！
done
GJ!!!
[link] でもこうなるようにはできない？そこまで手間でもないからいいか
確かに！
と思ったけれど、
[link] と [link あいう] を区別する方法がないのか編集するときにurlが出てきて全体が一気に右にずれるのをなんとか解消できたらやりたい
Scrapboxの動作的に仕方がないのだけど、うまく押せなかったりしてあまりUXが良くないの改善したい
クリック判定がおかしかった
1文字目をinline-blockにして形を見た目の四角形と同じにした
Scrapboxのせいじゃなかった、すんません！
