3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

この記事では、GitHubのREADMEにGyazoショート動画を載せる方法についてまとめています。

READMEにGyazoのショート動画を載せることで、アプリや機能の紹介がしやすくなります。

この記事が皆さんのお役に立てば嬉しいです!

前提

  • Gyazoに登録済みであること

問題

READMEにGyazoから「マークダウン」でコピペしても動画が表示されず、リンクとして表示されてしまいます。

解決方法

Gyazoで撮影した動画のマークダウン横のGIFをクリックしてコピペすることで解決できます。

スクリーンショット 2024-07-16 20.27.44.png

README

以下のような拡張子が.gifのコードをREADMEに貼り付けます。

README.md
[![Image from Gyazo](https://i.gyazo.com/313adb4e2f7aa50a63fa8367680b2e17.gif)](https://gyazo.com/313adb4e2f7aa50a63fa8367680b2e17)

これでGyazoのショート動画がGitHubのREADMEに表示されます。

Image from Gyazo

おまけ(アプリ機能紹介テーブル風)

次のように記述することで、アプリ紹介風のテーブルを作成することができます。

README.md
| アプリ機能1 | アプリ機能1 |
|:-----------:|:------------:|
| GyazoのマークダウンGIF | GyazoのマークダウンGIF |
| アプリ機能の説明が入ります。アプリ機能の説明が入ります。 | アプリ機能の説明が入ります。アプリ機能の説明が入ります。 |

</br>

| アプリ機能3 | アプリ機能4 |
|:-----------:|:------------:|
| GyazoのマークダウンGIF | GyazoのマークダウンGIF |
| アプリ機能の説明が入ります。アプリ機能の説明が入ります。 | アプリ機能の説明が入ります。アプリ機能の説明が入ります。 |

READMEビュー

Image from Gyazo

テーブル説明

HTMLタグでもテーブルの記述は可能ですが、こちらの方が直感的な書き方でわかりやすいと思います。

空間を空ける

テーブルとテーブルの間に</br>を入れておりますが、間を空けるために入れております。デフォルトでも間はありますが、近すぎる気がしましたので。ここはお好みで入れてください。

おわりに

ちょっとした記事ですが、お役に立てれば幸いです。

私自身、どうやって表示できるのかわからず数日調べていましたので、この記事をご覧になった方にはこんなところで時間をかけて欲しくないと思いました。

もし、この記事の内容に不備や改善点などがありましたら、ご指摘いただけると嬉しいです。

参考

3
2
0

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
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?