最近、いくつかのサイトを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
これを表示させるとこのようになります。
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日時点でこの方法は有効でした。