【GitHub】「github-readme-stats」と「github-profile-trophy」でGitHubをゴージャスに見せる

Code

はじまり

リサちゃん
リサちゃん

今回は、GitHubをゴジャースにしちゃおうっていう回だね!

135ml
135ml

ドジャースみたいだな。ゴージャスね。

リサちゃん
リサちゃん

では、以下で紹介になります!

レッツ、サービス!!

135ml
135ml

ボーボボか? まてまて!

出来上がりの想定

今回の設定でこんなのが出来上がります。一気に彩り豊かになりました。(数値が弱そうですが、それでも彩り良くしてみたかったんです!!)

設定の流れ:「github-readme-stats」

まず、「github-readme-stats」のリポジトリに飛んでみましょう。

GitHub - anuraghazra/github-readme-stats: :zap: Dynamically generated stats for your github readmes
:zap: Dynamically generated stats for your github readmes - GitHub - anuraghazra/github-readme-stats: :zap: Dynamically ...

そこにあるMarkdownを自分のusernameを入れて、自分のプロフィールページのREADME.mdに打ち込めば、動くかと思います。僕は、「GitHub Stats Card」と「Top Languages Card」を設定しました。

ここまでは普通に動くと思います。

しかし、横並びになりません。Markdownだと出来ないのかな?

そう思ったら、どうやら公式ページ曰く、HTMLを上手く打ち込めば横並びに表示できるそうなのです・・・。(これを見るまで、MarkdownにHTMLを打ち込めることを知らなかった・・・(笑))

この「github-readme-stats」の公式ページにはこんな記述があるかと思います。(2021/11/24時点)

<a href="https://github.com/anuraghazra/github-readme-stats">
  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats" />
</a>
<a href="https://github.com/anuraghazra/github-readme-stats">
  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=convoychat" />
</a>

これを打ち込んで、自分のプロフィール画面を見てみると・・・。

動きません(笑)

なんでかなーと思って、色々webサーフィンしたり試してみると、どうやら、github-readme-stats.vercel.app/api/pin/?username/pinの部分が要らないようなのです。(おいおい、公式だろ?とは思いましたが、まあそんなこともありますよね。)

それから、/pinの部分を直して、layoutやthemeを公式ページのカタログを見ながら設定して、まあ落ち着きました。themeはtoyonightが最もしっくり来ました。上の方です。

設定の流れ:「github-profile-trophy」

次に、「github-profile-trophy」でトロフィーの表示を設定しましょう。

こちらもそんなに難しくなく、theme選びに迷いました。

ステータスカードと同様にtokyonightで揃えたかったのですが、トロフィーの方はだいぶ配色が異なっていて、tokyonightだと白基調になってしまうのです! なんてこった!

なので結局、トロフィーのthemeはDraculaに収まりました。下の方です。

結局のREADME.mdのソース

以下が、結局のところのREADME.mdのソースコードになります。ああ、一番上にあるデフォルトのプロフィール記述が懐かしい・・・(笑)

ちょっと余白がある方が好きなので、pタグで囲いました。

<!-- - 👋 Hi, I’m @Landmaster135
- 👀 I’m interested in ...
- 🌱 I’m currently learning ...
- 💞️ I’m looking to collaborate on ...
- 📫 How to reach me ... -->

<!---
Landmaster135/Landmaster135 is a ✨ special ✨ repository because its `README.md` (this file) appears on your GitHub profile.
You can click the Preview link to take a look at your changes.
--->

<p align="left">
  <a href="https://github.com/anuraghazra/github-readme-stats">
    <img height="170.2em" alt="Landmaster135's GitHub stats" src="https://github-readme-stats.vercel.app/api/?username=Landmaster135&theme=tokyonight&show_icons=true" />
  </a>
  <a href="https://github.com/anuraghazra/github-readme-stats">
    <img height="170.2em" alt="Top Langs" src="https://github-readme-stats.vercel.app/api/top-langs/?username=Landmaster135&layout=compact&theme=tokyonight" />
  </a>
</p>
<p>
  <a href="https://github.com/ryo-ma/github-profile-trophy">
    <img alt="Trophy" src="https://github-profile-trophy.vercel.app/?username=Landmaster135&theme=dracula&column=7" />
  </a>
</p>

<!-- [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=Landmaster135&layout=compact&theme=tokyonight)
](https://github.com/anuraghazra/github-readme-stats)
[![Landmaster135's GitHub stats](https://github-readme-stats.vercel.app/api?username=Landmaster135&theme=tokyonight&show_icons=true)](https://github.com/anuraghazra/github-readme-stats) -->
<!-- [![trophy](https://github-profile-trophy.vercel.app/?username=Landmaster135&theme=onedark&column=7
)](https://github.com/ryo-ma/github-profile-trophy) -->

おしまい

135ml
135ml

今回はこんな感じだな。

リサちゃん
リサちゃん

ほぉ~、結局、青と赤が多めな見た目に落ち着いたわけだね。

135ml
135ml

青と赤を使ったデザインが好きなんだよね。だから、イメージカラーが青と赤である、僕とリサちゃんの会話を基準にこのブログを書いているわけだよね!

リサちゃん
リサちゃん

あー、じゃああのペンギンはいない方が良い・・・?

ペンギン
ペンギン

おい! 今、てめえは言ってはならんことを言ったな!!?

ペンギン
ペンギン

この!

ペンギン
ペンギン

じゃあ、俺がたくさん!

ペンギン
ペンギン

出てきてやるよ!

ペンギン
ペンギン

ペンギン
ペンギン

とりゃっ!

ペンギン
ペンギン

多重!

ペンギン
ペンギン

影分身の

ペンギン
ペンギン

術~~~~!!!!

ペンギン
ペンギン

術~~~~!!!!

ペンギン
ペンギン

ニンニン! ってばよ! ってばよ!

ペンギン
ペンギン

ほいさっ!

ペンギン
ペンギン

おい、大丈夫か? 相棒・・・

ペンギン
ペンギン

うん、へっちゃらだよ! もうひとりのぼくぅっ!!

ペンギン
ペンギン

ブラックマジシャンガール! 召喚!

ペンギン
ペンギン

滅びのバーストストリイイイイイイムウウウゥゥゥ!!!!!

ペンギン
ペンギン

ぐあああああぁぁぁぁ!!!!! テレレレレレレレ レッ!

135ml
135ml

うおお・・・俺たちはものすごい逆鱗に触れてしまったようだ・・・

リサちゃん
リサちゃん

とりあえず、終いにしとくか・・・

ペンギン
ペンギン

レボリューーーーーション!!!!!!!!

以上になります!

コメント

タイトルとURLをコピーしました