# Markdownで画像を表示する時はGyazoを使うのが便利

URL: https://webrandum.net/markdown-gyazo/
公開日: 2019-02-16
更新日: 2020-04-12
カテゴリー: 作業効率化
タグ: Gyazo, Markdown, スクリーンショット
出典: Webrandum（著者: サイトウ マサカズ）

Markdownで画像を表示したい時は下記の書き方で表示ができます。

```
!(alt属性)[画像URL "title属性"]
!(alt属性)[画像URL] //title属性は省略も可能
```

![Markdownで画像の添付](https://webrandum.net/mskz/wp-content/uploads/2019/02/image_1-7.png)

ただこの方法だと、他人にMarkdownファイルを渡す時に、一緒に画像ファイルも渡す必要が出てきますし、画像パスを書いていくのは面倒です。

そこで最近はGyazoという画像共有サービスを利用して、画像を表示させるようにしています。

## Gyazoの画像URL

Gyazoは画像をアップロードして、URLを共有する事で他人と画像を共有できるサービスです。

PCに画像が保存される事もないですし、URLなので画像をやり取りするよりも容量が軽く済むので、非常に便利です。

また、公式アプリもあって、Mac標準のスクリーンショットと同じ用な使い勝手で、撮影したスクリーンショットをすぐにGyazoにアップ→共有ができます。

下の画像は実際のGyazoページになります。

![Gyazoの画面](https://webrandum.net/mskz/wp-content/uploads/2019/02/image_3-4-1024x505.png)

Gyazoは普通のWebページなのですが、URLの末尾に「.png」や「.jpg」などの拡張子を付け加える事で画像リンクとして扱えます（拡張子の種類は画像によって変わりますが、公式アプリで普通に撮影した場合は、基本PNGだと思って問題ありません）。

```
通常のリンク： https://gyazo.com/e40db813498509a96c83b6dee769dc5f
画像リンク： https://gyazo.com/e40db813498509a96c83b6dee769dc5f.png
```

この画像リンクをMarkdownに埋め込めばちゃんと表示されます。

![MarkdownでGyazoを使って画像の表示](https://webrandum.net/mskz/wp-content/uploads/2019/02/image_2-6.png)

### 追記：Gyazoの画像ページから直接Markdownをコピーする方法

Twitterにてもっと簡単な方法を教えていただきました。

Gyazoの画像ページにてcommand + option + Cを押せばMarkdown用に整形された画像リンクがコピーされます。

> 画像ページでcmd+option+cを押すとMarkdownがコピーされます（Windowsの場合はCtrl+Alt+c） https://t.co/qP8euFcrbC
> — Hiroki Akiyama (@akiroom) February 18, 2019

ただMacのChromeやSafariでは、開発用のショートカットとしてcommand + option + Cが既に割り当てられているらしく、自分の環境ではうまく機能しませんでした。

しかし、command + option + fn + Cでそれを回避してコピー出来ました。

何故かは分かりませんが、もし同じような症状になった方は試してみてください。

## Create Linkでもっと楽する

ここから更に、Markdownの記述もすぐ生成できるようにしたいので、[Create Link](https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm?hl=ja)というChrome拡張機能をインストールします。

[![](https://www.google.com/s2/favicons?domain=chrome.google.com)chrome.google.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/18436d93fe396436442ecf34c24b20b01884f803949417625570172ba4cf22ab.webp)Create Linkhttps://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm?hl=jaCopy current page URL to clipboard in various formats.](https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm?hl=ja)

Create Linkは現在いるWebページのURLやタイトルを取得して、すぐに目的の形のURLを生成してくれる拡張機能です。

追加されたアイコンをクリックして［Configure…］を選択します。

![Create Linkの設定](https://webrandum.net/mskz/wp-content/uploads/2019/02/image_4-4-1024x640.png)

設定画面が表示されるので。「+」ボタンをクリックしてフォーマットを追加します。

Nameは分かりやすい名前を付けて（自分の場合はGyazo → Markdown）Formatには下記のコードを入力します。

```
![%text%](%url%.png)
```

「%text%」には表示中のWebサイトのタイトル、「%url%」にはURLが入るのでその後に「.png」を付けています。

後はGyazoのページでCreate Linkを使用すればすぐにMarkdown記法の画像リンクをコピーできます。

## Create Linkにショートカットキーをつける

更に楽をするために、Create Linkにショートカットキーを付けます。

先ほど同様に、Create Linkの設定画面へいき「Default Format」にショートカットキーを設定したいフォーマットを選択します。

![Create Linkのデフォルトショートカット設定](https://webrandum.net/mskz/wp-content/uploads/2019/02/image_5-3.png)

その後、すぐ下の「Configure shortcut」リンクをクリックします。

するとChrome拡張機能のショートカットキー設定画面へ移動するので、ここでCreate Linkの「Current tab in default format」にショートカットキーを設定します。

![Create Linkのショートカットキー設定](https://webrandum.net/mskz/wp-content/uploads/2019/02/image_6-1-1024x571.png)

自分の場合はcontrol + Cに設定しました。

これで、Gyazoページを開いてcontrol + CすればすぐにMarkdown記法のURLがコピーされます。

## Markdownファイル単体で済むようになる

このように、Gyazoを使用するとMarkdownファイル単体の受け渡しで済むようになります。単純に受け渡し時の容量削減にもなりますし、Gyazoは意図して削除しない限り画像URLは残るので安心です。