LoginSignup
1

More than 5 years have passed since last update.

blog記事にGitHubのAvatar(Profile picture)を表示する。

Last updated at Posted at 2017-01-04

最近、いくつかのサイトをGitHub Pages+Jekyllに移行したのですが、blog記事の投稿者としてGitHubのAvatar(Profile picture)を表示したいなと思い、やり方を見つけましたので、メモとして残しておきます。

blog記事に、"author"としてGitHubのアカウント名が記載されていることが前提の内容になっていますが、要はGitHubのアカウント名が取得できればいいので、そのあたりは適宜読み替えて自分が使いやすい形にカスタマイズしていただければと思います。
私はJekyllサイトでつかっていますが、Jekyllサイト以外でも利用できます。

GitHubのAvatar取得方法

GitHubのAvatarは、以下のURLで取得可能です。

https://avatars.githubusercontent.com/{username}

この{username}の部分を自分のユーザー名に変えればOK。私の場合は、"kwaka1208"なので、以下のURLになります。

https://avatars.githubusercontent.com/kwaka1208

これを表示させるとこのようになります。
GitHubのAvatar

Avatarの表示

Avatar画像が取得できれば後は、簡単です。記事のAuthor情報は、"{{ page.author }}で取得できますので、これと前述のURLを組み合わせるだけ。

<img src="https://avatars.githubusercontent.com/{{ page.author }}">

これをJekyllのlayoutファイルに記述すればAvatarが表示されます。

Avatar画像を丸くする。

ついでに、このAvatar画像を丸くする方法も書いておきます。
CSSで画像の大きさを指定し、一辺の長さ(正方形なので縦横どちらでもOK)にの半分を半径とした"border-radius"を指定すれば画像が丸く切り取られます。

例えば、Avatarの大きさを縦横それぞれ128pxにした場合、border-radiusの値は64pxを指定します。

<img src="https://avatars.githubusercontent.com/{{ page.author }}" style="border-radius: 64px; width: 128px;">

ここで実際に表示させてみようと思ったのですが、Qiita上ではstyle指定が効かないようですので、実際にこの方法で表示させているこちらのサイトをご覧ください。

http://coderdojo-nara-ikoma.github.io/blog/computer-science-for-all/

2018年5月17日時点でこの方法は有効でした。

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
  3. You can use dark theme
What you can do with signing up
1