MENU
暮らしを少し便利にするアプリとサービスを作っています
  1. ホーム
  2. Wordress
  3. スクリーンショットをスマホ風の枠で囲むCSS【コピペOK・永久保存版】

スクリーンショットをスマホ風の枠で囲むCSS【コピペOK・永久保存版】

Wordress

アプリ開発のブログを書いていると、必ず必要になるのがスクリーンショットです。

私はこれまで、画像に細い枠線を1本引くだけで済ませていました。ただ、どうにも「ただの画像」に見えてしまう。読んでいる人に「これはスマホの画面です」と伝わりにくいのが、ずっと気になっていました。

そこで、CSSだけでスマホのモックアップ風の枠を作ってみたところ、想像以上に良かったので共有します。プラグインは不要、CSSを30行ほど追加するだけです。

目次

なぜプラグインを使わないのか

WordPressにも「デバイスモックアップ」系のプラグインはあります。ただ、この用途に限って言えば、CSSで書いてしまったほうが良いと考えています。

  • この手のプラグインは数が少なく、更新が止まっているものが多い
  • やりたいことは「枠を付ける」だけなので、プラグインを1つ増やすほどではない
  • 自分で書けば、色も角丸も自由に調整できる
  • 表示速度に影響しない

実際に書いてみると、驚くほど短いコードで実現できました。

CSS

子テーマの style.css、または「外観 → カスタマイズ → 追加CSS」に貼り付けてください。
画像の大きさは幅450ピクセルくらいがいいです。

/* iPhone 風フレーム */
.phone-mock {
  --frame: 10px;              /* ベゼルの太さ */
  --radius: 2.4rem;
  width: min(300px, 78%);
  margin: 2.5em auto;
  padding: var(--frame);
  background: #1c1c1e;
  border-radius: var(--radius);
  box-shadow: 0 0 0 2px #3a3a3c, 0 14px 30px rgba(0, 0, 0, .25);
  position: relative;
}

.phone-mock img {
  display: block;
  width: 100%;
  border-radius: calc(var(--radius) - var(--frame));
}

/* Dynamic Island 風 */
.phone-mock::before {
  content: "";
  position: absolute;
  top: calc(var(--frame) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 18px;
  background: #000;
  border-radius: 999px;
  z-index: 2;
}

.phone-mock figcaption {
  color: #888;
  font-size: .8rem;
  text-align: center;
  padding-top: .8em;
}

/* Android 風（角丸控えめ・パンチホール） */
.phone-mock.is-android {
  --radius: 1.6rem;
  background: #2b2b2b;
}

.phone-mock.is-android::before {
  width: 12px;
  height: 12px;
  left: auto;
  right: calc(var(--frame) + 14px);
  transform: none;
}

使い方

記事本文に、このHTMLを書くだけです。

<figure class="phone-mock">
  <img src="画像のURL" alt="画面の説明">
  <figcaption>キャプション</figcaption>
</figure>

Android風にしたいときは、クラスを1つ足します。

<figure class="phone-mock is-android">

毎回HTMLを書くのが面倒であれば、同期パターン（再利用ブロック）として登録しておくと、画像を差し替えるだけで使い回せます。

2枚を横に並べる

修正前・修正後の比較や、画面遷移を見せたいときに便利です。ラッパーを1つ追加します。

.phone-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  margin: 2.5em 0;
}

.phone-row .phone-mock {
  width: min(260px, 42%);
  margin: 0;                 /* 単体用の margin:auto を打ち消す */
}

/* スマホでは縦積みに */
@media (max-width: 600px) {
  .phone-row .phone-mock { width: min(280px, 80%); }
}
<div class="phone-row">
  <figure class="phone-mock">
    <img src="before.png" alt="修正前">
    <figcaption>修正前</figcaption>
  </figure>
  <figure class="phone-mock">
    <img src="after.png" alt="修正後">
    <figcaption>修正後</figcaption>
  </figure>
</div>

3枚並べたい場合は width: min(200px, 30%) に変えるだけです。flex-wrap: wrap を入れてあるので、枚数が増えても自動で折り返してくれます。

カスタマイズのポイント

冒頭のCSS変数を変えるだけで、見た目を調整できます。

変数・プロパティ役割変更例
--frameベゼルの太さ14px にすると厚みのある古い端末風
--radius角丸の大きさ小さくするとAndroid寄りの印象に
backgroundフレームの色#e8e8e8 でシルバー系
box-shadow影の強さ第2引数を弱めると落ち着いた印象に

ノッチが不要なら、.phone-mock::before のブロックごと削除してください。それだけでシンプルな黒枠になります。

実際に使ってみて気づいたこと

画像がくっきり見えるようになりました。

これは予想外の効果でした。黒いフレームと影が入ることで、背景と画像の境目がはっきりします。白背景のアプリ画面を白いブログに貼ると輪郭が曖昧になりがちですが、それが解消されました。

もうひとつ。スクリーンショットは書き出したままのサイズ（1290×2796 など）で貼らず、幅600〜800px程度にリサイズしてから使うことをおすすめします。表示も軽くなりますし、フレームとの相性も良くなります。

おわりに

たった30行のCSSですが、記事の印象がかなり変わりました。もっと早く知りたかった、というのが正直な感想です。

アプリのスクリーンショットをブログに載せる機会が多い方は、ぜひ試してみてください。コピペするだけです。

アプリ開発 / SINQWELL

Wordress
目次