ブログでApple Watchのスクリーンショットの見栄えをよくするスタイル設定

Apple Watch Frame

ブログでApple Watchを紹介する時に困るのがスクリーンショット。iPhoneと異なり、ディスプレーからベゼルまでの間に余白があるのでそのまま貼り付けてしまうと違和感があります。

四角いスクリーンショットは味気ない。フレームに埋め込むサービスは以前紹介しましたが、何枚もあると埋め込み画像を作るのも割と手間です。

そこで画像を貼り付ける際にスタイル設定で装飾してやります。

これが普通に貼り付けたApple Watchのスクリーンショット。ちなみに撮影方法はサイドボタンを押しながらデジタルクラウンを押すとiPhone側の写真.appのカメラロールに格納されます。

Apple Watch Frame

こちらがスタイル設定したものです(RSSフィードだとスタイルは削除されて表示されます)。

Apple Watch Frame

①画像の外側に余白を設定、②黒で塗りつぶし、③角丸にしています。imgタグのstyle属性に指定するかstyle.cssを用意してclass属性に指定します。

注意するのはスクリーンショットのサイズ。38mmモデルの解像度は縦340×横272、42mmモデルは390×312となっておりますが、(好みの問題ですが)そのまま原寸で貼り付けるとボヤッとしてしまうので縦横比 1.25:1.00 に合わせて150×188としています。

この大きさに合わせて余白10px、半径15pxにしています。ご自分のスクリーンショットのサイズに合わせて調整してみてください。