イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロおしゃれ囲み枠13色セット｜ギンガムチェック柄でコピペOK

アメブロで使えるおしゃれ囲み枠、ギンガムチェック柄でつくってみました。
どれも大人可愛い色合いで13色、女性起業家さんが発信をするときにお手伝いが出来たら嬉しいです。

コピーコードからコピペしてアメブロやホームページに簡単に設置できます。
商用利用可能なので、セッションやレッスンでもご活用ください。

アメブロおしゃれ囲み枠ギンガムチェック１３色

パステルピンク

タイトルを入力

ギンガムチェック模様がたっぷり見える囲み枠です

COPY CODE

<style type="text/css">
  .gingham-double-pastelpink {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(240, 190, 200, 0.28) 10px, rgba(240, 190, 200, 0.28) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(240, 190, 200, 0.28) 10px, rgba(240, 190, 200, 0.28) 20px);
    border: 1.5px solid #ebbcc5;
    border-radius: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3a3d;
    box-sizing: border-box;
  }
  .gingham-double-pastelpink-inner {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px dashed #e0abb5;
    border-radius: 14px;
    padding: 18px;
  }
  .gingham-double-pastelpink-title {
    font-size: 15px;
    font-weight: 700;
    color: #c47887;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .gingham-double-pastelpink-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="gingham-double-pastelpink">
  <div class="gingham-double-pastelpink-inner">
    <div class="gingham-double-pastelpink-title">タイトルを入力</div>
    <div class="gingham-double-pastelpink-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

くすみピンク

タイトルを入力

ギンガムチェック模様がたっぷり見える囲み枠です

COPY CODE

<style type="text/css">
  .gingham-double-dustypink {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px;
    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: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3c3e;
    box-sizing: border-box;
  }
  .gingham-double-dustypink-inner {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px dashed #c99ea3;
    border-radius: 14px;
    padding: 18px;
  }
  .gingham-double-dustypink-title {
    font-size: 15px;
    font-weight: 700;
    color: #a86e74;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .gingham-double-dustypink-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="gingham-double-dustypink">
  <div class="gingham-double-dustypink-inner">
    <div class="gingham-double-dustypink-title">タイトルを入力</div>
    <div class="gingham-double-dustypink-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

パステルブルー

タイトルを入力

ギンガムチェック模様がたっぷり見える囲み枠です

COPY CODE

<style type="text/css">
  .gingham-double-pastelblue {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(185, 220, 240, 0.28) 10px, rgba(185, 220, 240, 0.28) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(185, 220, 240, 0.28) 10px, rgba(185, 220, 240, 0.28) 20px);
    border: 1.5px solid #b8daf0;
    border-radius: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3b4852;
    box-sizing: border-box;
  }
  .gingham-double-pastelblue-inner {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px dashed #9bc3e0;
    border-radius: 14px;
    padding: 18px;
  }
  .gingham-double-pastelblue-title {
    font-size: 15px;
    font-weight: 700;
    color: #5d9ec7;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .gingham-double-pastelblue-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="gingham-double-pastelblue">
  <div class="gingham-double-pastelblue-inner">
    <div class="gingham-double-pastelblue-title">タイトルを入力</div>
    <div class="gingham-double-pastelblue-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

くすみブルー

タイトルを入力

ギンガムチェック模様がたっぷり見える囲み枠です

COPY CODE

<style type="text/css">
  .gingham-double-dustyblue {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(165, 185, 205, 0.25) 10px, rgba(165, 185, 205, 0.25) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(165, 185, 205, 0.25) 10px, rgba(165, 185, 205, 0.25) 20px);
    border: 1.5px solid #a8bdcf;
    border-radius: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #38424b;
    box-sizing: border-box;
  }
  .gingham-double-dustyblue-inner {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px dashed #93aabf;
    border-radius: 14px;
    padding: 18px;
  }
  .gingham-double-dustyblue-title {
    font-size: 15px;
    font-weight: 700;
    color: #5c7994;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .gingham-double-dustyblue-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="gingham-double-dustyblue">
  <div class="gingham-double-dustyblue-inner">
    <div class="gingham-double-dustyblue-title">タイトルを入力</div>
    <div class="gingham-double-dustyblue-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

ピスタチオ

タイトルを入力

ギンガムチェック模様がたっぷり見える囲み枠です

COPY CODE

<style type="text/css">
  .gingham-double-pistachio {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(180, 205, 170, 0.25) 10px, rgba(180, 205, 170, 0.25) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(180, 205, 170, 0.25) 10px, rgba(180, 205, 170, 0.25) 20px);
    border: 1.5px solid #b5d1a5;
    border-radius: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #384235;
    box-sizing: border-box;
  }
  .gingham-double-pistachio-inner {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px dashed #9fbf8e;
    border-radius: 14px;
    padding: 18px;
  }
  .gingham-double-pistachio-title {
    font-size: 15px;
    font-weight: 700;
    color: #6d965a;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .gingham-double-pistachio-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="gingham-double-pistachio">
  <div class="gingham-double-pistachio-inner">
    <div class="gingham-double-pistachio-title">タイトルを入力</div>
    <div class="gingham-double-pistachio-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

ブラウン

タイトルを入力

ギンガムチェック模様がたっぷり見える囲み枠です

COPY CODE

<style type="text/css">
  .gingham-double-brown {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px;
    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: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3e38;
    box-sizing: border-box;
  }
  .gingham-double-brown-inner {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px dashed #b59e91;
    border-radius: 14px;
    padding: 18px;
  }
  .gingham-double-brown-title {
    font-size: 15px;
    font-weight: 700;
    color: #8a6e5f;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .gingham-double-brown-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="gingham-double-brown">
  <div class="gingham-double-brown-inner">
    <div class="gingham-double-brown-title">タイトルを入力</div>
    <div class="gingham-double-brown-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

ラベンダー

タイトルを入力

ギンガムチェック模様がたっぷり見える囲み枠です

COPY CODE

<style type="text/css">
  .gingham-double-lavender {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px;
    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: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #42384a;
    box-sizing: border-box;
  }
  .gingham-double-lavender-inner {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px dashed #b8a3d4;
    border-radius: 14px;
    padding: 18px;
  }
  .gingham-double-lavender-title {
    font-size: 15px;
    font-weight: 700;
    color: #8f73b3;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .gingham-double-lavender-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="gingham-double-lavender">
  <div class="gingham-double-lavender-inner">
    <div class="gingham-double-lavender-title">タイトルを入力</div>
    <div class="gingham-double-lavender-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

ベージュ

タイトルを入力

ギンガムチェック模様がたっぷり見える囲み枠です

COPY CODE

<style type="text/css">
  .gingham-double-box {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(210, 190, 170, 0.3) 10px, rgba(210, 190, 170, 0.3) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(210, 190, 170, 0.3) 10px, rgba(210, 190, 170, 0.3) 20px);
    border: 1.5px solid #d8c7b8;
    border-radius: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a423a;
    box-sizing: border-box;
  }
  .gingham-double-inner {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px dashed #c8b8a8;
    border-radius: 14px;
    padding: 18px;
  }
  .gingham-double-title {
    font-size: 15px;
    font-weight: 700;
    color: #8c7866;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .gingham-double-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="gingham-double-box">
  <div class="gingham-double-inner">
    <div class="gingham-double-title">タイトルを入力</div>
    <div class="gingham-double-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

アイボリー

タイトルを入力

ギンガムチェック模様がたっぷり見える囲み枠です

COPY CODE

<style type="text/css">
  .gingham-double-ecru {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(220, 205, 185, 0.28) 10px, rgba(220, 205, 185, 0.28) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(220, 205, 185, 0.28) 10px, rgba(220, 205, 185, 0.28) 20px);
    border: 1.5px solid #dcd0bf;
    border-radius: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a443c;
    box-sizing: border-box;
  }
  .gingham-double-ecru-inner {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px dashed #cbbea9;
    border-radius: 14px;
    padding: 18px;
  }
  .gingham-double-ecru-title {
    font-size: 15px;
    font-weight: 700;
    color: #9c8a74;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .gingham-double-ecru-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="gingham-double-ecru">
  <div class="gingham-double-ecru-inner">
    <div class="gingham-double-ecru-title">タイトルを入力</div>
    <div class="gingham-double-ecru-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

テラコッタ

タイトルを入力

ギンガムチェック模様がたっぷり見える囲み枠です

COPY CODE

<style type="text/css">
  .gingham-double-terracotta {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px;
    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: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3832;
    box-sizing: border-box;
  }
  .gingham-double-terracotta-inner {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px dashed #c98a75;
    border-radius: 14px;
    padding: 18px;
  }
  .gingham-double-terracotta-title {
    font-size: 15px;
    font-weight: 700;
    color: #b85437;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .gingham-double-terracotta-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="gingham-double-terracotta">
  <div class="gingham-double-terracotta-inner">
    <div class="gingham-double-terracotta-title">タイトルを入力</div>
    <div class="gingham-double-terracotta-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

アプリコット

タイトルを入力

ギンガムチェック模様がたっぷり見える囲み枠です

COPY CODE

<style type="text/css">
  .gingham-double-appricot {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(245, 175, 140, 0.28) 10px, rgba(245, 175, 140, 0.28) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(245, 175, 140, 0.28) 10px, rgba(245, 175, 140, 0.28) 20px);
    border: 1.5px solid #f2b49b;
    border-radius: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3a35;
    box-sizing: border-box;
  }
  .gingham-double-appricot-inner {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px dashed #e39d81;
    border-radius: 14px;
    padding: 18px;
  }
  .gingham-double-appricot-title {
    font-size: 15px;
    font-weight: 700;
    color: #cb6d4b;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .gingham-double-appricot-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="gingham-double-appricot">
  <div class="gingham-double-appricot-inner">
    <div class="gingham-double-appricot-title">タイトルを入力</div>
    <div class="gingham-double-appricot-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

パステルイエロー

タイトルを入力

ギンガムチェック模様がたっぷり見える囲み枠です

COPY CODE

<style type="text/css">
  .gingham-double-pastelyellow {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(245, 225, 160, 0.35) 10px, rgba(245, 225, 160, 0.35) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(245, 225, 160, 0.35) 10px, rgba(245, 225, 160, 0.35) 20px);
    border: 1.5px solid #e8d08d;
    border-radius: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a4335;
    box-sizing: border-box;
  }
  .gingham-double-pastelyellow-inner {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px dashed #d9bd73;
    border-radius: 14px;
    padding: 18px;
  }
  .gingham-double-pastelyellow-title {
    font-size: 15px;
    font-weight: 700;
    color: #b59338;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .gingham-double-pastelyellow-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="gingham-double-pastelyellow">
  <div class="gingham-double-pastelyellow-inner">
    <div class="gingham-double-pastelyellow-title">タイトルを入力</div>
    <div class="gingham-double-pastelyellow-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

ミント

タイトルを入力

ギンガムチェック模様がたっぷり見える囲み枠です

COPY CODE

<style type="text/css">
  .gingham-double-mint {
    max-width: 580px;
    margin: 30px auto;
    padding: 24px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(170, 220, 205, 0.28) 10px, rgba(170, 220, 205, 0.28) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(170, 220, 205, 0.28) 10px, rgba(170, 220, 205, 0.28) 20px);
    border: 1.5px solid #a2d6c3;
    border-radius: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #35423d;
    box-sizing: border-box;
  }
  .gingham-double-mint-inner {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px dashed #88c7b0;
    border-radius: 14px;
    padding: 18px;
  }
  .gingham-double-mint-title {
    font-size: 15px;
    font-weight: 700;
    color: #4f9e83;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .gingham-double-mint-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
</style>

<div class="gingham-double-mint">
  <div class="gingham-double-mint-inner">
    <div class="gingham-double-mint-title">タイトルを入力</div>
    <div class="gingham-double-mint-text">
      ここに本文を入力してください。
    </div>
  </div>
</div>

使い方の３ステップ

STEP 01

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

STEP 02

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

STEP 03

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

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

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

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

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

まとめ ✦

アメブロで使えるおしゃれな囲み枠をギンガムチェックでつくりました♡
お気に入りの色は見つかりましたでしょうか….？

女性起業家さんの日々の発信のお手伝いができれば、ルルプチは嬉しいです。

囲み枠を一つ、設置するだけで女性起業家さんのサービスや商品、お教室の世界観を表現することができますが…

ホームページがあればもっともっと無限大に世界観を表現することができます。
また、Google検索から来るお客様に知ってもらうことができるのでホームページはおすすめの媒体です。

世界観をつくる女性向けホームページづくりがルルプチは得意なので、ホームページをご検討の方はご覧ください◎

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

イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロおしゃれ囲み枠13色セット｜ギンガムチェック柄でコピペOK

アメブロおしゃれ囲み枠ギンガムチェック１３色

パステルピンク

くすみピンク

パステルブルー

くすみブルー

ピスタチオ

ブラウン

ラベンダー

ベージュ

アイボリー

テラコッタ

アプリコット

パステルイエロー

ミント

使い方の３ステップ

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

まとめ ✦

CATEGORY