CSSで作る「丸いプロフィール画像＋影＋枠」の簡単・綺麗な作り方

WordPress の固定ページやプロフィール欄でよく見かける「丸いプロフィール画像」＋「影」＋「枠」。
実は、CSSだけでとても簡単に作れます。

この記事では、コピペだけですぐ使える最適なコードを紹介します。

1 丸いプロフィール画像の基本（border-radius）

画像を丸くするには border-radius: 50%; を指定するだけです。

<div class="profile-circle">
    <img src="https://example.com/wp-content/uploads/20××/××/sample.jpg" alt="プロフィール">
</div>

.profile-circle img {
    width: 180px; /* 画像サイズ */
    height: 180px; /* 正円にするため同じ数値 */
    object-fit: cover; /* 画像をトリミングしてフィット */
    border-radius: 50%; /* 丸くする */
}

2 枠線（border）を追加する

枠をつけると “きちんとしたプロフィール感” が出ます。

.profile-circle img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff; /* 白い枠線 */
}

3 影（box-shadow）をつける

影を加えると、ふわっと浮いた柔らかい印象に。

.profile-circle img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* ふわっとした影 */
}

4 応用：中央揃え＋余白付きデザイン

LPやプロフィールページで使いやすいレイアウトです。

.profile-wrapper {
    text-align: center; /* 画像を中央に */
    margin: 40px 0;
}
.profile-wrapper img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.16);
}

5 完全コピペ版（HTML＋CSS）まとめ

<div class="profile-wrapper">
  <img src="https://example.com/wp-content/uploads/20××/××/sample.jpg" alt="プロフィール">
</div>

/* ------------------------------------------------
 * 丸いプロフィール画像＋影＋枠
 * ---------------------------------------------- */

.profile-wrapper {
    text-align: center;         /* 画像全体を中央寄せにする */
    margin: 40px 0;             /* 上下の余白を確保してデザインの間隔を取る */
}
.profile-wrapper img {
    width: 200px;               /* 画像の横幅を200pxに指定 */
    height: 200px;              /* 高さも200pxにして正方形→円形にするため */
    object-fit: cover;          /* 画像を切り抜いて、枠いっぱいにきれいに収める */
    border-radius: 50%;         /* 完全な円にするための設定 */
    border: 5px solid #fff;     /* 白い枠線（太め5px）を追加 */
    box-shadow: 0 6px 16px rgba(0,0,0,0.16); /* ふわっと浮く柔らかい影を付ける */
}

6 完成イメージ

7 まとめ

このコードは WordPress の固定ページや投稿本文にそのまま貼るだけでOKです。

アイキャッチやプロフィール、LPの信頼性UPに最適なデザインです。