GithubでREADME.mdへ、gifをサイズ指定して表示させる
GithubのREADME.mdにはgifで操作をわかりやすく説明しているOSSを見かけます.
github.com
それと同じことをやりたくなったので、調べてみました.
tl;dr
GIPHY Captureでgif画像を撮影
＋
HTMLタグで画像を読み込み、サイズを指定
<img src="画像パス" width="横幅(px)">
gif画像を撮影する
色々方法がありますが、操作が直感的で保存も簡単な GIPHY Captureがおすすめです!
キャプチャ後に編集して保存する際、保存後のサイズを Calculate Size で確認し、範囲や画質を選択するとよいです. (アップロードサイズ制限があるため)
Githubにgifを載せる
Markdownは以下のようにして画像を埋め込めますが
サイズ指定したい場合はHTMLのimgタグで指定できます.
<img src="画像URL" width="横幅(px)">
画像URL は相対パスで指定可能です. gif 画像を resource/demo.gif とした場合、以下のように読み込みます.
<img src="resource/demo.gif" width="400">
画像サイズは、vscodeなどのMarkdownプレビュー機能がついているエディタでやるのがおすすめです.
完成
以下が完成品です.
想像していたよりも簡単にできるので、よければ試してみてください.
