m's blog

備忘録とかメモとか

Markdownの画像に枠線をつける4つの方法

Image from Gyazo

今回は Markdown の画像に枠線をつける4つの方法 について解説したいと思います!

以下の4つの方法について解説していきます。

  • テーブルを利用する方法
  • style タグを利用する方法
  • style 属性を利用する方法
  • 外部 CSS ファイルを読み込む方法

また、それぞれの方法について、Visual Studio Code のプレビュー、Qiita、はてなブログでの対応状況も添えて紹介していきたいと思います。

目次

テーブルを利用する方法

Visual Studio Code Qiita はてなブログ

テーブルの枠線を利用する方法です。

Qiita、はてなブログ共に適用可能 ですが、はてなブログの場合は少し調整が必要 です。

書き方は以下の通りです。

|![sample image](https://i.gyazo.com/402d33d6e197d6477b57e1cbcf58765b.png)|
|:-:|

※ 上下に空行が必要です。

はてなブログの場合は1行表示だと失敗するので、以下のような調整が必要です。

||
|:-:|
|![sample image](https://i.gyazo.com/402d33d6e197d6477b57e1cbcf58765b.png)|

実際の表示は以下の通りです。

sample image

Qiita、はてなブログ共に利用可能ですが、上下に空行が必要だったり、記述方法が煩雑なのが少し気になります。

参考記事

Markdown の画像に枠線をつける

styleタグを利用する方法

Visual Studio Code Qiita はてなブログ
× ×

style タグでスタイルを指定する方法です。

Visual Studio Code のプレビューでは適用されましたが、Qiita、はてなブログでは適用されませんでした。

使いどころがあるか微妙ですが、一応、以下のような感じで記述するとVisual Studio Code のプレビューではスタイルが適用されます。

<style>
img {
    border: 1px red solid;
}
</style>

![sample image](https://i.gyazo.com/402d33d6e197d6477b57e1cbcf58765b.png)

style属性を利用する方法

Visual Studio Code Qiita はてなブログ
×

style 属性でスタイルを指定する方法です。

この方法では、style 属性を設定するために img タグで画像を表示します

style タグの場合と異なり、はてなブログではスタイルが適用されました

以下のように記述すると、枠付きの画像が表示されます。

<img src="https://i.gyazo.com/402d33d6e197d6477b57e1cbcf58765b.png"
    style="border: 1px red solid;">

実際の表示は以下のとおり。

書き方もシンプルでわかりやすく、スタイルも柔軟にカスタムできるので、個別の設定に良さそうです。

外部 CSS ファイルを読み込む方法

Visual Studio Code Qiita はてなブログ
×

外部 CSS ファイルを呼び出して適用する方法です。

この方法では、外部に CSS ファイルを設置する必要があります

以下のように記述すると、枠付きの画像が表示されます。

![sample image](https://i.gyazo.com/402d33d6e197d6477b57e1cbcf58765b.png)
<link href="[path to css file]" rel="stylesheet"></link>

外部に、CSS ファイルの設置が必要なのが少し手間ですが、複数画像に対して、まとめてスタイル設定ができる ので、特に画像が多い時に楽です。

Markdown ファイルの方でスタイルを設定する必要がない のもメリットの1つです。

また、読み込みの記述だけしておけば、あとから一括でスタイルの調整や追加も可能です。

外部 CSS ファイルの設置場所については、GitHub Pages あたりが楽そうでいいかと思います。

まとめ

以上、Markdown の画像に枠線をつける4つの方法を解説してみました!

最後に、今回の内容について、簡単にまとめてみたいと思います。

  • Qiita ならテーブル利用で枠線付け
  • はてなブログは外部 CSS ファイルの利用がオススメ!個別画像のカスタムは style 属性で