Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
318
Help us understand the problem. What is going on with this article?
@zizi4n5

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表示できるじゃん、と気づきました。 

318
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
zizi4n5
iOSエンジニア
engineerlife
技術力をベースに人生を謳歌する人たちのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
318
Help us understand the problem. What is going on with this article?