イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロおしゃれ囲み枠│ドット水玉柄×ポイントタグ付き囲み枠12色

アメブロおしゃれ囲み枠ドット水玉柄で１２色つくりました♡
水玉模様の囲み枠だけではなく、POINT（ポイント）とタグをつけてちょこっとした情報やメモを掲載できるような囲み枠になっています。

どの色も大人可愛い色ばかりなので、女性起業家さんのお気に入りが見つかりますように…

アメブロおしゃれ囲み枠│ドット水玉柄×ポイントタグ付き12色

パステルピンク

POINT

淡い細かいドット柄に、ぷっくりしたタグを合わせたデザインです♡

COPY CODE

<style type="text/css">
  .french-dot-box {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #fff9fa;
    background-image: radial-gradient(#f0c4ce 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 1.5px solid #ebb2be;
    border-radius: 18px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3a3d;
    box-sizing: border-box;
  }
  .french-dot-tag {
    position: absolute;
    top: -14px;
    left: 20px;
    background-color: #e29ca9;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.08em;
  }
  .french-dot-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 12px;
  }
</style>

<div class="french-dot-box">
  <div class="french-dot-tag">POINT</div>
  <div class="french-dot-text">
    ここに本文を入力してください。
  </div>
</div>

チェリーレッド

POINT

淡い細かいドット柄に、ぷっくりしたタグを合わせたデザインです♡

COPY CODE

<style type="text/css">
  .french-dot-box-cherryred {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #fff5f6;
    background-image: radial-gradient(#f0b1bc 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 1.5px solid #e6a8b3;
    border-radius: 18px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3035;
    box-sizing: border-box;
  }
  .french-dot-tag-cherryred {
    position: absolute;
    top: -14px;
    left: 20px;
    background-color: #c81e3a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.08em;
  }
  .french-dot-text-cherryred {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 12px;
  }
</style>

<div class="french-dot-box-cherryred">
  <div class="french-dot-tag-cherryred">POINT</div>
  <div class="french-dot-text-cherryred">
    ここに本文を入力してください。
  </div>
</div>

ガーリーピンク

POINT

淡い細かいドット柄に、ぷっくりしたタグを合わせたデザインです♡

COPY CODE

<style type="text/css">
  .french-dot-box-girlypink {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #fff0f5;
    background-image: radial-gradient(#f8b6ce 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 1.5px solid #f2a8c0;
    border-radius: 18px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3038;
    box-sizing: border-box;
  }
  .french-dot-tag-girlypink {
    position: absolute;
    top: -14px;
    left: 20px;
    background-color: #f06292;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.08em;
  }
  .french-dot-text-girlypink {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 12px;
  }
</style>

<div class="french-dot-box-girlypink">
  <div class="french-dot-tag-girlypink">POINT</div>
  <div class="french-dot-text-girlypink">
    ここに本文を入力してください。
  </div>
</div>

ソフトブルー

POINT

淡い細かいドット柄に、ぷっくりしたタグを合わせたデザインです♡

COPY CODE

<style type="text/css">
  .french-dot-box-softblue {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #f2f7fa;
    background-image: radial-gradient(#b8d4e8 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 1.5px solid #b2d0e5;
    border-radius: 18px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #38424a;
    box-sizing: border-box;
  }
  .french-dot-tag-softblue {
    position: absolute;
    top: -14px;
    left: 20px;
    background-color: #588fae;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.08em;
  }
  .french-dot-text-softblue {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 12px;
  }
</style>

<div class="french-dot-box-softblue">
  <div class="french-dot-tag-softblue">POINT</div>
  <div class="french-dot-text-softblue">
    ここに本文を入力してください。
  </div>
</div>

くすみブルー

POINT

淡い細かいドット柄に、ぷっくりしたタグを合わせたデザインです♡

COPY CODE

<style type="text/css">
  .french-dot-box-smokyblue {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #f3f6f8;
    background-image: radial-gradient(#a3b8c7 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 1.5px solid #9cb1c0;
    border-radius: 18px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #38424a;
    box-sizing: border-box;
  }
  .french-dot-tag-smokyblue {
    position: absolute;
    top: -14px;
    left: 20px;
    background-color: #627b8e;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.08em;
  }
  .french-dot-text-smokyblue {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 12px;
  }
</style>

<div class="french-dot-box-smokyblue">
  <div class="french-dot-tag-smokyblue">POINT</div>
  <div class="french-dot-text-smokyblue">
    ここに本文を入力してください。
  </div>
</div>

ラベンダー

POINT

淡い細かいドット柄に、ぷっくりしたタグを合わせたデザインです♡

COPY CODE

<style type="text/css">
  .french-dot-box-lavender {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #f9f6fc;
    background-image: radial-gradient(#d3c1e5 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 1.5px solid #cbbaee;
    border-radius: 18px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #40364a;
    box-sizing: border-box;
  }
  .french-dot-tag-lavender {
    position: absolute;
    top: -14px;
    left: 20px;
    background-color: #9a72c3;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.08em;
  }
  .french-dot-text-lavender {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 12px;
  }
</style>

<div class="french-dot-box-lavender">
  <div class="french-dot-tag-lavender">POINT</div>
  <div class="french-dot-text-lavender">
    ここに本文を入力してください。
  </div>
</div>

バニラホワイト

POINT

淡い細かいドット柄に、ぷっくりしたタグを合わせたデザインです♡

COPY CODE

<style type="text/css">
  .french-dot-box-vanillawhite {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #fdfbf7;
    background-image: radial-gradient(#e6dfd3 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 1.5px solid #dfd8cb;
    border-radius: 18px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #454039;
    box-sizing: border-box;
  }
  .french-dot-tag-vanillawhite {
    position: absolute;
    top: -14px;
    left: 20px;
    background-color: #8c8275;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.08em;
  }
  .french-dot-text-vanillawhite {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 12px;
  }
</style>

<div class="french-dot-box-vanillawhite">
  <div class="french-dot-tag-vanillawhite">POINT</div>
  <div class="french-dot-text-vanillawhite">
    ここに本文を入力してください。
  </div>
</div>

ピスタチオ

POINT

淡い細かいドット柄に、ぷっくりしたタグを合わせたデザインです♡

COPY CODE

<style type="text/css">
  .french-dot-box-pistachio {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #f6f8f2;
    background-image: radial-gradient(#c5d8b5 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 1.5px solid #beceae;
    border-radius: 18px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3b4235;
    box-sizing: border-box;
  }
  .french-dot-tag-pistachio {
    position: absolute;
    top: -14px;
    left: 20px;
    background-color: #7b9962;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.08em;
  }
  .french-dot-text-pistachio {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 12px;
  }
</style>

<div class="french-dot-box-pistachio">
  <div class="french-dot-tag-pistachio">POINT</div>
  <div class="french-dot-text-pistachio">
    ここに本文を入力してください。
  </div>
</div>

ミント

POINT

淡い細かいドット柄に、ぷっくりしたタグを合わせたデザインです♡

COPY CODE

<style type="text/css">
  .french-dot-box-mint {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #f0fbf8;
    background-image: radial-gradient(#a3e6d5 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 1.5px solid #99d6c7;
    border-radius: 18px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #2e4540;
    box-sizing: border-box;
  }
  .french-dot-tag-mint {
    position: absolute;
    top: -14px;
    left: 20px;
    background-color: #2dd4bf;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.08em;
  }
  .french-dot-text-mint {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 12px;
  }
</style>

<div class="french-dot-box-mint">
  <div class="french-dot-tag-mint">POINT</div>
  <div class="french-dot-text-mint">
    ここに本文を入力してください。
  </div>
</div>

テラコッタ

POINT

淡い細かいドット柄に、ぷっくりしたタグを合わせたデザインです♡

COPY CODE

<style type="text/css">
  .french-dot-box-terracotta {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #fcf6f3;
    background-image: radial-gradient(#e0b5a6 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 1.5px solid #d9a898;
    border-radius: 18px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3630;
    box-sizing: border-box;
  }
  .french-dot-tag-terracotta {
    position: absolute;
    top: -14px;
    left: 20px;
    background-color: #c05c41;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.08em;
  }
  .french-dot-text-terracotta {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 12px;
  }
</style>

<div class="french-dot-box-terracotta">
  <div class="french-dot-tag-terracotta">POINT</div>
  <div class="french-dot-text-terracotta">
    ここに本文を入力してください。
  </div>
</div>

アプリコット

POINT

淡い細かいドット柄に、ぷっくりしたタグを合わせたデザインです♡

COPY CODE

<style type="text/css">
  .french-dot-box-apricot {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #fdf7f2;
    background-image: radial-gradient(#f7c9a6 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 1.5px solid #f2be96;
    border-radius: 18px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3a32;
    box-sizing: border-box;
  }
  .french-dot-tag-apricot {
    position: absolute;
    top: -14px;
    left: 20px;
    background-color: #e07a38;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.08em;
  }
  .french-dot-text-apricot {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 12px;
  }
</style>

<div class="french-dot-box-apricot">
  <div class="french-dot-tag-apricot">POINT</div>
  <div class="french-dot-text-apricot">
    ここに本文を入力してください。
  </div>
</div>

ベージュ

POINT

淡い細かいドット柄に、ぷっくりしたタグを合わせたデザインです♡

COPY CODE

<style type="text/css">
  .french-dot-box-beige {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #faf7f2;
    background-image: radial-gradient(#e3d7c5 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 1.5px solid #dcd0bd;
    border-radius: 18px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a4238;
    box-sizing: border-box;
  }
  .french-dot-tag-beige {
    position: absolute;
    top: -14px;
    left: 20px;
    background-color: #a3907c;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.08em;
  }
  .french-dot-text-beige {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 12px;
  }
</style>

<div class="french-dot-box-beige">
  <div class="french-dot-tag-beige">POINT</div>
  <div class="french-dot-text-beige">
    ここに本文を入力してください。
  </div>
</div>

ブラウン

POINT

淡い細かいドット柄に、ぷっくりしたタグを合わせたデザインです♡

COPY CODE

<style type="text/css">
  .french-dot-box-darkbrown {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #f7f3f0;
    background-image: radial-gradient(#d6c5b8 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 1.5px solid #cbbaac;
    border-radius: 18px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #382d26;
    box-sizing: border-box;
  }
  .french-dot-tag-darkbrown {
    position: absolute;
    top: -14px;
    left: 20px;
    background-color: #5c4334;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.08em;
  }
  .french-dot-text-darkbrown {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 12px;
  }
</style>

<div class="french-dot-box-darkbrown">
  <div class="french-dot-tag-darkbrown">POINT</div>
  <div class="french-dot-text-darkbrown">
    ここに本文を入力してください。
  </div>
</div>

使い方の３ステップ

STEP 01

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

STEP 02

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

STEP 03

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

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

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

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

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

まとめ ✦

アメブロおしゃれ囲み枠をドット水玉柄で１２種類つくりました。
お気に入りの色は見つかりましたでしょうか…？♡

ポイントタグが付いているので、ただの囲み枠としてではなく情報を載せたいときに便利な囲み枠になっています。
コピペで簡単なので、ぜひ使ってみてくださいね。

囲み枠はちょこっと小さく世界観を表現できるものですが…
ホームページを持つことでもっともっと世界観を表現することができます。

女性のお客様向けに大人可愛い世界観をホームページで表現したい♡
という方はルルプチの女性向けホームページ制作をご検討ください。

↓ 女性向けホームページ制作はこちら（画像タップで移動します）

イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロおしゃれ囲み枠│ドット水玉柄×ポイントタグ付き囲み枠12色

アメブロおしゃれ囲み枠│ドット水玉柄×ポイントタグ付き12色

パステルピンク

チェリーレッド

ガーリーピンク

ソフトブルー

くすみブルー

ラベンダー

バニラホワイト

ピスタチオ

ミント

テラコッタ

アプリコット

ベージュ

ブラウン

使い方の３ステップ

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

まとめ ✦

CATEGORY