Qiita記事にさりげなく（けど、わかりやすく）環境を記載する

5353 ワード
Badge Qiita 環境 Qiita テキストリンク

はじめに

先日、@uhooi さんの以下のツイートを見た時に、おっ自分と同じ悩みだなーと思い、Qiita記事の「どこに」、「どうやって」、環境を書くといいのか、少し考えてみました

さりげなく（けど、わかりやすく）環境を記載する方法

過不足なく簡潔に環境を記載する方法を模索した結果、OSSのREADME.mdでよく利用されているbadgeサービス（Shields IOやBadgenなど）を利用して、環境を記事の1番上にbadge表示することにしました。1

この記事でも、Shields IOを利用してOSバージョンと更新日付を記事の1番上にbadge表示しています。

Shields IOを利用してbadge表示する方法

ここからは、Shields IOでbadgeを表示する方法について説明していきます。
Shields IOでは以下の形式でURLにアクセスすることで、badgeのsvg画像を取得することができます。

https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>

Qiitaの記事では、次のmarkdownの書き方で、

![<LABEL>-<MESSAGE>](https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>)

以下のような表示が可能になります。

なお、今回は触れませんでしたが、見た目を変更できるstyleオプションや、その他オプションがまだまだあるので、興味ある人はShields IOのサイトを確認してください。

以下、OSバージョンと更新日付の例です

e.g. OSバージョン

![macOS-11.0 Beta（20A5354i）](https://img.shields.io/badge/macOS-11.0 Beta（20A5354i）-brightgreen)

e.g. 更新日付

![Last Modified-2020/08/22](https://img.shields.io/badge/Last Modified-2020/08/22-brightgreen)

最後に

私は今回の方法でさりげなく（けど、わかりやすく）環境を記載するといいかなと思っているのですが、正解のない話なので別のいい方法知ってるよ、などコメントいただけると嬉しいです

参考情報

  1. @mikkame さんの「Qiitaコントリビューション数をGitHubのプロフィールに貼ってドヤれるサービスを作った」を読んで、Qiitaでもbadge表示できるじゃん、と気づきました。 ↩