イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロおしゃれ囲み枠│ギンガムチェックメモ枠１３色コピペでOK

アメブロで設置するだけで一気に垢抜けるおしゃれな囲み枠をギンガムチェックでつくりました。
MEMOと可愛くデザインされているので、女性起業家さんのアメブロ/ホームページをおしゃれに彩ります。

商用利用可能で、コピペで簡単に設置できるのでアメブロ初心者の方でも失敗しません。
お気に入りの色が見つかりますように….♡

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

パステルピンク

MEMO

メモ帳のような破線区切りヘッダーが可愛い囲み枠です

COPY CODE

<style type="text/css">
  .gingham-memo-pastelpink {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px 20px;
    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: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3a3d;
    box-sizing: border-box;
  }
  .gingham-memo-pastelpink-header {
    font-size: 14px;
    font-weight: 700;
    color: #c47887;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1.5px dashed #e0abb5;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
  }
  .gingham-memo-pastelpink-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="gingham-memo-pastelpink">
  <div class="gingham-memo-pastelpink-header">MEMO</div>
  <div class="gingham-memo-pastelpink-text">
    ここに本文を入力してください。
  </div>
</div>

パステルブルー

MEMO

メモ帳のような破線区切りヘッダーが可愛い囲み枠です

COPY CODE

<style type="text/css">
  .gingham-memo-pastelblue {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px 20px;
    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: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3b4852;
    box-sizing: border-box;
  }
  .gingham-memo-pastelblue-header {
    font-size: 14px;
    font-weight: 700;
    color: #5d9ec7;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1.5px dashed #9bc3e0;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
  }
  .gingham-memo-pastelblue-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="gingham-memo-pastelblue">
  <div class="gingham-memo-pastelblue-header">MEMO</div>
  <div class="gingham-memo-pastelblue-text">
    ここに本文を入力してください。
  </div>
</div>

グレージュ

MEMO

メモ帳のような破線区切りヘッダーが可愛い囲み枠です

COPY CODE

<style type="text/css">
  .gingham-memo-box {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(180, 185, 190, 0.18) 10px, rgba(180, 185, 190, 0.18) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(180, 185, 190, 0.18) 10px, rgba(180, 185, 190, 0.18) 20px);
    border: 1.5px solid #c2c7cc;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3d4145;
    box-sizing: border-box;
  }
  .gingham-memo-header {
    font-size: 14px;
    font-weight: 700;
    color: #596169;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1.5px dashed #a0a7ae;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
  }
  .gingham-memo-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="gingham-memo-box">
  <div class="gingham-memo-header">MEMO</div>
  <div class="gingham-memo-text">
    ここに本文を入力してください。
  </div>
</div>

ピスタチオ

MEMO

メモ帳のような破線区切りヘッダーが可愛い囲み枠です

COPY CODE

<style type="text/css">
  .gingham-memo-pistachio {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px 20px;
    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: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #384235;
    box-sizing: border-box;
  }
  .gingham-memo-pistachio-header {
    font-size: 14px;
    font-weight: 700;
    color: #6d965a;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1.5px dashed #9fbf8e;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
  }
  .gingham-memo-pistachio-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="gingham-memo-pistachio">
  <div class="gingham-memo-pistachio-header">MEMO</div>
  <div class="gingham-memo-pistachio-text">
    ここに本文を入力してください。
  </div>
</div>

ブラウン

MEMO

メモ帳のような破線区切りヘッダーが可愛い囲み枠です

COPY CODE

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

<div class="gingham-memo-brown">
  <div class="gingham-memo-brown-header">MEMO</div>
  <div class="gingham-memo-brown-text">
    ここに本文を入力してください。
  </div>
</div>

アイボリー

MEMO

メモ帳のような破線区切りヘッダーが可愛い囲み枠です

COPY CODE

<style type="text/css">
  .gingham-memo-ivory {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(230, 218, 195, 0.32) 10px, rgba(230, 218, 195, 0.32) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(230, 218, 195, 0.32) 10px, rgba(230, 218, 195, 0.32) 20px);
    border: 1.5px solid #dcd1be;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a443c;
    box-sizing: border-box;
  }
  .gingham-memo-ivory-header {
    font-size: 14px;
    font-weight: 700;
    color: #99876f;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1.5px dashed #cbbea9;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
  }
  .gingham-memo-ivory-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="gingham-memo-ivory">
  <div class="gingham-memo-ivory-header">MEMO</div>
  <div class="gingham-memo-ivory-text">
    ここに本文を入力してください。
  </div>
</div>

ラベンダー

MEMO

メモ帳のような破線区切りヘッダーが可愛い囲み枠です

COPY CODE

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

<div class="gingham-memo-lavender">
  <div class="gingham-memo-lavender-header">MEMO</div>
  <div class="gingham-memo-lavender-text">
    ここに本文を入力してください。
  </div>
</div>

アプリコット

MEMO

メモ帳のような破線区切りヘッダーが可愛い囲み枠です

COPY CODE

<style type="text/css">
  .gingham-memo-appricot {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px 20px;
    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: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3a35;
    box-sizing: border-box;
  }
  .gingham-memo-appricot-header {
    font-size: 14px;
    font-weight: 700;
    color: #cb6d4b;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1.5px dashed #e39d81;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
  }
  .gingham-memo-appricot-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="gingham-memo-appricot">
  <div class="gingham-memo-appricot-header">MEMO</div>
  <div class="gingham-memo-appricot-text">
    ここに本文を入力してください。
  </div>
</div>

ミント

MEMO

メモ帳のような破線区切りヘッダーが可愛い囲み枠です

COPY CODE

<style type="text/css">
  .gingham-memo-mint {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px 20px;
    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: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #35423d;
    box-sizing: border-box;
  }
  .gingham-memo-mint-header {
    font-size: 14px;
    font-weight: 700;
    color: #4f9e83;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1.5px dashed #88c7b0;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
  }
  .gingham-memo-mint-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="gingham-memo-mint">
  <div class="gingham-memo-mint-header">MEMO</div>
  <div class="gingham-memo-mint-text">
    ここに本文を入力してください。
  </div>
</div>

チェリーレッド

MEMO

メモ帳のような破線区切りヘッダーが可愛い囲み枠です

COPY CODE

<style type="text/css">
  .gingham-memo-cherryred {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(215, 40, 70, 0.22) 10px, rgba(215, 40, 70, 0.22) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(215, 40, 70, 0.22) 10px, rgba(215, 40, 70, 0.22) 20px);
    border: 1.5px solid #e68090;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3035;
    box-sizing: border-box;
  }
  .gingham-memo-cherryred-header {
    font-size: 14px;
    font-weight: 700;
    color: #c81e3a;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1.5px dashed #d96677;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
  }
  .gingham-memo-cherryred-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="gingham-memo-cherryred">
  <div class="gingham-memo-cherryred-header">MEMO</div>
  <div class="gingham-memo-cherryred-text">
    ここに本文を入力してください。
  </div>
</div>

くすみピンク

MEMO

メモ帳のような破線区切りヘッダーが可愛い囲み枠です

COPY CODE

<style type="text/css">
  .gingham-memo-smokypink {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(210, 160, 170, 0.25) 10px, rgba(210, 160, 170, 0.25) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(210, 160, 170, 0.25) 10px, rgba(210, 160, 170, 0.25) 20px);
    border: 1.5px solid #d4aab3;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3a3d;
    box-sizing: border-box;
  }
  .gingham-memo-smokypink-header {
    font-size: 14px;
    font-weight: 700;
    color: #a66270;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1.5px dashed #c48f9a;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
  }
  .gingham-memo-smokypink-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="gingham-memo-smokypink">
  <div class="gingham-memo-smokypink-header">MEMO</div>
  <div class="gingham-memo-smokypink-text">
    ここに本文を入力してください。
  </div>
</div>

くすみブルー

MEMO

メモ帳のような破線区切りヘッダーが可愛い囲み枠です

COPY CODE

<style type="text/css">
  .gingham-memo-smokyblue {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px 20px;
    background-color: #ffffff;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(160, 180, 200, 0.25) 10px, rgba(160, 180, 200, 0.25) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(160, 180, 200, 0.25) 10px, rgba(160, 180, 200, 0.25) 20px);
    border: 1.5px solid #a8bece;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #38424a;
    box-sizing: border-box;
  }
  .gingham-memo-smokyblue-header {
    font-size: 14px;
    font-weight: 700;
    color: #5c7b93;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1.5px dashed #8faac0;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
  }
  .gingham-memo-smokyblue-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="gingham-memo-smokyblue">
  <div class="gingham-memo-smokyblue-header">MEMO</div>
  <div class="gingham-memo-smokyblue-text">
    ここに本文を入力してください。
  </div>
</div>

使い方の３ステップ

STEP 01

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

STEP 02

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

STEP 03

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

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

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

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

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

まとめ ✦

アメブロおしゃれな囲み枠をギンガムチェックでつくってみました。
メモ帳の役割を果たせるおしゃれな囲み枠なので、いろんなシーンでご活用ください。

今回は囲み枠一つのデザインのみですが、ブログのちょっとした囲み枠での世界観は表現するのに限りがあります。

ホームページを持つことでGoogleから検索出来たお客様と濃くつながることができるので、ホームページ制作を検討されている方はルルプチのホームページ制作をご覧ください。

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

イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロおしゃれ囲み枠│ギンガムチェックメモ枠１３色コピペでOK

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

パステルピンク

パステルブルー

グレージュ

ピスタチオ

ブラウン

アイボリー

ラベンダー

アプリコット

ミント

チェリーレッド

くすみピンク

くすみブルー

使い方の３ステップ

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

まとめ ✦

CATEGORY