🏆

Github Profile Trophyを中央寄せで表示させたい

2022/07/09に公開約1,600字

背景

他人の GitHub アカウントのプロフィールを閲覧した際に見かけるGitHub Profile Trophy

GitHub Profile Trophy は、README の Quick Start にある下記のコードを自身の README.md に埋め込み、username を自身の GitHub ユーザ名に設定すると表示できます。

サンプルコード
[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma)](https://github.com/ryo-ma/github-profile-trophy)

この GitHub Profile Trophy 全体を中央寄せで表示させたいのですが、下記のように html の p タグでそのまま囲うと上手く表示できませんでした。

対応前
<p align="center">
  [![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma)](https://github.com/ryo-ma/github-profile-trophy)
</p>

対応

対応後
<p align="center">
  <a href="https://github.com/ryo-ma/github-profile-trophy">
    <img src="https://github-profile-trophy.vercel.app/?username=ryo-ma" />
  </a>
</p>

上記のように、リンクの記法を a,img タグで代用すると上手く表示できました。

おまけ

本記事の対応で GitHub Profile Trophy の表示範囲を中央寄せにできました。しかし、トロフィーが 7 個以上あると表示されるトロフィー群の 2 段目以降は左寄せで表示されます。2 段目以降のトロフィー群を中央寄せで表示させることはまだできないみたいです。

この部分をなるべく中央寄せで表示させたい場合は、ユーザ名の後ろに&column=-1を追加すると 1 段で表示されます。

サンプルコード
[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma&column=-1)](https://github.com/ryo-ma/github-profile-trophy)

参考資料

Discussion

ログインするとコメントできます