search
LoginSignup
321
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

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

macOS-11.0 Beta(20A5354i) Last Modified-2020/08/22

はじめに

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

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

過不足なく簡潔に環境を記載する方法を模索した結果、OSSのREADME.mdでよく利用されているbadgeサービス(Shields IOBadgenなど)を利用して、環境を記事の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>)

以下のような表示が可能になります。
<LABEL>-<MESSAGE>

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

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

e.g. OSバージョン

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

macOS-11.0 Beta(20A5354i)

e.g. 更新日付

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

Last Modified-2020/08/22

最後に

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

参考情報


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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
321
Help us understand the problem. What are the problem?