以下のように特定サイトの[[外部リンク]]に対してロゴをつける方法。 ![[Pasted image 20211009192006.png]] [[CSS]]で`content`に指定する。 ```css /* 特殊URLのprefix絵文字 */ .external-link { word-break: break-all; } .external-link::before { display: inline-block; filter: invert(1) hue-rotate(180deg); width: 16px; margin-right: 5px; } .external-link[href*="github.com"]::before { content: url(https://simpleicons.org/icons/github.svg); } ``` アイコンの[[URL]]は[[Simple Icons]]を利用している。デフォルトではLightテーマに即したカラーとなっているため、`external-link::before`に`filter`を指定して色を反転させている。 `github.com`以外でも、[[URL]]の部分一致条件から指定できる。ただし、この方法では色指定することは困難[^1]。個人的には色をつける必要性がなかったため問題としていないが、必要な場合は以下のページの[[Font Awesome]]を使った方法が参考になる。 - [Obsidianの外部リンクをFontAwesomeで装飾する方法 \- 🐶 PADAone's Public Notes \- Obsidian Publish](https://publish.obsidian.md/ankiyorihajimeyo/Publish/Obsidian%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/Obsidian%E3%81%AE%E5%A4%96%E9%83%A8%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92FontAwesome%E3%81%A7%E8%A3%85%E9%A3%BE%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95) ## アイコン画像ごと[[CSS]]に埋め込む 先の方法では`url`で指定したアクセス先に[[SVG]]ファイルを取得しにいく。この方法には2つデメリットがある。 - アクセス先[[URL]]からレスポンスがあるまで表示ラグが発生する - 2回目以降はしばらくキャッシュが効くのでクリティカルではない - [[URL]]が提供されていない[[SVG]]画像を使えない 表示ラグをなくしてあらゆる[[SVG]]を使うには、`url`に[[Base64]]エンコードされた[[SVG]]の[[XML]]を指定すればいい。 ```css .external-link[href*="github.com"]::before { content: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+R2l0SHViPC90aXRsZT48cGF0aCBkPSJNMTIgLjI5N2MtNi42MyAwLTEyIDUuMzczLTEyIDEyIDAgNS4zMDMgMy40MzggOS44IDguMjA1IDExLjM4NS42LjExMy44Mi0uMjU4LjgyLS41NzcgMC0uMjg1LS4wMS0xLjA0LS4wMTUtMi4wNC0zLjMzOC43MjQtNC4wNDItMS42MS00LjA0Mi0xLjYxQzQuNDIyIDE4LjA3IDMuNjMzIDE3LjcgMy42MzMgMTcuN2MtMS4wODctLjc0NC4wODQtLjcyOS4wODQtLjcyOSAxLjIwNS4wODQgMS44MzggMS4yMzYgMS44MzggMS4yMzYgMS4wNyAxLjgzNSAyLjgwOSAxLjMwNSAzLjQ5NS45OTguMTA4LS43NzYuNDE3LTEuMzA1Ljc2LTEuNjA1LTIuNjY1LS4zLTUuNDY2LTEuMzMyLTUuNDY2LTUuOTMgMC0xLjMxLjQ2NS0yLjM4IDEuMjM1LTMuMjItLjEzNS0uMzAzLS41NC0xLjUyMy4xMDUtMy4xNzYgMCAwIDEuMDA1LS4zMjIgMy4zIDEuMjMuOTYtLjI2NyAxLjk4LS4zOTkgMy0uNDA1IDEuMDIuMDA2IDIuMDQuMTM4IDMgLjQwNSAyLjI4LTEuNTUyIDMuMjg1LTEuMjMgMy4yODUtMS4yMy42NDUgMS42NTMuMjQgMi44NzMuMTIgMy4xNzYuNzY1Ljg0IDEuMjMgMS45MSAxLjIzIDMuMjIgMCA0LjYxLTIuODA1IDUuNjI1LTUuNDc1IDUuOTIuNDIuMzYuODEgMS4wOTYuODEgMi4yMiAwIDEuNjA2LS4wMTUgMi44OTYtLjAxNSAzLjI4NiAwIC4zMTUuMjEuNjkuODI1LjU3QzIwLjU2NSAyMi4wOTIgMjQgMTcuNTkyIDI0IDEyLjI5N2MwLTYuNjI3LTUuMzczLTEyLTEyLTEyIi8+PC9zdmc+"); } ``` デメリットは以下。 - [[CSS]]サイズが増える - 数にもよるがせいぜい数百kbで、二度目は[[CSS]]がキャッシュされるからクリティカルではない - ロゴが変わった時動的に変更できない - [[CSS]]を1箇所変えるだけなので手間は大したことない [^1]: `filter`を使えばできないことはない