【Scrapbox】画像と動画に枠と影をつける【UserCSS】
概要
記事を作成していて、白背景の画像だと境界線がないため見づらいと感じた。
UserCSS
code:style.css
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にのみ反映することを明示的に記述している。
画像はリンク有無の２パターンのみだが、動画は３パターンある。
本当に3パターンだけか、あやしいですが…
使用例
https://gyazo.com/11c2867f8043c04f46543bf3562a65dc
画像の場合（パターン１）
Gyazoの画像を表示すると再現可能
https://gyazo.com/11c2867f8043c04f46543bf3562a65dc https://scrapbox.io/Rutile3-Tech/%E3%80%90VS_Code%E3%80%91%E5%90%8C%E3%81%98%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%82%92%E8%A4%87%E6%95%B0%E3%81%AE%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%81%A7%E9%96%8B%E3%81%8F
画像の場合（パターン２）
リンク付きのGyazoの画像を表示すると再現可能
https://gyazo.com/8e8220af721ea86f9ab3e4af653f5dcc
動画の場合（パターン１）
Gyazo Videoで録画した、音声なしの動画を表示すると再現可能
https://gyazo.com/fdae01cffe4c513e134cd79e06fa1c70
動画の場合（パターン２）
Gyazo Videoで録画した、音声ありで縦長の動画を表示すると再現可能
https://gyazo.com/bce7832d317098fd99cc2d6c16773749
動画の場合（パターン３）
Gyazo Videoで録画した、音声ありで横長の動画を表示すると再現可能