Markdown で画像の幅と高さを自由自在に変更！ GitHub Wiki 編

GitHub Wiki で Markdown を使って画像のサイズを変更する方法

方法 1: width 属性

最も簡単な方法は、<img> タグに width 属性を追加する方法です。この属性には、ピクセル単位または百分率で画像の幅を指定します。例えば、以下のコードは画像を幅 500 ピクセルに縮小します。

<img src="image.jpg" width="500">

画像の幅を元のサイズの何%かに保ちたい場合は、百分率を使用します。例えば、以下のコードは画像を元のサイズの 50% に縮小します。

<img src="image.jpg" width="50%">

もう1つの方法は、<img> タグに max-width 属性を追加する方法です。この属性には、画像の最大幅をピクセル単位で指定します。画像の幅が指定された値よりも小さい場合は、元のサイズで表示されますが、大きすぎる場合は自動的に縮小されます。

<img src="image.jpg" max-width="500">

補足

• 高さを調整したい場合は、height 属性を追加することができます。ただし、width 属性と同時に指定する場合は、アスペクト比が維持されるように注意する必要があります。
• 画像の品質を維持したい場合は、quality 属性を追加することができます。この属性には、0 から 100 の間の値を指定し、数字が大きくなるほど画質が向上します。
• 複数の画像を並べて表示したい場合は、HTML テーブルを使用することができます。

これらの方法を組み合わせることで、様々なレイアウトの画像を GitHub Wiki に挿入することができます。

width 属性

## 画像の幅を 500 ピクセルに縮小

![Image of the alt text](image.jpg)

## 画像の幅を元のサイズの 50% に縮小

![Image of the alt text](image.jpg)

## 画像の最大幅を 500 ピクセルに設定

![Image of the alt text](image.jpg)

高さを調整

## 画像の幅を 500 ピクセル、高さを 300 ピクセルに設定

![Image of the alt text](image.jpg)

画像の品質を維持

## 画像の品質を 80% に設定

![Image of the alt text](image.jpg)

複数の画像を並べて表示

| 画像1 | 画像2 |
|---|---|
| ![Image of the alt text 1](image1.jpg) | ![Image of the alt text 2](image2.jpg) |

画像にキャプションを追加

## 画像にキャプションを追加

![Image of the alt text](image.jpg)
<caption>これは画像の説明です</caption>

注:

• 上記のコードはあくまで例であり、必要に応じて調整してください。
• 画像のパスは、実際の画像ファイルのパスに置き換えてください。
• キャプションのテキストは、画像の説明に合った内容に変更してください。

GitHub Wiki で Markdown を使って画像のサイズを変更するその他の方法

CSS を使用して、画像のサイズをグローバルに設定したり、特定の画像にのみ適用したりすることができます。

例：すべての画像を幅 50% に縮小

img {
  width: 50%;
}

例：特定の画像のサイズを変更

.image-class {
  width: 300px;
  height: 200px;
}

![Image of the alt text](image.jpg)

HTML テーブルを使用して、複数の画像を並べて表示し、それぞれに個別にサイズを設定することができます。

<table>
  <tr>
    <td>![Image of the alt text 1](image1.jpg)</td>
    <td>![Image of the alt text 2](image2.jpg)</td>
  </tr>
</table>

ギャラリープラグインを使用する

GitHub Wiki には、画像ギャラリーを挿入するための様々なプラグインが用意されています。これらのプラグインを使用すると、画像のサイズを簡単に調整したり、様々なレイアウトを作成したりすることができます。

例：Simple Image Gallery プラグイン

1. Wiki ページに以下のコードを追加します。

<script src="https://unpkg.com/simple-image-gallery@latest/dist/simple-image-gallery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/simple-image-gallery@latest/dist/simple-image-gallery.min.css">

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

<script>
  new SimpleImageGallery('.gallery');
</script>

これらの方法は、より複雑なレイアウトや機能が必要な場合に役立ちます。

GitHub Wiki で画像のサイズを変更するには、様々な方法があります。今回紹介した方法はほんの一例であり、ニーズに合わせて最適な方法を選択することができます。