イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロおしゃれ囲み枠│マスキングテープ付きドット水玉柄デザイン12色

アメブロおしゃれ可愛い囲み枠をマスキングテープテープ付きドット柄デザインを１２色つくりました𓂂𓏸
サンプルやコピーコードはCOLUMN（コラム）となっていますが、タイトルとしてアレンジするのもおすすめです。

大人可愛いデザインなので女性向けに発信されている女性起業家さん・女性ブロガーさんの発信にぴったり♡

アメブロおしゃれ囲み枠│マスキングテープ付ドット水玉柄１２色

パステルピンク

COLUMN

上部にマスキングテープを留めたような、パステルピンクの水玉デザインです。

COPY CODE

<style type="text/css">
  .tape-dot-box-pastelpink {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #fffafb;
    background-image: radial-gradient(#f8a8be 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #f2cdd6;
    border-radius: 14px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3b3e;
    box-sizing: border-box;
  }
  .tape-dot-tape-pastelpink {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px dashed #f8a8be;
    color: #d6708b;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
  .tape-dot-text-pastelpink {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 14px;
    border-radius: 10px;
  }
</style>

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

くすみピンク

COLUMN

上部にマスキングテープを留めたような、甘すぎないくすみピンクの水玉デザインです。

COPY CODE

<style type="text/css">
  .tape-dot-box-smokypink {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #faf6f7;
    background-image: radial-gradient(#d4aab5 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #e2cad0;
    border-radius: 14px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #42383a;
    box-sizing: border-box;
  }
  .tape-dot-tape-smokypink {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px dashed #d4aab5;
    color: #a86b7b;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
  .tape-dot-text-smokypink {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 14px;
    border-radius: 10px;
  }
</style>

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

チェリーレッド

COLUMN

上部にマスキングテープを留めたような、華やかなチェリーレッドの水玉デザインです。

COPY CODE

<style type="text/css">
  .tape-dot-box-cherryred {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #fff8f8;
    background-image: radial-gradient(#e5536c 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #f4aab6;
    border-radius: 14px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #402e32;
    box-sizing: border-box;
  }
  .tape-dot-tape-cherryred {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.88);
    border: 1px dashed #e5536c;
    color: #d12e4d;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
  .tape-dot-text-cherryred {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 14px;
    border-radius: 10px;
  }
</style>

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

ブルー

COLUMN

上部にマスキングテープを留めたような、爽やかで優しいソフトブルーの水玉デザインです。

COPY CODE

<style type="text/css">
  .tape-dot-box-softblue {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #f7fafc;
    background-image: radial-gradient(#8db2d5 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #c0d5e8;
    border-radius: 14px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #343e47;
    box-sizing: border-box;
  }
  .tape-dot-tape-softblue {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px dashed #8db2d5;
    color: #4f7ca8;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
  .tape-dot-text-softblue {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 14px;
    border-radius: 10px;
  }
</style>

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

くすみブルー

COLUMN

上部にマスキングテープを留めたような、大人っぽく洗練されたくすみブルーの水玉デザインです。

COPY CODE

<style type="text/css">
  .tape-dot-box-smokyblue {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #f6f8f9;
    background-image: radial-gradient(#93a5b8 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #c5d0dc;
    border-radius: 14px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #383e45;
    box-sizing: border-box;
  }
  .tape-dot-tape-smokyblue {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px dashed #93a5b8;
    color: #5c7085;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
  .tape-dot-text-smokyblue {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 14px;
    border-radius: 10px;
  }
</style>

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

ラベンダー

COLUMN

上部にマスキングテープを留めたような、上品で可憐なラベンダーの水玉デザインです。

COPY CODE

<style type="text/css">
  .tape-dot-box-lavender {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #faf7fc;
    background-image: radial-gradient(#ba9bc9 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #d8c4e2;
    border-radius: 14px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3e3845;
    box-sizing: border-box;
  }
  .tape-dot-tape-lavender {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px dashed #ba9bc9;
    color: #885f9e;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
  .tape-dot-text-lavender {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 14px;
    border-radius: 10px;
  }
</style>

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

チョコレートブラウン

COLUMN

上部にマスキングテープを留めたような、深みと温かみのあるチョコブラウンの水玉デザインです。

COPY CODE

<style type="text/css">
  .tape-dot-box-chocolat {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #faf7f5;
    background-image: radial-gradient(#a37b6d 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #d4c2b9;
    border-radius: 14px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3b322e;
    box-sizing: border-box;
  }
  .tape-dot-tape-chocolat {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px dashed #a37b6d;
    color: #7a5245;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
  .tape-dot-text-chocolat {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 14px;
    border-radius: 10px;
  }
</style>

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

ベージュ

COLUMN

上部にマスキングテープを留めたような、ナチュラルで温かみのあるベージュの水玉デザインです。

COPY CODE

<style type="text/css">
  .tape-dot-box-beige {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #faf7f2;
    background-image: radial-gradient(#c2b29f 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #dfd4c4;
    border-radius: 14px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #423b33;
    box-sizing: border-box;
  }
  .tape-dot-tape-beige {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px dashed #c2b29f;
    color: #8c7863;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
  .tape-dot-text-beige {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 14px;
    border-radius: 10px;
  }
</style>

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

バニラホワイト

COLUMN

上部にマスキングテープを留めたような、まろやかで優しいバニラホワイトの水玉デザインです。

COPY CODE

<style type="text/css">
  .tape-dot-box-vanilla {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #fdfcf8;
    background-image: radial-gradient(#d1c5b4 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #e8e0d5;
    border-radius: 14px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #423e38;
    box-sizing: border-box;
  }
  .tape-dot-tape-vanilla {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px dashed #d1c5b4;
    color: #8f8170;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
  .tape-dot-text-vanilla {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 14px;
    border-radius: 10px;
  }
</style>

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

テラコッタ

COLUMN

上部にマスキングテープを留めたような、トレンド感あふれるテラコッタカラーの水玉デザインです。

COPY CODE

<style type="text/css">
  .tape-dot-box-terracotta {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #faf5f3;
    background-image: radial-gradient(#d68a70 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #e8c2b5;
    border-radius: 14px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #423530;
    box-sizing: border-box;
  }
  .tape-dot-tape-terracotta {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px dashed #d68a70;
    color: #b55d40;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
  .tape-dot-text-terracotta {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 14px;
    border-radius: 10px;
  }
</style>

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

セージグリーン

COLUMN

上部にマスキングテープを留めたような、甘すぎないセージグリーンの水玉デザインです。

COPY CODE

<style type="text/css">
  .tape-dot-box {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #f6f8f5;
    background-image: radial-gradient(#b8cbaf 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #c2d4b9;
    border-radius: 14px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #384235;
    box-sizing: border-box;
  }
  .tape-dot-tape {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px dashed #b8cbaf;
    color: #617858;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
  .tape-dot-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 14px;
    border-radius: 10px;
  }
</style>

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

アプリコット

COLUMN

上部にマスキングテープを留めたような、やわらかく温かみのあるアプリコットカラーの水玉デザインです。

COPY CODE

<style type="text/css">
  .tape-dot-box-apricot {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #fff9f5;
    background-image: radial-gradient(#f0a385 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border: 1.5px solid #f5cfc0;
    border-radius: 14px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #423632;
    box-sizing: border-box;
  }
  .tape-dot-tape-apricot {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px dashed #f0a385;
    color: #cc6d49;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
  .tape-dot-text-apricot {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 14px;
    border-radius: 10px;
  }
</style>

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

使い方の３ステップ

STEP 01

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

STEP 02

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

STEP 03

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

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

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

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

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

まとめ ✦

アメブロおしゃれ囲み枠をほんのり透明なマスキングテープ付デザインでつくりました。
大人可愛い色で１２種類用意しましたが、お気に入りの色は見つかりましたか…？
（私はパステルピンクがお気に入りです♡）

ルルプチではアメブロやホームページで使える囲み枠をたくさん配布しているので、気になる女性起業家さんは他の記事もぜひ読んでみてください。

「囲み枠１つだけじゃなく、もっともっと世界観を表現したい」
「Google検索から来るお客様と繋がっていたい」

という女性起業家さんはルルプチの女性向けホームページ制作サービスをご覧ください。

↓ 画像タップで「女性向けホームページ制作」に移動します

イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロおしゃれ囲み枠│マスキングテープ付きドット水玉柄デザイン12色

アメブロおしゃれ囲み枠│マスキングテープ付ドット水玉柄１２色

パステルピンク

くすみピンク

チェリーレッド

ブルー

くすみブルー

ラベンダー

チョコレートブラウン

ベージュ

バニラホワイト

テラコッタ

セージグリーン

アプリコット

使い方の３ステップ

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

まとめ ✦

CATEGORY