Qiita 記事に外部リンク記号を挿入したい
Markdown で記事を書く際には、しばしば外部リンクとして四角形と右上矢印で構成された記号が利用される。
例えば、Qiita の利用規約のページを開くと見ることが出来る。
で囲った記号のこと。
このような記号は Unicode に存在せず、Qiita からユーザー向けには提供されていない。
したがって、適当に用意する必要がある。本記事では、この記号をどうにかして用意してみたい。
■ 文字を利用
右上を指す矢印を [] で囲うことで、それっぽい記号を用意することが出来る。
右上を指す矢印は次のようなものを見つけることが出来た。ただし、端末によっては表示できない文字が含まれていることに注意しておきたい。（Unicode のバージョンに由来する）
| 文字 | Unicode 名 | Unicode | 数値文字参照 |
|---|---|---|---|
↗ |
NORTH EAST ARROW | U+2197 |
↗ |
⭧ |
NORTH EAST TRIANGLE-HEADED ARROW | U+2B67 |
⭧ |
🡕 |
NORTH EAST SANS-SERIF ARROW | U+1F855 |
🡕 |
🡥 |
WIDE-HEADED NORTH EAST LIGHT BARB ARROW | U+1F865 |
🡥 |
🡭 |
WIDE-HEADED NORTH EAST BARB ARROW | U+1F86D |
🡭 |
🡵 |
WIDE-HEADED NORTH EAST MEDIUM BARB ARROW | U+1F875 |
🡵 |
🡽 |
WIDE-HEADED NORTH EAST HEAVY BARB ARROW | U+1F87D |
🡽 |
🢅 |
WIDE-HEADED NORTH EAST VERY HEAVY BARB ARROW | U+1F885 |
🢅 |
⭷ |
NORTH EAST TRIANGLE-HEADED ARROW TO BAR | U+2B77 |
⭷ |
次のように利用する。
<!-- Example -->
Qiita [[↗]](https://qiita.com/) で検索する。
Qiita [↗] で検索する。
もう少しイイ感じにしたい場合は、<sup> タグを使って右上に上げることも出来る。
<!-- Example -->
Qiita <sup>[[↗]](https://qiita.com/)</sup> で検索する。
Qiita [↗] で検索する。
あるいは、次のような記号であっても良いだろう。
| 文字 | Unicode 名 | Unicode | 数値文字参照 |
|---|---|---|---|
⧉ |
TWO JOINED SQUARES | U+29C9 |
⧉ |
🗅 |
EMPTY NOTE | U+1F5C5 |
🗅 |
↪ |
RIGHTWARDS ARROW WITH HOOK | U+21AA |
↪ |
<!-- Example -->
Qiita [⧉](https://qiita.com/) で検索する。
Qiita <sup>[⧉](https://qiita.com/)</sup> で検索する。
■ 絵文字を利用
ここでの絵文字とは Unicode 絵文字ではなく、: で囲うことで生成される絵文字を指す。
Qiita では絵文字だけにリンクを埋め込むことが出来る。ただし、他のパーサでは利用できるとは限らないことに注意が必要。
| Shortcode | Reference |
|---|---|
arrow_upper_right |
 North East Arrow Emoji |
以下のように利用する。しかしながら、少し外部リンクとして目立ちすぎているようにも思う。また、<sup> タグはほとんど効かない。
<!-- Example -->
Qiita [:arrow_upper_right:](https://qiita.com/) で検索する。
Qiita <sup>[:arrow_upper_right:](https://qiita.com/)</sup> で検索する。
Qiita で検索する。
Qiita で検索する。
絵文字を利用した別の方法として、リンクと絵文字を分離して書くこともある。この方法の方が一般的かも知れない。この際には、次のような絵文字を利用する。
| Shortcode | Reference |
|---|---|
link |
 Link Symbol Emoji |
globe_with_meridians |
 Globe with Meridians Emoji |
<!-- Example -->
Qiita は次のリンクからアクセスすることが出来る。
:link: https://qiita.com/
Qiita は次のリンクからアクセスすることが出来る。
このようにする場合は URL を生で挿入してリンクカードにした方が見やすい場合もある。ただし、リストや表内などではリンクカードは生成されない。
■ 画像を利用
この記事で利用している外部リンク記号の画像は Icons8 のフリーアイコンを利用しています。ライセンスに注意してください。
External Link icon by Icons8
▽ 画像をアップロード
SVG は挿入できないため、PNG で作成する必要がある。
外部リンクの画像をアップロードして文書中に挿入すれば良いだろう。例えば、次のような画像を作成しアップロードしてみた。背景を透過し、背景が暗い場合にも対応できるようにした。
次のように利用する。文書中で利用することを思えば、参照リンクにしておく方が良いだろう。
<!-- Example -->
Qiita [![ELS]][url] で検索する。
[url]: https://qiita.com/
[ELS]: https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590705/8cc06aef-64a1-6ce3-1866-e106ed134295.png
Qiita で検索する。
ただし、次のようなことが問題になる。
- 文章と画像の上下位置が大きくずれる
- リンクを踏んだことがあるかどうかは判別できない
これは HTML タグを利用しても同じ結果を得る。
▽ base64
PNG や SVG を base64 に変換して、画像をアップロードせずに表示することも考えた。しかし、Qiita では base64 を利用することは出来ない。これは、GitHub でもダメらしい。
ちなみに、以下のサービスで base64 に変換できる。
▽ Shields.io
Shields.io は SVG 形式で生成されるバッジサービス。よく GitHub の README に利用されている。
Qiita では Shields.io で生成される SVG を貼り付けることが出来る。また、このサービスでは base64 を利用してカスタムロゴを挿入することが出来る。
次のように利用する。
<!-- Example -->
Qiita [![shields_ELS]][url] で検索する。
[url]: https://qiita.com/
[shields_ELS]: https://img.shields.io/badge/-ffffff.svg?style=flat-square&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiPjxnIGlkPSJzdXJmYWNlMTg5ODM2MzAiPjxwYXRoIHN0eWxlPSIgc3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87ZmlsbDpyZ2IoNS44ODIzNTMlLDI5LjgwMzkyMyUsNTAuNTg4MjM4JSk7ZmlsbC1vcGFjaXR5OjE7IiBkPSJNIDQ0Ljg2MzI4MSAwLjYwNTQ2OSBDIDQ0Ljc2OTUzMSAwLjYwOTM3NSA0NC42Nzk2ODggMC42MTcxODggNDQuNTg5ODQ0IDAuNjI4OTA2IEwgMjguOTIxODc1IDAuNjI4OTA2IEMgMjguMDMxMjUgMC42MTcxODggMjcuMjA3MDMxIDEuMDgyMDMxIDI2Ljc2MTcxOSAxLjg1MTU2MiBDIDI2LjMxMjUgMi42MTcxODggMjYuMzEyNSAzLjU2MjUgMjYuNzYxNzE5IDQuMzMyMDMxIEMgMjcuMjA3MDMxIDUuMDk3NjU2IDI4LjAzMTI1IDUuNTYyNSAyOC45MjE4NzUgNS41NTA3ODEgTCAzOC45NzI2NTYgNS41NTA3ODEgTCAyMi4yNjE3MTkgMjIuMjYxNzE5IEMgMjEuNjE3MTg4IDIyLjg3ODkwNiAyMS4zNTkzNzUgMjMuNzkyOTY5IDIxLjU4MjAzMSAyNC42NTYyNSBDIDIxLjgwODU5NCAyNS41MTk1MzEgMjIuNDgwNDY5IDI2LjE5MTQwNiAyMy4zNDM3NSAyNi40MTc5NjkgQyAyNC4yMDcwMzEgMjYuNjQwNjI1IDI1LjEyMTA5NCAyNi4zODI4MTIgMjUuNzM4MjgxIDI1LjczODI4MSBMIDQyLjQ0OTIxOSA5LjAyNzM0NCBMIDQyLjQ0OTIxOSAxOS4wNzgxMjUgQyA0Mi40Mzc1IDE5Ljk2ODc1IDQyLjkwMjM0NCAyMC43OTI5NjkgNDMuNjY3OTY5IDIxLjIzODI4MSBDIDQ0LjQzNzUgMjEuNjg3NSA0NS4zODI4MTIgMjEuNjg3NSA0Ni4xNDg0MzggMjEuMjM4MjgxIEMgNDYuOTE3OTY5IDIwLjc5Mjk2OSA0Ny4zODI4MTIgMTkuOTY4NzUgNDcuMzcxMDk0IDE5LjA3ODEyNSBMIDQ3LjM3MTA5NCAzLjM5NDUzMSBDIDQ3LjQ2NDg0NCAyLjY3NTc4MSA0Ny4yNDIxODggMS45NTcwMzEgNDYuNzYxNzE5IDEuNDE3OTY5IEMgNDYuMjc3MzQ0IDAuODgyODEyIDQ1LjU4MjAzMSAwLjU4NTkzOCA0NC44NjMyODEgMC42MDU0NjkgWiBNIDkuODU1NDY5IDQuMzIwMzEyIEMgNC43ODkwNjIgNC4zMjAzMTIgMC42Mjg5MDYgOC40ODA0NjkgMC42Mjg5MDYgMTMuNTQ2ODc1IEwgMC42Mjg5MDYgMzguMTQ0NTMxIEMgMC42Mjg5MDYgNDMuMjEwOTM4IDQuNzg5MDYyIDQ3LjM3MTA5NCA5Ljg1NTQ2OSA0Ny4zNzEwOTQgTCAzNC40NTMxMjUgNDcuMzcxMDk0IEMgMzkuNTE5NTMxIDQ3LjM3MTA5NCA0My42Nzk2ODggNDMuMjEwOTM4IDQzLjY3OTY4OCAzOC4xNDQ1MzEgTCA0My42Nzk2ODggMjYuNDYwOTM4IEMgNDMuNjkxNDA2IDI1LjU3NDIxOSA0My4yMjY1NjIgMjQuNzQ2MDk0IDQyLjQ2MDkzOCAyNC4zMDA3ODEgQyA0MS42OTUzMTIgMjMuODUxNTYyIDQwLjc0NjA5NCAyMy44NTE1NjIgMzkuOTgwNDY5IDI0LjMwMDc4MSBDIDM5LjIxNDg0NCAyNC43NDYwOTQgMzguNzQ2MDk0IDI1LjU3NDIxOSAzOC43NjE3MTkgMjYuNDYwOTM4IEwgMzguNzYxNzE5IDM4LjE0NDUzMSBDIDM4Ljc2MTcxOSA0MC41MzkwNjIgMzYuODQ3NjU2IDQyLjQ0OTIxOSAzNC40NTMxMjUgNDIuNDQ5MjE5IEwgOS44NTU0NjkgNDIuNDQ5MjE5IEMgNy40NjA5MzggNDIuNDQ5MjE5IDUuNTUwNzgxIDQwLjUzOTA2MiA1LjU1MDc4MSAzOC4xNDQ1MzEgTCA1LjU1MDc4MSAxMy41NDY4NzUgQyA1LjU1MDc4MSAxMS4xNTIzNDQgNy40NjA5MzggOS4yMzgyODEgOS44NTU0NjkgOS4yMzgyODEgTCAyMS41MzkwNjIgOS4yMzgyODEgQyAyMi40MjU3ODEgOS4yNTM5MDYgMjMuMjUzOTA2IDguNzg1MTU2IDIzLjY5OTIxOSA4LjAxOTUzMSBDIDI0LjE0ODQzOCA3LjI1MzkwNiAyNC4xNDg0MzggNi4zMDQ2ODggMjMuNjk5MjE5IDUuNTM5MDYyIEMgMjMuMjUzOTA2IDQuNzczNDM4IDIyLjQyNTc4MSA0LjMwODU5NCAyMS41MzkwNjIgNC4zMjAzMTIgWiBNIDkuODU1NDY5IDQuMzIwMzEyICIvPjwvZz48L3N2Zz4=
Qiita 
で検索する。
共有記事での注意点
Sheilds.io による画像は、編集中と限定共有記事では利用できるのに対して、共有記事では利用できないようだ。
限定共有記事で投稿した画像はアップロードされているようなので、このリンクを利用すればどうにかなりそう。リンクをこれに変更してみた。
<!-- Example -->
Qiita [![shields_camo_ELS]][url] で検索する。
[url]: https://qiita.com/
[shields_camo_ELS]: https://camo.qiitausercontent.com/47acd834abffd676d004d49bd17a302fe4112eb5/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d6666666666662e7376673f7374796c653d666c61742d737175617265266c6f676f3d646174613a696d6167652f7376672b786d6c3b6261736536342c50484e325a79423462577875637a30696148523063446f764c336433647935334d793576636d63764d6a41774d43397a646d6369494868746247357a4f6e68736157357250534a6f644852774f693876643364334c6e637a4c6d39795a7938784f546b354c336873615735724969423261575633516d393450534977494441674e4467674e446769494864705a48526f505349304f4842344969426f5a576c6e61485139496a513463486769506a786e49476c6b50534a7a64584a6d59574e6c4d5467354f444d324d7a4169506a78775958526f49484e306557786c50534967633352796232746c4f6d3576626d55375a6d6c73624331796457786c4f6d3576626e706c636d38375a6d6c73624470795a32496f4e5334344f44497a4e544d6c4c4449354c6a67774d7a6b794d7955734e5441754e5467344d6a4d344a536b375a6d6c73624331766347466a615852354f6a45374969426b50534a4e494451304c6a67324d7a49344d5341774c6a59774e5451324f534244494451304c6a63324f54557a4d5341774c6a59774f544d334e5341304e4334324e7a6b324f4467674d4334324d5463784f4467674e4451754e5467354f445130494441754e6a49344f544132494577674d6a67754f5449784f446331494441754e6a49344f54413249454d674d6a67754d444d784d6a55674d4334324d5463784f4467674d6a63754d6a41334d444d78494445754d4467794d444d78494449324c6a63324d5463784f5341784c6a67314d5455324d694244494449324c6a4d784d6a55674d6934324d5463784f4467674d6a59754d7a45794e53417a4c6a55324d6a55674d6a59754e7a59784e7a4535494451754d7a4d794d444d7849454d674d6a63754d6a41334d444d78494455754d446b334e6a5532494449344c6a417a4d544931494455754e5459794e5341794f4334354d6a45344e7a55674e5334314e5441334f4445675443417a4f4334354e7a49324e5459674e5334314e5441334f444567544341794d6934794e6a45334d546b674d6a49754d6a59784e7a453549454d674d6a45754e6a45334d546734494449794c6a67334f446b774e6941794d53347a4e546b7a4e7a55674d6a4d754e7a6b794f545935494449784c6a55344d6a417a4d5341794e4334324e5459794e534244494449784c6a67774f4455354e4341794e5334314d546b314d7a45674d6a49754e4467774e445935494449324c6a45354d5451774e6941794d79347a4e444d334e5341794e6934304d5463354e6a6b67517941794e4334794d4463774d7a45674d6a59754e6a51774e6a4931494449314c6a45794d5441354e4341794e69347a4f4449344d5449674d6a55754e7a4d344d6a6778494449314c6a637a4f4449344d53424d494451794c6a51304f5449784f5341354c6a41794e7a4d304e43424d494451794c6a51304f5449784f5341784f5334774e7a67784d6a5567517941304d6934304d7a6331494445354c6a6b324f446331494451794c6a6b774d6a4d304e4341794d4334334f5449354e6a6b674e444d754e6a59334f545935494449784c6a497a4f4449344d534244494451304c6a517a4e7a55674d6a45754e6a67334e5341304e53347a4f4449344d5449674d6a45754e6a67334e5341304e6934784e4467304d7a67674d6a45754d6a4d344d6a677849454d674e4459754f5445334f545935494449774c6a63354d6a6b324f5341304e79347a4f4449344d5449674d546b754f5459344e7a55674e4463754d7a63784d446b30494445354c6a41334f4445794e53424d494451334c6a4d334d5441354e43417a4c6a4d354e44557a4d534244494451334c6a51324e4467304e4341794c6a59334e5463344d5341304e7934794e4449784f4467674d5334354e5463774d7a45674e4459754e7a59784e7a4535494445754e4445334f54593549454d674e4459754d6a63334d7a5130494441754f4467794f444579494451314c6a55344d6a417a4d5341774c6a55344e546b7a4f4341304e4334344e6a4d794f4445674d4334324d4455304e6a6b675769424e49446b754f4455314e445935494451754d7a49774d7a457949454d674e4334334f446b774e6a49674e43347a4d6a417a4d5449674d4334324d6a67354d4459674f4334304f4441304e6a6b674d4334324d6a67354d4459674d544d754e5451324f446331494577674d4334324d6a67354d4459674d7a67754d5451304e544d7849454d674d4334324d6a67354d4459674e444d754d6a45774f544d34494451754e7a67354d445979494451334c6a4d334d5441354e4341354c6a67314e5451324f5341304e79347a4e7a45774f5451675443417a4e4334304e544d784d6a55674e4463754d7a63784d446b3049454d674d7a6b754e5445354e544d78494451334c6a4d334d5441354e4341304d7934324e7a6b324f4467674e444d754d6a45774f544d344944517a4c6a59334f5459344f43417a4f4334784e4451314d7a4567544341304d7934324e7a6b324f4467674d6a59754e4459774f544d3449454d674e444d754e6a6b784e444132494449314c6a55334e4449784f5341304d7934794d6a59314e6a49674d6a51754e7a51324d446b30494451794c6a51324d446b7a4f4341794e43347a4d4441334f444567517941304d5334324f54557a4d5449674d6a4d754f4455784e545979494451774c6a63304e6a41354e4341794d7934344e5445314e6a49674d7a6b754f5467774e445935494449304c6a4d774d4463344d53424449444d354c6a49784e4467304e4341794e4334334e4459774f5451674d7a67754e7a51324d446b30494449314c6a55334e4449784f53417a4f4334334e6a45334d546b674d6a59754e4459774f544d34494577674d7a67754e7a59784e7a453549444d344c6a45304e44557a4d53424449444d344c6a63324d5463784f5341304d4334314d7a6b774e6a49674d7a59754f4451334e6a5532494451794c6a51304f5449784f53417a4e4334304e544d784d6a55674e4449754e4451354d6a4535494577674f5334344e5455304e6a6b674e4449754e4451354d6a453549454d674e7934304e6a41354d7a67674e4449754e4451354d6a4535494455754e5455774e7a6778494451774c6a557a4f5441324d6941314c6a55314d4463344d53417a4f4334784e4451314d7a4567544341314c6a55314d4463344d5341784d7934314e4459344e7a5567517941314c6a55314d4463344d5341784d5334784e54497a4e4451674e7934304e6a41354d7a67674f5334794d7a67794f4445674f5334344e5455304e6a6b674f5334794d7a67794f444567544341794d5334314d7a6b774e6a49674f5334794d7a67794f444567517941794d6934304d6a55334f4445674f5334794e544d354d4459674d6a4d754d6a557a4f544132494467754e7a67314d5455324944497a4c6a59354f5449784f5341344c6a41784f54557a4d534244494449304c6a45304f44517a4f4341334c6a49314d7a6b774e6941794e4334784e4467304d7a67674e69347a4d4451324f4467674d6a4d754e6a6b354d6a4535494455754e544d354d44597949454d674d6a4d754d6a557a4f544132494451754e7a637a4e444d34494449794c6a51794e5463344d5341304c6a4d774f4455354e4341794d5334314d7a6b774e6a49674e43347a4d6a417a4d5449675769424e49446b754f4455314e445935494451754d7a49774d7a457949434976506a77765a7a34384c334e325a7a343d
Qiita 
これで上手くいくようだ。
余談
テキストベースで作成するなら [↗] や ⧉ を利用すると良いだろう。よりリッチな表示を期待する場合には、画像の挿入や Shields.io による挿入になる。他にもあるのかしら 
あるいは、外部リンク記号が不要な書き方をすることも検討しても良いだろう。
あゝ、こんなことを考えるくらいなら Qiita 標準で提供してくれると有難い。
と言うことで、Discussions にアイデアとして提出してみました。
Unicode における外部リンク記号
外部リンク記号 (External link sign) は 2012 年時点で Unicode への提案が棄却されているようだ。
2012-2 EXTERNAL LINK SIGN - Archive of Notices of Non-Approval - Unicode Pipeline
2012-2 EXTERNAL LINK SIGN 2012-June-06
Proposals to encode a character for the "external link sign", which is often seen as a graphic element indicating a link to a document located external to the website where the page using the external link sign resides. (See L2/06-268, L2/12-143, L2/12-169.)
Disposition: The UTC rejected the proposals to add "external link sign", most recently in L2/12-169. It is unclear that the entity in question is actually an element of plain text, given the inevitable connection to its function in linking to other documents, and thus its coexistence with markup for links. Furthermore, the existing widespread practice of representing this sign on web pages using images (often specified via CSS styles) would be unlikely to benefit from attempting to encode a character for this image. (This notice of non-approval should not be construed as precluding alternate proposals which might propose encoding a simple shape-based symbol or symbols similar in appearance to the images used for external link signs, should an appropriate plain-text argument for the need to encode such a simple graphic symbol be forthcoming.) References to UTC Minutes: [131-C26], May 10, 2012.
棄却された要因は、要約すると次の 2 点からのようだ。
- リンクのマークアップと併用されることを前提とする場合、プレーンテキストである必要性が不明瞭
- CSS などで画像として作成することが慣行であり、文字としてエンコードするメリットはない
今や Unicode にはテキストとして必要なのか分からない文字が多い気がするものの、外部リンク記号はいまだに含まれていない。
Qiita における外部リンク記号
本記事の冒頭でも見たように、利用規約のページでは外部リンク記号を見ることが出来る。
ソースコードを眺めてみると、外部リンク記号は CSS で構成されているようだ。これは記事内では再現できない。
どのようなシーンで利用するの？
Qiita 記事において、「外部リンク記号をどのようなシーンで利用するのか」は考察されるべきだろう。
本来、外部リンク記号は「この記号をクリックすると外部サイト（ここでは Qiita 以外のサイト）に移動しますよ」と言うことを伝えるために利用される。そのため、この記号を利用する一般的なサイトでは、外部サイトか内部サイトかを自動的に判別して追加するように設計するようだ。すなわち、この記事のように手動で追加することがないようにしている。
また、Qiita を閲覧するユーザーがリンクカードやリンクにホバーした際に左下に表示される URL を確認することで外部か内部かを判別することが出来ると思えば、ほとんど不要にも思われる。
しかしながら、個人的に外部リンク記号が必要になる場面は以下の 2 つがあると思っている。
-
本文中で参考にした記事等へのリンク
「この記事」や「ココを参照」などとするよりもスマートになるだろう。（一旦、脚注に移動して脚注で外部リンクを示すという方法もある）
-
codeにリンクを埋め込む場合Qiita では残念ながら
codeにリンクを埋め込むとマウスでホバーしない限りそこにリンクがあることを認識することが出来ない。
もしも他に利用するべき場面があれば教えてほしい。
追記
- 2022/06/18: 共有記事での Shields.io の挿入について追記。
- 2022/06/19: Qiita 内で外部リンク記号を見つけたので画像を添付。少し追記。
- 2022/06/20: Discussions への提出をリンク。外部リンク記号の意義について考察を追記。