Apple WatchのスクリーンショットをCSSでいい感じにしてみる

Apple Watchのスクリーンショットをブログにそのまま貼るとなんともダサい感じになります。



これがそのまま貼ったやつ↓



なんか間抜けに縦長&馬面みたいでダサい。実際にApple Watchで見る画面ともかけ離れていて、イメージしにくい。



Apple Watchのユーザーガイドを見ると上手く加工してあります。



いちいち画像を加工するのはめんどうなのでCSSで加工してやるのがいいでしょう。



こんな感じになります。



ソースはこんな感じで



/* スクリーンショットに黒背景・余白を足す */
div.apple-watch-img {
width: 370px; /* ①好みで数値を変えましょう */
height: 420px; /* ②好みで数値を変えましょう */
margin: 0 auto; /* 画像を真ん中に寄せたいのであれば */
border-radius: 40px;
background: #000000;
}

/* スクリーンショットを黒背景の真ん中へ */
div.apple-watch-img img {
width: 300px; /* ③好みで数値を変えましょう */
height: 375px; /* ④好みで数値を変えましょう ※③と④は縦横比を元のサイズ(312×390)からあまり変えないように */
border: initial;
position: relative;
top: 23px; /* ②-④/2で真ん中にくるように */
left: 35px; /* ②―③/2で真ん中に来るように */
}