DotMDMarkdownで画像を入れるには：感嘆符、代替テキスト、パス。
Markdownの画像は短い1行です。サイズ、配置、キャプションはその構文に含まれないので、少しのHTMLが必要になります。ここでは構文、パスのルール、回避策を説明します。
macOS 14以降。閲覧は無料で、編集とレビューは1回のお支払いです。
要点
画像は、先頭に感嘆符を付けたリンクです：。パスはWebアドレスでも、ドキュメントからの相対パスでも構いません。サイズを指定するにはHTMLに切り替えます：<img src="image.png" width="400">。
<img src="assets/cat.png" alt="A cat on a keyboard" width="400">·
構文
- 角括弧の中の代替テキストは、スクリーンリーダー向けに画像を説明し、画像が読み込めないときに表示されます。「image」ではなく、画像に写っているものを書いてください。
- パスは丸括弧の中に書きます。スペースが含まれるときは
%20と書くか、パスを山括弧で囲みます。 - タイトルは引用符で囲んだ省略可能なテキストで、ふつうはカーソルを重ねたときのツールチップとして表示されます。
参照スタイルも使えます。長いアドレスを本文から追い出せます。
![Logo][logo]
[logo]: https://example.com/logo.png "DotMD logo"相対パスとファイルの場所
スキームのないパスは、アプリを開いた場所ではなく、Markdownファイルからの相対パスです。ファイルが次のように置かれているとき、
docs/
spec.md
assets/
flow.pngspec.mdの画像はです。1つ上のフォルダのファイルからはdocs/assets/flow.png、1つ下のフォルダからは../assets/flow.pngと書きます。GitHubでは、/で始まるパスはリポジトリのルートからの相対パスです。画像はドキュメントの隣のassetsフォルダに置くと、フォルダを移動したときに画像も一緒に移動できます。
Macは大文字と小文字を区別しませんが、Linuxサーバーでは画像のファイル名は大文字と小文字が区別されます。ローカルでは表示されるのにオンラインで表示されない、よくある原因です。
画像のサイズを指定するには
Markdown自体にはサイズの指定がありません。幅を指定したHTMLのimgタグを使います。高さは比率に合わせて決まります。
<img src="assets/screen.png" alt="Settings window" width="400">幅と高さはピクセルで指定し、width="50%"のようなパーセントも多くのアプリで使えます。GitHubはREADMEとコメントでこのタグをサポートしています。のように、代替テキストの中にサイズを書けるアプリもあります。この形式はObsidianのもので、DotMDも読み取りますが、ほかのアプリでは|400が代替テキストの一部として表示されるため、どこでも動かしたいファイルではHTMLタグを使ってください。表のセル内では、パイプを\|と書く必要があります。
配置とキャプション
配置とキャプションもHTMLです。画像を中央に置くには、alignを付けた段落に入れます。
<p align="center">
<img src="assets/logo.png" alt="Logo" width="200">
</p>キャプションには、figureとfigcaptionを使います。
<figure>
<img src="assets/flow.png" alt="Request flow" width="500">
<figcaption>Figure 1. The request flow.</figcaption>
</figure>これらのタグをすべてのアプリが保持するわけではありません。GitHubはほとんどを保持し、DotMDは両方を表示します。どこでも使えるキャプションが必要なら、画像の下にイタリックの行を置きます：*Figure 1. The request flow.*。
クリックできる画像とそのほかの工夫
画像をリンクの中に入れると、クリックできる画像になります。
[](https://example.com/builds)READMEの先頭にあるバッジは、この方法で作られています。ダークモードで別の画像を表示するには、対応するアプリで、<source media="(prefers-color-scheme: dark)">を持つpicture要素を使います。
代替テキスト、ファイルサイズ、形式
代替テキストは、電話で画像の様子を説明するつもりで書いてください。Settings window with the Sync option turned onは、screenshotよりずっと多くを伝えます。装飾だけの画像は括弧を空にしておくと、スクリーンリーダーが読み飛ばします。
スクリーンショットや図にはPNG、写真にはJPEG、ロゴや線画にはSVGを使い、ファイルは小さく保ちます。6MBのスクリーンショットは、READMEもリポジトリも重くします。ほとんどのアプリは、アニメーションGIFも通常の画像と同じように表示します。
画像が表示されない原因
- パスが間違っている。Markdownファイルのあるフォルダから見たパスと、ファイル名の大文字と小文字を確認します。
- 感嘆符がない。ないと、画像ではなくリンクになります。
- パスのスペースをエスケープしていない。
- オンラインのページにローカルのファイルを指定している。ディスク上のファイルを指すパスは、そのディスクの上でしか動きません。
- 外部画像がブロックされている。許可するまでWebの画像を読み込まないアプリもあります。
画像がどう見えるか確認するには、ドキュメントからの相対パスを解決するリーダーでファイルを開きます。DotMDはそれができます。画像は本文の幅を超えない大きさで表示され、HTMLのwidthタグが反映され、エディタに貼り付けたスクリーンショットは、ファイルの隣のassetsフォルダに保存されます。閲覧は無料です。
Markdownの画像に関するよくある質問
Markdownで画像を入れるには？
と書きます。パスは、Webアドレスか、Markdownファイルからの相対ファイルパスです。
Markdownで画像のサイズを変えるには？
Markdownにはサイズの構文がありません。<img src="image.png" width="400">のようなHTMLタグを使います。
Markdownで画像を中央に置いたり、キャプションを付けたりするには？
HTMLを使います。中央揃えには画像を<p align="center">で囲み、キャプションには<figure>と<figcaption>で囲みます。対応状況はアプリによって異なります。
Markdownの画像が表示されないのはなぜ？
たいていは相対パスが間違っているか、ファイル名の大文字と小文字が一致していません。感嘆符があること、パスがMarkdownファイルからの相対パスであることを確認してください。