はじめに

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

![badge](Shields.ioのURL)

例として、下記のバッジを表示する場合を記載しておきます。

HTML

<img alt="Github" src="https://img.shields.io/badge/Github-MyAccount-white?logo=github&logoColor=red" />

Markdown

![Github](https://img.shields.io/badge/Github-MyAccount-white?logo=github&logoColor=red)

特殊文字

スペース（）など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

詳細は下記のページを確認してください。