イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロおしゃれ囲み枠│ドット水玉柄カードデザイン12色【コピペでOK】

アメブロで使えるおしゃれな印象を持つ囲み枠をドット水玉柄でつくりました。
女性向けに大人可愛い色のみ１２色で揃えています。

中がカードになっていて、白い背景なので文字を入力しても読みにくくありません。
セッション・講座などに関する情報発信にご活用ください。

アメブロおしゃれ囲み枠│ドット水玉柄カードデザイン12色

ベビーピンク

Information

やわらかいドット（水玉）柄の枠の中に、浮き上がるような白いカードを配置した大人可愛いデザインです♡

COPY CODE

<style type="text/css">
  .dot-card-box-babypink {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px 20px;
    background-color: #fff5f7;
    background-image: radial-gradient(#f7c1cb 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #f2bdc6;
    border-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a383b;
    box-sizing: border-box;
  }
  .dot-card-inner-babypink {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(230, 170, 180, 0.15);
  }
  .dot-card-title-babypink {
    font-size: 15px;
    font-weight: 700;
    color: #e37b8d;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .dot-card-text-babypink {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="dot-card-box-babypink">
  <div class="dot-card-inner-babypink">
    <div class="dot-card-title-babypink">Information</div>
    <div class="dot-card-text-babypink">
      ここに本文を入力してください。
    </div>
  </div>
</div>

ソフトブルー

Information

やわらかいドット（水玉）柄の枠の中に、浮き上がるような白いカードを配置した大人可愛いデザインです♡

COPY CODE

<style type="text/css">
  .dot-card-box-softblue {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px 20px;
    background-color: #f2f7fa;
    background-image: radial-gradient(#b8d4e8 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #b2d0e5;
    border-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #38424a;
    box-sizing: border-box;
  }
  .dot-card-inner-softblue {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(150, 180, 205, 0.15);
  }
  .dot-card-title-softblue {
    font-size: 15px;
    font-weight: 700;
    color: #588fae;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .dot-card-text-softblue {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="dot-card-box-softblue">
  <div class="dot-card-inner-softblue">
    <div class="dot-card-title-softblue">Information</div>
    <div class="dot-card-text-softblue">
      ここに本文を入力してください。
    </div>
  </div>
</div>

ベージュ

Information

やわらかいドット（水玉）柄の枠の中に、浮き上がるような白いカードを配置した大人可愛いデザインです♡

COPY CODE

<style type="text/css">
  .dot-card-box-beige {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px 20px;
    background-color: #fcf8f3;
    background-image: radial-gradient(#e0d2c1 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #dcd0c0;
    border-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a433d;
    box-sizing: border-box;
  }
  .dot-card-inner-beige {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(180, 165, 150, 0.15);
  }
  .dot-card-title-beige {
    font-size: 15px;
    font-weight: 700;
    color: #9e8268;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .dot-card-text-beige {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="dot-card-box-beige">
  <div class="dot-card-inner-beige">
    <div class="dot-card-title-beige">Information</div>
    <div class="dot-card-text-beige">
      ここに本文を入力してください。
    </div>
  </div>
</div>

ラベンダー

Information

やわらかいドット（水玉）柄の枠の中に、浮き上がるような白いカードを配置した大人可愛いデザインです♡

COPY CODE

<style type="text/css">
  .dot-card-box {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px 20px;
    background-color: #f7f3f8;
    background-image: radial-gradient(#d6c0df 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #d2becc;
    border-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #423843;
    box-sizing: border-box;
  }
  .dot-card-inner {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(180, 150, 185, 0.12);
  }
  .dot-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #88628e;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .dot-card-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="dot-card-box">
  <div class="dot-card-inner">
    <div class="dot-card-title">Information</div>
    <div class="dot-card-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

チェリーレッド

Information

やわらかいドット（水玉）柄の枠の中に、浮き上がるような白いカードを配置した大人可愛いデザインです♡

COPY CODE

<style type="text/css">
  .dot-card-box-cherryred {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px 20px;
    background-color: #fff5f6;
    background-image: radial-gradient(#f0b1bc 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #e6a8b3;
    border-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3035;
    box-sizing: border-box;
  }
  .dot-card-inner-cherryred {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(200, 100, 120, 0.15);
  }
  .dot-card-title-cherryred {
    font-size: 15px;
    font-weight: 700;
    color: #c81e3a;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .dot-card-text-cherryred {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="dot-card-box-cherryred">
  <div class="dot-card-inner-cherryred">
    <div class="dot-card-title-cherryred">Information</div>
    <div class="dot-card-text-cherryred">
      ここに本文を入力してください。
    </div>
  </div>
</div>

くすみピンク

Information

やわらかいドット（水玉）柄の枠の中に、浮き上がるような白いカードを配置した大人可愛いデザインです♡

COPY CODE

<style type="text/css">
  .dot-card-box-smokypink {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px 20px;
    background-color: #fcf5f6;
    background-image: radial-gradient(#dcaeb6 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #d8a8b1;
    border-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3a3d;
    box-sizing: border-box;
  }
  .dot-card-inner-smokypink {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(180, 130, 140, 0.12);
  }
  .dot-card-title-smokypink {
    font-size: 15px;
    font-weight: 700;
    color: #a66270;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .dot-card-text-smokypink {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="dot-card-box-smokypink">
  <div class="dot-card-inner-smokypink">
    <div class="dot-card-title-smokypink">Information</div>
    <div class="dot-card-text-smokypink">
      ここに本文を入力してください。
    </div>
  </div>
</div>

ミント

Information

やわらかいドット（水玉）柄の枠の中に、浮き上がるような白いカードを配置した大人可愛いデザインです♡

COPY CODE

<style type="text/css">
  .dot-card-box-icemint {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px 20px;
    background-color: #f0fdfa;
    background-image: radial-gradient(#99f6e4 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #93e6d6;
    border-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #2d4a43;
    box-sizing: border-box;
  }
  .dot-card-inner-icemint {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.12);
  }
  .dot-card-title-icemint {
    font-size: 15px;
    font-weight: 700;
    color: #14b8a6;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .dot-card-text-icemint {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="dot-card-box-icemint">
  <div class="dot-card-inner-icemint">
    <div class="dot-card-title-icemint">Information</div>
    <div class="dot-card-text-icemint">
      ここに本文を入力してください。
    </div>
  </div>
</div>

セージ

Information

やわらかいドット（水玉）柄の枠の中に、浮き上がるような白いカードを配置した大人可愛いデザインです♡

COPY CODE

<style type="text/css">
  .dot-card-box-sage {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px 20px;
    background-color: #f4f6f3;
    background-image: radial-gradient(#beccc0 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #b8c7ba;
    border-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3e4740;
    box-sizing: border-box;
  }
  .dot-card-inner-sage {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(135, 155, 140, 0.12);
  }
  .dot-card-title-sage {
    font-size: 15px;
    font-weight: 700;
    color: #6b8270;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .dot-card-text-sage {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="dot-card-box-sage">
  <div class="dot-card-inner-sage">
    <div class="dot-card-title-sage">Information</div>
    <div class="dot-card-text-sage">
      ここに本文を入力してください。
    </div>
  </div>
</div>

テラコッタ

Information

やわらかいドット（水玉）柄の枠の中に、浮き上がるような白いカードを配置した大人可愛いデザインです♡

COPY CODE

<style type="text/css">
  .dot-card-box-terracotta {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px 20px;
    background-color: #fbf5f2;
    background-image: radial-gradient(#e2baaa 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #ddb09e;
    border-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3a35;
    box-sizing: border-box;
  }
  .dot-card-inner-terracotta {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(185, 110, 80, 0.12);
  }
  .dot-card-title-terracotta {
    font-size: 15px;
    font-weight: 700;
    color: #b85b3a;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .dot-card-text-terracotta {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="dot-card-box-terracotta">
  <div class="dot-card-inner-terracotta">
    <div class="dot-card-title-terracotta">Information</div>
    <div class="dot-card-text-terracotta">
      ここに本文を入力してください。
    </div>
  </div>
</div>

アプリコット

Information

やわらかいドット（水玉）柄の枠の中に、浮き上がるような白いカードを配置した大人可愛いデザインです♡

COPY CODE

<style type="text/css">
  .dot-card-box-apricot {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px 20px;
    background-color: #fdf6f0;
    background-image: radial-gradient(#f8c8a0 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #f3bf95;
    border-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3a32;
    box-sizing: border-box;
  }
  .dot-card-inner-apricot {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(220, 130, 70, 0.12);
  }
  .dot-card-title-apricot {
    font-size: 15px;
    font-weight: 700;
    color: #db7635;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .dot-card-text-apricot {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="dot-card-box-apricot">
  <div class="dot-card-inner-apricot">
    <div class="dot-card-title-apricot">Information</div>
    <div class="dot-card-text-apricot">
      ここに本文を入力してください。
    </div>
  </div>
</div>

バニラ

Information

やわらかいドット（水玉）柄の枠の中に、浮き上がるような白いカードを配置した大人可愛いデザインです♡

COPY CODE

<style type="text/css">
  .dot-card-box-white {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px 20px;
    background-color: #fcfcfc;
    background-image: radial-gradient(#d5d8dc 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #d0d5dd;
    border-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3b4048;
    box-sizing: border-box;
  }
  .dot-card-inner-white {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  .dot-card-title-white {
    font-size: 15px;
    font-weight: 700;
    color: #5a626e;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .dot-card-text-white {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="dot-card-box-white">
  <div class="dot-card-inner-white">
    <div class="dot-card-title-white">Information</div>
    <div class="dot-card-text-white">
      ここに本文を入力してください。
    </div>
  </div>
</div>

イエロー

Information

やわらかいドット（水玉）柄の枠の中に、浮き上がるような白いカードを配置した大人可愛いデザインです♡

COPY CODE

<style type="text/css">
  .dot-card-box-pastelyellow {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px 20px;
    background-color: #fffdf0;
    background-image: radial-gradient(#f3e59a 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #ece090;
    border-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a4532;
    box-sizing: border-box;
  }
  .dot-card-inner-pastelyellow {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(220, 200, 80, 0.12);
  }
  .dot-card-title-pastelyellow {
    font-size: 15px;
    font-weight: 700;
    color: #c49e2b;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .dot-card-text-pastelyellow {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="dot-card-box-pastelyellow">
  <div class="dot-card-inner-pastelyellow">
    <div class="dot-card-title-pastelyellow">Information</div>
    <div class="dot-card-text-pastelyellow">
      ここに本文を入力してください。
    </div>
  </div>
</div>

使い方の３ステップ

STEP 01

使いたい素材のコード（英語の枠内）をすべてコピーします。

STEP 02

アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。

STEP 03

「通常表示」に戻し、枠内の文字を書き換えたら完成です♡

アメブロ囲み枠ご使用時のお願い

ブログやホームページにコピペして使っていただいてOKです
商用利用可能です
無断転載・再配布は禁止です

デザインの著作権は捨てていません
（LINE公式などで自作と偽り配布することは禁止です）

ご使用時の報告は不要です

まとめ ✦

アメブロのおしゃれな囲み枠をつくろう！と決めて、水玉ドット柄の可愛いデザインをつくりました。
「アメブロの囲み枠を探してみたけど、女性向けのおしゃれな囲み枠がない…」
という方のお役に立てれば嬉しいです。

囲み枠は女性起業家さんのサロン・教室のほんの一部世界観を表現するものですが、ホームページがあればもっともっと世界観を表現することができます。
ルルプチでは、女性起業家さん・女性向けに世界観を体験できる「体験型のホームページ」を制作しています。

気になった方はルルプチのホームページサービスをご覧ください ↓

イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロおしゃれ囲み枠│ドット水玉柄カードデザイン12色【コピペでOK】

アメブロおしゃれ囲み枠│ドット水玉柄カードデザイン12色

ベビーピンク

ソフトブルー

ベージュ

ラベンダー

チェリーレッド

くすみピンク

ミント

セージ

テラコッタ

アプリコット

バニラ

イエロー

使い方の３ステップ

アメブロ囲み枠ご使用時のお願い

まとめ ✦

CATEGORY