Apple Watchのスクリーンショットを載せてみると……
▶︎ 【編集後記】Apple Watchのスクリーンショットに黒枠を付けて見栄えよくする – iをありがとう
なるほど、確かに少々スクリーショットの見栄えに難があるかもしれませんので、この打開策としてキャプチャ画像を「それっぽく」飾るCSSを作ってみました。
装飾 Before & After
まずこちらがスクリーンショットそのままの画像で、サイズは312 x 390 pixel。
そしてこちらはCSSで装飾を施したもので、さらに画像を240 x 300 pixelに縮小表示されるようにしたもの（iPhoneの縦画面対策）。
スタイルシート（CSS）
スタイルシートの記述は以下のようになっています。
div.aw {
width:240px;
height:300px;
padding: 17px;
background: linear-gradient(to bottom, rgba(30,30,38,1) 0%,rgba(0,0,0,1) 100%);
border: 1px solid #666;
border-radius: 30px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
}
div.aw img {
width: 240px;
height: 300px;
}
このまま使っても構いませんが、あくあでも参考としてこさえたものなのでご覧の通り雑なCSSになっています。ブログなどで使われる場合は各自好きなように弄ってください (^_^;A
※ 使用に際してのアドバイス等は一切お受けできません、ご了承ください。
その他見本
