はじめに
Githubとかでよく見る↓のような小さいバッジ。
作り方を調べては忘れてを繰り返しており、定着しないので自分なりに整理してみます。
情報元は下記の公式ページです。
基本形: パスパラメータのみ使用
ロゴなしの基本的な形はパスパラメータの指定のみで作れます
https://img.shields.io/badge/simple-badge-blue
パスパラメータの説明
下記の通り、label、message、colorをダッシュ（-）区切りで指定します。
バッジの左部分がlabelで右部分がmessageです。
label-message-color
labelとmessageは両方が必須なのではなく、片方だけの指定でも構いません。
https://img.shields.io/badge/MessageOnly-yellow
色の指定には、色の名称やカラーコードなどが使えます。
なお、ラベルとメッセージの両方がある場合にはcolorではメッセージの色が設定されます。ラベルの色指定には、後述するクエリパラメータのlabelColorを使ってください。
https://img.shields.io/badge/simple-badge-3E72BC
https://img.shields.io/badge/simple-badge-rgb(106,90,205)
エラー
前述のパスパラメータの条件を満たしていないなど、不適切なURL指定をすると404が返ってきて下記のように表示されます。
https://img.shields.io/badge/invalid
拡張子
URL末尾が画像の拡張子で終わっていれば、画像として解釈されます。
と言っても、私が試してみて使えたのはpngとsvgだけでした。
- https://img.shields.io/badge/This_is-png-3E72BC.png
- https://img.shields.io/badge/This_is-svg-3E72BC.svg
gifやjpgを使おうとすると410が返ってきます。
- https://img.shields.io/badge/This_is-gif-3E72BC.gif
- https://img.shields.io/badge/This_is-jpg-3E72BC.jpg
それ以外の、bmpやtiffに至っては404になってしまいました。
- https://img.shields.io/badge/This_is-gif-3E72BC.bmp
https://img.shields.io/badge/This_is-gif-3E72BC.tiff
なお、拡張子を何も付けなければ、デフォルトで.svgになるようです。
発展形: クエリパラメータを使用
より細かい設定のためにはクエリパラメータを使用します。ロゴもクエリパラメータで指定します。
様々なパラメータが用意されていますが、よく使いそうなものをいくつか解説します。
ちなみに私が確認できている限りでは文字色を指定する方法はありません。背景色に応じた色が文字色として使用されるようです。
logo
バッジにロゴを表示できます。
基本的にはSimple Iconsのロゴが使えますが、Shields自身が保守しているロゴもいくつかあるようです。
- https://img.shields.io/badge/Tomcat-grey?logo=apachetomcat
- https://img.shields.io/badge/Gitlab-white?logo=gitlab
ロゴの名前（Tomcatの場合はapachetomcat）は、Simple Iconsでロゴのタイトルをクリックするとクリップボードにコピーされます。
あるいはSimple Iconsのリポジトリにあるslugs.mdからも探せます。
用意されているものではない、任意のカスタムロゴを使用する場合、base64エンコードした値を使用します。詳細は公式ページで確認してください。
logoColor
ロゴ部分の色を指定します。
下記の例では、logoColor=redによりGithubのロゴを赤くしています。
- https://img.shields.io/badge/Github-MyAccount-white?logo=github&logoColor=red
labelColor
ラベル（バッジの左部分）の背景色を指定します。
下記の例では、labelColor=yellowにより、左側の背景色を黄色にしています。
https://img.shields.io/badge/label-message-white?labelColor=yellow
color
バッジの右部分の背景色を指定します。
こちらがパスパラメータよりも優先されます。
下記の例ではパスパラメータでred、クエリパラメータでblueを指定したところ、右側の背景色が紫になっています。
https://img.shields.io/badge/label-message-red?color=purple
style
バッジの見た目を指定します。指定しない場合のデフォルトはflatです。
| style | sample |
|---|---|
| flat |  |
| flat-square |  |
| plastic |  |
| for-the-badge |  |
| social |  |
Webページでの表示
画像のソースとして Shields.io のURLを入力することで表示できます
HTML
<img alt="badge" src="Shields.ioのURL" />
Markdown
例として、下記のバッジを表示する場合を記載しておきます。
HTML
<img alt="Github" src="https://img.shields.io/badge/Github-MyAccount-white?logo=github&logoColor=red" />
Markdown
特殊文字
スペース（ ）などURLにそのまま入力できない文字や、ダッシュ（-）のようにShields.ioにおいて意味を持つ文字を出力したい場合には、下記のように置き換えます。
| URLへの入力 | バッジへの出力 |
|---|---|
アンダースコア(_) |
スペース（ ） |
ダブルアンダースコア(__) |
アンダースコア（_） |
ダブルダッシュ(--) |
ダッシュ（-） |
https://img.shields.io/badge/any_text__-you--like-blue
URLエンコードされたASCII文字も使えるので、スペースは上記のアンダースコアでなく%20も使えますし、C#のバッジなどで使いそうなシャープ（#）も%23が使えます。
- https://img.shields.io/badge/C%23-512BD4?logo=csharp
詳細は下記のページを確認してください。