Tomo's Diary

画像表示のサンプル

画像表示のサンプル.

このページでは、Markdown で画像を表示する様々な方法を紹介します。

基本的な画像表示

サンプル画像

サイズを指定した画像(HTML タグ使用)

ワイドな画像

左寄せ・右寄せ画像

左寄せ画像

この文章は画像の右側に回り込みます。画像を左側に配置して、テキストを右側に流すレイアウトです。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

右寄せ画像

この文章は画像の左側に回り込みます。画像を右側に配置して、テキストを左側に流すレイアウトです。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

中央揃えの画像

中央揃え画像

画像にリンクを付ける

クリックできる画像

複数画像のギャラリー風配置

画像1 画像2 画像3 画像4

ローカル画像の使用方法

ローカルに保存した画像を使用する場合は、以下のようにします:

![ローカル画像](/images/465-200x300.jpg)

実際の表示例:

ローカル画像の例

※ 画像ファイルは images フォルダに配置し、Eleventy の設定で静的ファイルとしてコピーする必要があります。

2025年01月の記事