画像を表示する

画像を記事の中に表示してみましょう。わかりやすいイラストが入ると、記事の質がぐっと高まります。

画像の例としてLinuxのペンギン君で試してみましょう。

上記が表示した例です。

最初に、画像を配置する必要があります。

準備した画像の名前が「linux-penguin.png」だとして、以下のディレクトリの中に、画像を配置しましょう。

templates/static/images

このディレクトリの中に画像を配置しましょう。

画像の配置が完了したら、画像を表示してみましょう。

記事の中に次の一行を追加しましょう。

<img src="/images/linux-penguin.png">

画像が表示されました。

imgタグというのは、画像を表示するためのHTMLの機能です。srcという属性に、画像のパスを指定します。

画像のサイズを指定したい場合は、スタイルシートを使用して以下のように書きましょう。

<img src="/images/linux-penguin.png" style="width:400px">

画像のサイズを、スマートフォンとPCの両方で対応したい場合は、以下のように書きましょう。

スマートフォンの場合は、横画面の98%、パソコンの場合は、400pxで表示されます。

<img src="/images/linux-penguin.png" style="width:98%;max-width:400px;">

画像をボーダーで囲みたい場合は、以下のように書きましょう。

<img src="/images/linux-penguin.png" style="border:1px solid #ddd">

1pxの薄い灰色のボーダーで囲まれます。

はい。

templates/static/images/foo/bar.png

のように、サブディレクトリにしても大丈夫です。

画像の指定はは

<img src="/images/foo/bar.png">

になります。