イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

【コピペOK】アメブロギンガムチェック囲み枠│ワンポイント吹き出し枠13色

アメブロで使える可愛い囲み枠、コピペで使えるワンポイント吹き出し枠をつくりました♡
POINTとかわいい吹き出しがついている囲み枠で、ギンガムチェックのかわいい模様もプラスされています。

大人可愛いデザインでポイントを紹介したい方はぜひご活用ください。
商用利用可能なので、講座・セッションにもお使いいただけます。

アメブロギンガムチェック囲み枠│ワンポイント吹き出し枠13色

パステルピンク

POINT

枠の上にぴょこっと飛び出たリボン風のタグが付いた吹き出しデザインです♡

COPY CODE

<style type="text/css">
  .gingham-tab-box {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(235, 180, 190, 0.18) 10px, rgba(235, 180, 190, 0.18) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(235, 180, 190, 0.18) 10px, rgba(235, 180, 190, 0.18) 20px);
    border: 1.5px solid #e8b8c2;
    border-radius: 16px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3a3d;
    box-sizing: border-box;
  }
  .gingham-tab-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #e8b8c2;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }
  .gingham-tab-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 10px;
  }
</style>

<div class="gingham-tab-box">
  <div class="gingham-tab-title">タイトルが入ります</div>
  <div class="gingham-tab-text">
    ここにお好きな本文を入力してください。
  </div>
</div>

パステルブルー

POINT

枠の上にぴょこっと飛び出たリボン風のタグが付いた吹き出しデザインです♡

COPY CODE

<style type="text/css">
  .gingham-tab-pastelblue {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(185, 220, 240, 0.25) 10px, rgba(185, 220, 240, 0.25) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(185, 220, 240, 0.25) 10px, rgba(185, 220, 240, 0.25) 20px);
    border: 1.5px solid #b8daf0;
    border-radius: 16px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3b4852;
    box-sizing: border-box;
  }
  .gingham-tab-pastelblue-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #8cc3e6;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }
  .gingham-tab-pastelblue-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 10px;
  }
</style>

<div class="gingham-tab-pastelblue">
  <div class="gingham-tab-pastelblue-title">タイトルが入ります</div>
  <div class="gingham-tab-pastelblue-text">
    ここにお好きな本文を入力してください。
  </div>
</div>

ピスタチオ

POINT

枠の上にぴょこっと飛び出たリボン風のタグが付いた吹き出しデザインです♡

COPY CODE

<style type="text/css">
  .gingham-tab-pistachio {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(180, 205, 170, 0.22) 10px, rgba(180, 205, 170, 0.22) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(180, 205, 170, 0.22) 10px, rgba(180, 205, 170, 0.22) 20px);
    border: 1.5px solid #b5d1a5;
    border-radius: 16px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #384235;
    box-sizing: border-box;
  }
  .gingham-tab-pistachio-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #8bb37a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }
  .gingham-tab-pistachio-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 10px;
  }
</style>

<div class="gingham-tab-pistachio">
  <div class="gingham-tab-pistachio-title">タイトルが入ります</div>
  <div class="gingham-tab-pistachio-text">
    ここにお好きな本文を入力してください。
  </div>
</div>

ラベンダー

POINT

枠の上にぴょこっと飛び出たリボン風のタグが付いた吹き出しデザインです♡

COPY CODE

<style type="text/css">
  .gingham-tab-lavender {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(200, 185, 220, 0.22) 10px, rgba(200, 185, 220, 0.22) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(200, 185, 220, 0.22) 10px, rgba(200, 185, 220, 0.22) 20px);
    border: 1.5px solid #cbb8e3;
    border-radius: 16px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #42384a;
    box-sizing: border-box;
  }
  .gingham-tab-lavender-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #9f86c0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }
  .gingham-tab-lavender-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 10px;
  }
</style>

<div class="gingham-tab-lavender">
  <div class="gingham-tab-lavender-title">タイトルが入ります</div>
  <div class="gingham-tab-lavender-text">
    ここにお好きな本文を入力してください。
  </div>
</div>

グレージュ

POINT

枠の上にぴょこっと飛び出たリボン風のタグが付いた吹き出しデザインです♡

COPY CODE

<style type="text/css">
  .gingham-tab-greige {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(195, 185, 175, 0.22) 10px, rgba(195, 185, 175, 0.22) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(195, 185, 175, 0.22) 10px, rgba(195, 185, 175, 0.22) 20px);
    border: 1.5px solid #c8bebd;
    border-radius: 16px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a4542;
    box-sizing: border-box;
  }
  .gingham-tab-greige-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #9c8f8b;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }
  .gingham-tab-greige-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 10px;
  }
</style>

<div class="gingham-tab-greige">
  <div class="gingham-tab-greige-title">タイトルが入ります</div>
  <div class="gingham-tab-greige-text">
    ここにお好きな本文を入力してください。
  </div>
</div>

ブラウン

POINT

枠の上にぴょこっと飛び出たリボン風のタグが付いた吹き出しデザインです♡

COPY CODE

<style type="text/css">
  .gingham-tab-brown {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(180, 155, 140, 0.22) 10px, rgba(180, 155, 140, 0.22) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(180, 155, 140, 0.22) 10px, rgba(180, 155, 140, 0.22) 20px);
    border: 1.5px solid #c8b2a5;
    border-radius: 16px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3e38;
    box-sizing: border-box;
  }
  .gingham-tab-brown-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #9c8072;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }
  .gingham-tab-brown-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 10px;
  }
</style>

<div class="gingham-tab-brown">
  <div class="gingham-tab-brown-title">タイトルが入ります</div>
  <div class="gingham-tab-brown-text">
    ここにお好きな本文を入力してください。
  </div>
</div>

チェリーレッド

POINT

枠の上にぴょこっと飛び出たリボン風のタグが付いた吹き出しデザインです♡

COPY CODE

<style type="text/css">
  .gingham-tab-red {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(230, 70, 80, 0.18) 10px, rgba(230, 70, 80, 0.18) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(230, 70, 80, 0.18) 10px, rgba(230, 70, 80, 0.18) 20px);
    border: 1.5px solid #f07d88;
    border-radius: 16px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a2d31;
    box-sizing: border-box;
  }
  .gingham-tab-red-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #e63946;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }
  .gingham-tab-red-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 10px;
  }
</style>

<div class="gingham-tab-red">
  <div class="gingham-tab-red-title">タイトルが入ります</div>
  <div class="gingham-tab-red-text">
    ここにお好きな本文を入力してください。
  </div>
</div>

パステルイエロー

POINT

枠の上にぴょこっと飛び出たリボン風のタグが付いた吹き出しデザインです♡

COPY CODE

<style type="text/css">
  .gingham-tab-pastelyellow {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(245, 215, 120, 0.28) 10px, rgba(245, 215, 120, 0.28) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(245, 215, 120, 0.28) 10px, rgba(245, 215, 120, 0.28) 20px);
    border: 1.5px solid #ebd07d;
    border-radius: 16px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a4335;
    box-sizing: border-box;
  }
  .gingham-tab-pastelyellow-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #e5b93c;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }
  .gingham-tab-pastelyellow-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 10px;
  }
</style>

<div class="gingham-tab-pastelyellow">
  <div class="gingham-tab-pastelyellow-title">タイトルが入ります</div>
  <div class="gingham-tab-pastelyellow-text">
    ここにお好きな本文を入力してください。
  </div>
</div>

ミント

POINT

枠の上にぴょこっと飛び出たリボン風のタグが付いた吹き出しデザインです♡

COPY CODE

<style type="text/css">
  .gingham-tab-mint {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(160, 220, 205, 0.25) 10px, rgba(160, 220, 205, 0.25) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(160, 220, 205, 0.25) 10px, rgba(160, 220, 205, 0.25) 20px);
    border: 1.5px solid #a3d9cb;
    border-radius: 16px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #334843;
    box-sizing: border-box;
  }
  .gingham-tab-mint-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #62c4af;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }
  .gingham-tab-mint-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 10px;
  }
</style>

<div class="gingham-tab-mint">
  <div class="gingham-tab-mint-title">タイトルが入ります</div>
  <div class="gingham-tab-mint-text">
    ここにお好きな本文を入力してください。
  </div>
</div>

くすみピンク

POINT

枠の上にぴょこっと飛び出たリボン風のタグが付いた吹き出しデザインです♡

COPY CODE

<style type="text/css">
  .gingham-tab-dustypink {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(215, 170, 175, 0.22) 10px, rgba(215, 170, 175, 0.22) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(215, 170, 175, 0.22) 10px, rgba(215, 170, 175, 0.22) 20px);
    border: 1.5px solid #d4b2b6;
    border-radius: 16px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3c3e;
    box-sizing: border-box;
  }
  .gingham-tab-dustypink-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #b8868c;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }
  .gingham-tab-dustypink-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 10px;
  }
</style>

<div class="gingham-tab-dustypink">
  <div class="gingham-tab-dustypink-title">タイトルが入ります</div>
  <div class="gingham-tab-dustypink-text">
    ここにお好きな本文を入力してください。
  </div>
</div>

ラベンダー

POINT

枠の上にぴょこっと飛び出たリボン風のタグが付いた吹き出しデザインです♡

COPY CODE

<style type="text/css">
  .gingham-tab-lavender {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(200, 185, 220, 0.22) 10px, rgba(200, 185, 220, 0.22) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(200, 185, 220, 0.22) 10px, rgba(200, 185, 220, 0.22) 20px);
    border: 1.5px solid #cbb8e3;
    border-radius: 16px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #42384a;
    box-sizing: border-box;
  }
  .gingham-tab-lavender-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #9f86c0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }
  .gingham-tab-lavender-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 10px;
  }
</style>

<div class="gingham-tab-lavender">
  <div class="gingham-tab-lavender-title">タイトルが入ります</div>
  <div class="gingham-tab-lavender-text">
    ここにお好きな本文を入力してください。
  </div>
</div>

アイボリー

POINT

枠の上にぴょこっと飛び出たリボン風のタグが付いた吹き出しデザインです♡

COPY CODE

<style type="text/css">
  .gingham-tab-ivory {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(230, 215, 185, 0.3) 10px, rgba(230, 215, 185, 0.3) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(230, 215, 185, 0.3) 10px, rgba(230, 215, 185, 0.3) 20px);
    border: 1.5px solid #dfd0b5;
    border-radius: 16px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a443b;
    box-sizing: border-box;
  }
  .gingham-tab-ivory-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #c4b08d;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }
  .gingham-tab-ivory-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 10px;
  }
</style>

<div class="gingham-tab-ivory">
  <div class="gingham-tab-ivory-title">タイトルが入ります</div>
  <div class="gingham-tab-ivory-text">
    ここにお好きな本文を入力してください。
  </div>
</div>

テラコッタ

POINT

枠の上にぴょこっと飛び出たリボン風のタグが付いた吹き出しデザインです♡

COPY CODE

<style type="text/css">
  .gingham-tab-terracotta {
    max-width: 580px;
    margin: 35px auto 30px;
    padding: 24px 20px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(204, 115, 83, 0.22) 10px, rgba(204, 115, 83, 0.22) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(204, 115, 83, 0.22) 10px, rgba(204, 115, 83, 0.22) 20px);
    border: 1.5px solid #d99f8a;
    border-radius: 16px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3832;
    box-sizing: border-box;
  }
  .gingham-tab-terracotta-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #cc6343;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }
  .gingham-tab-terracotta-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
    border-radius: 10px;
  }
</style>

<div class="gingham-tab-terracotta">
  <div class="gingham-tab-terracotta-title">タイトルが入ります</div>
  <div class="gingham-tab-terracotta-text">
    ここにお好きな本文を入力してください。
  </div>
</div>

使い方の３ステップ

STEP 01

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

STEP 02

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

STEP 03

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

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

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

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

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

まとめ ✦

アメブロ可愛い囲み枠、ギンガムチェック模様でつくってみました。
今回つくってみたのはPOINTの吹き出しがついていて、講座やレッスンにも使いやすくなっています。
女性起業家さんのサービス・商品を発信・販売されるときにお手伝いができればうれしいです。

アメブロ囲み枠はコピペ１つで簡単に世界観をちょこっと表現できるのですが、ホームページを持てば女性起業家さんの世界観をサイト１つまるまる全部表現することができます◎

Google検索からいらっしゃる濃いお客様と繋がることもできるので、ホームページ制作を検討されている方はルルプチをぜひご検討ください。

⇣ 大人可愛いホームページ制作はこちら

イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

【コピペOK】アメブロギンガムチェック囲み枠│ワンポイント吹き出し枠13色

アメブロギンガムチェック囲み枠│ワンポイント吹き出し枠13色

パステルピンク

パステルブルー

ピスタチオ

ラベンダー

グレージュ

ブラウン

チェリーレッド

パステルイエロー

ミント

くすみピンク

ラベンダー

アイボリー

テラコッタ

使い方の３ステップ

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

まとめ ✦

CATEGORY