アメブロおしゃれ囲み枠ドット水玉柄で１２色つくりました♡
水玉模様の囲み枠だけではなく、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公式などで自作と偽り配布することは禁止です）
（LINE公式などで自作と偽り配布することは禁止です）
まとめ ✦
アメブロおしゃれ囲み枠をドット水玉柄で１２種類つくりました。
お気に入りの色は見つかりましたでしょうか…？♡
ポイントタグが付いているので、ただの囲み枠としてではなく情報を載せたいときに便利な囲み枠になっています。
コピペで簡単なので、ぜひ使ってみてくださいね。
囲み枠はちょこっと小さく世界観を表現できるものですが…
ホームページを持つことでもっともっと世界観を表現することができます。
女性のお客様向けに大人可愛い世界観をホームページで表現したい♡
という方はルルプチの女性向けホームページ制作をご検討ください。
↓ 女性向けホームページ制作はこちら（画像タップで移動します）
