📛

Shields.ioで作ったバッジにリンクをつける(Markdown)

2023/06/12に公開

これはなに?

Shields.ioでバッジ作りを試していたのですが、
Markdownでのリンクの貼り方がわからなかったので、ここにメモを残します。

題材

わたしのtwitterアカウントへのリンクを貼ったつもりのバッジです。
Twitter URL

![Twitter URL](https://img.shields.io/twitter/url?label=%40not75743&style=social&url=https%3A%2F%2Ftwitter.com%2Fnot75743)

バッジをクリックしてもtwitterへ飛びません。

方法①

bracketsでラベル・バッジのURLをまとめて囲みます。

Twitter URL

[![Twitter URL](https://img.shields.io/twitter/url?label=%40not75743&style=social&url=https%3A%2F%2Ftwitter.com%2Fnot75743)](https://twitter.com/not75743)

方法②

参照リンクというらしいです。はじめて知りました。
こちらのほうが見やすい気がします。

Twitter URL

[![Twitter URL][badge-url]][twitter]

[badge-url]: https://img.shields.io/twitter/url?label=%40not75743&style=social&url=https%3A%2F%2Ftwitter.com%2Fnot75743
[twitter]: https://twitter.com/not75743

参考

https://www.markdownguide.org/basic-syntax/#images-1
https://yoshinorin.net/articles/2016/11/23/shieldsio-github-badges/
https://stackoverflow.com/questions/74156679/markdown-reference-link-with-shields-io-badges
https://zenn.dev/inoy/articles/11db8791cde1b0

Discussion