WebDesigner's Memorandumウェブデザイナーの備忘録

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

MarkdownにGyazoを利用する

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

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

Markdownで画像の添付

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

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

Gyazoの画像URL

Gyazoは画像をアップロードして、URLを共有する事で他人と画像を共有できるサービスです。
PCに画像が保存される事もないですし、URLなので画像をやり取りするよりも容量が軽く済むので、非常に便利です。

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

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

Gyazoの画面

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

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

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

MarkdownでGyazoを使って画像の表示

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

Twitterにてもっと簡単な方法を教えていただきました。
Gyazoの画像ページにてcommand + option + Cを押せばMarkdown用に整形された画像リンクがコピーされます。

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

しかし、command + option + fn + Cでそれを回避してコピー出来ました。
何故かは分かりませんが、もし同じような症状になった方は試してみてください。

Create Linkでもっと楽する

ここから更に、Markdownの記述もすぐ生成できるようにしたいので、Create LinkというChrome拡張機能をインストールします。

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

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

Create Linkの設定

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

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のデフォルトショートカット設定

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

Create Linkのショートカットキー設定

自分の場合はcontrol + Cに設定しました。
これで、Gyazoページを開いてcontrol + CすればすぐにMarkdown記法のURLがコピーされます。

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね