【Scrapbox】画像と動画に枠と影をつける【UserCSS】
概要
記事を作成していて、白背景の画像だと境界線がないため見づらいと感じた。
UserCSS
code:style.css
main.page img.gyazo.image,
main.page video.gyazo.image,
main.page div.gyazo.oembed.square > iframe,
main.page div.gyazo.oembed.landscape > iframe {
border: 1px solid rgb(0, 0, 0);
box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
}
main.pageは無くても動くが、ページ内のmainにのみ反映することを明示的に記述している。
画像はimg.gyazo.imageの1パターンのみだが、動画は3パターンある。
本当に3パターンだけか、あやしいですが…
使用例
https://gyazo.com/11c2867f8043c04f46543bf3562a65dc
画像の場合
Gyazoの画像を表示すると再現可能
https://gyazo.com/8e8220af721ea86f9ab3e4af653f5dcc
動画の場合(パターン1)
Gyazo Videoで録画した、音声なしの動画を表示すると再現可能
https://gyazo.com/fdae01cffe4c513e134cd79e06fa1c70
動画の場合(パターン2)
Gyazo Videoで録画した、音声ありで縦長の動画を表示すると再現可能
https://gyazo.com/bce7832d317098fd99cc2d6c16773749
動画の場合(パターン3)
Gyazo Videoで録画した、音声ありで横長の動画を表示すると再現可能