分かりやすく、使いやすく。

画像を挿入・表示する方法

スポンサーリンク

markdown で画像を表示する方法です。

  1. リンクなしの画像表示
  2. リンク有りの画像表示


リンクなしの画像表示

次の例では /img/sanma.gif という画像を表示し、alt 属性に「サンマの塩焼き」と設定します。

Markdown(サンプルコード)
1
![サンマの塩焼き](/img/sanma.gif) 

↓こんな感じでHTMLに変換されます。

html(サンプルコード)
1
<p><img src="/img/sanma.gif" alt="サンマの塩焼き" /></p> 

↓画面に表示するとこうなります。

サンマの塩焼き

リンク有りの画像表示

次の例では /img/sanma.gif という画像を表示し、alt 属性に「サンマの塩焼き」と設定します。さらにクリックしたら http://sozai.rash.jp/p/000054.html にジャンプするようリンクを設定しています。(リンク先はこの画像の提供元の素材屋花子さんです。)

Markdown(サンプルコード)
1
[![サンマの塩焼き](/img/sanma.gif)](http://sozai.rash.jp/p/000054.html) 

↓こんな感じでHTMLに変換されます。

html(サンプルコード)
1
2
3
4
5
<p>
<a href="http://sozai.rash.jp/p/000054.html">
<img src="/img/sanma.gif" alt="サンマの塩焼き" />
</a>
</p> 

↓画面に表示するとこうなります。

サンマの塩焼き

スポンサーリンク
スポンサーリンク