blogPosts/external-link-icon.md at a62e4c68d117656eda1b305c1c84d29e8f0f49dd

moris/blogPosts

Fork 0

moris a62e4c68d1 リンクの修正

2025-03-27 12:31:25 +09:00

6.0 KiB

Raw Blame History

title

description

thumbnail

emoji

date

要件

外部リンクにのみアイコンをつける
訪問済みのリンクは色を変える
とにかく軽量 → Font Awesomeなどのwebフォント、JavaScript等は使わずにhtml&CSSのみで実装

表示するアイコン

Google Material SymbolsのOpen In Newというアイコンを使いました。人力圧縮でオリジナルの300Bから190Bまで圧縮されています。

<svg viewBox="0 0 99 99" xmlns="http://www.w3.org/2000/svg"><path d="M11,99C5,99 0,94 0,88V11C0,5 5,0 11,0H50V11H11V88H88V50H99V88c0 6-5 11-11 11ZM38 69l-8-8l50-50H60V0H99V39H88V19Z"/></svg>

オリジナル: https://fonts.google.com/icons?selected=Material+Symbols+Outlined:open_in_new:FILL@0;wght@400;GRAD@0;opsz@24

外部リンクに一致するCSSセレクタ

このブログはrehype-external-linksというパッケージで外部リンクにtarget="_blank"を設定しています。大体のサイトで同じだと思うので、これを属性セレクタで一致させます。正確にはtarget="_blank"は新規タブで開くことを意味しているのでサイト内リンクの可能性もあるのですが、アイコンの名前もOpen In Newですし、まぁいいでしょう。

a[target="_blank"] {
    /* ここにスタイル */
}

アイコン画像をつける

CSSセレクタは完成したのでアイコンを付けましょう。これは::after擬似要素一択ですね、contentに<svg>要素を入れて.....

😭😭😭

どうやらcontentプロパティにhtml要素を入れることはできないようです。 https://developer.mozilla.org/ja/docs/Web/CSS/content

しかしurl()で画像を入れることはできるようなのでdataURLでsvgを入れると

成功しました✨

ですが実はこれ、2つ目の要件「訪問済みのリンクは色を変える」を達成できません。(詳細は後述) そのため、試行錯誤をした結果background-colorを設定してmask-imageで切り取ることにしました。

a[target="_blank"]::after {
    background-color: blue;
    mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 99 99" xmlns="http://www.w3.org/2000/svg"></svg>');
}

訪問済みのリンクで色を変える

当初、CSSで訪問済みの要素に一致させるにはそう:visited！ということで、こんな感じのCSSにしたのですが、全て未訪問として表示されてしまいました。

a::after {
    content: url('data:image/svg+xml;utf-8,<svg fill="未訪問のときの色"></svg>');
}

a:visited::after {
    content: url('data:image/svg+xml;utf-8,<svg fill="訪問済みのときの色"></svg>');
    /* 効かない */
}

MDNによると、プライバシー保護のため:visited擬似クラスで適用されたスタイルには制限があり、利用可能なプロパティは一部の色に関する物のみのようです。 https://developer.mozilla.org/ja/docs/Web/CSS/:visited#プライバシー上の制約

colorプロパティは使えるのでFont Awesomeなどのアイコンフォントなら:visitedで色を変えることができますが、要件の通りwebフォントはナシなので却下。また、fillプロパティも使えますがbackground-imageなどで設定されたsvgには適用できないのでこれも却下。

そのため先述のbackground-colorで背景色を設定してmask-imageで切り取るという方針になったのです。

a[target="_blank"]::after {
    content: '';
    mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 99 99" xmlns="http://www.w3.org/2000/svg"></svg>');
    background-color: blue;
}
a[target="_blank"]:visited::after {
    background-color: purple
}

実装

これで必要なものは揃ったので微調整して完成です✨

a {
    color: blue;
}
a:visited {
    color: purple;
}
a[target="_blank"]::after {
    content: '';
    display: inline-block;
    width: .5em;
    height: .5em;
    margin-inline: 2px;
    background-color: currentColor;
    mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 99 99" xmlns="http://www.w3.org/2000/svg"><path d="M11,99C5,99 0,94 0,88V11C0,5 5,0 11,0H50V11H11V88H88V50H99V88c0 6-5 11-11 11ZM38 69l-8-8l50-50H60V0H99V39H88V19Z"/></svg>');
    vertical-align: super; /* テキストよりちょっと上に配置 */
}

currentColor!?

突然出てきたcurrentColorですが、これはcolorプロパティの値を表すキーワード値で、要するに文字と一緒の色にするよってことです。「テキストとアイコンで別々に色を設定」ではなく「テキストで色を設定し、アイコンはcurrentColorで追従」とすることでちょっとだけシンプルに記述できます。

このcurrentColor、borderやsvgのfillなどに便利なのでぜひ覚えておいてください。

6.0 KiB Raw Blame History Unescape Escape

要件