10
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【GitHub】コメント内の画像に枠線(ボーダー)をつける

Last updated at Posted at 2017-05-19

GitHubでプルリクコメントを書く際、よくスクショを添付する。
背景が白いページだと、どこまでが画像なのかがわかりにくい。
そこで、画像に枠をつけたい。

コード

いろいろ調べたり実験した結果、以下のコードでできた。

<kbd><img src="画像URL" /></kbd>

参考 : http://stackoverflow.com/questions/37349314/is-it-possible-to-add-border-to-image-in-github-markdown

GitHubならコメント欄に画像をドラッグ・アンド・ドロップすれば自動で画像がアップロードされ、ディフォルトの画像挿入コードが生成されるので、画像URLはそこから取れば良い。

kbdタグというのはユーザーが入力する内容であることを示すものとのこと。初めて見た。
http://www.htmq.com/html5/kbd.shtml

きちんとした書き方と言うよりは現状のGitHubのマークダウンレンダリングの仕様を利用したハック的なものなので、今後GitHubの仕様が変わると使えなくなるかもしれませんね。

![2017-05-19 11 43 13](https://cloud.githubusercontent.com/assets/7123644/26231237/0d584952-3c89-11e7-866e-9078bd8207a8.png)

---

<kbd><img src="https://cloud.githubusercontent.com/assets/7123644/26231237/0d584952-3c89-11e7-866e-9078bd8207a8.png" /></kbd>

スクリーンショット 2017-05-19 11.51.08.png

10
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?