アメブロで使える可愛いギンガムチェックの囲み枠12色を3ステップ解説枠としてつくりました♡
サロン・お教室・講座をしている女性起業家さんは是非ご活用ください◎
コピペでOKなので簡単で、商用利用できるのでビジネスにもお使いいただけます。
アメブロ可愛いギンガムチェック囲み枠12種類 │3ステップ解説枠
パステルピンク
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
COPY CODE
<style type="text/css">
.gingham-check-pastelpink {
max-width: 580px;
margin: 30px auto;
padding: 28px 22px;
background-color: #ffffff;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(255, 218, 224, 0.35) 10px, rgba(255, 218, 224, 0.35) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255, 218, 224, 0.35) 10px, rgba(255, 218, 224, 0.35) 20px);
border: 1.5px solid #ffd1d9;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #635055;
box-sizing: border-box;
}
.gingham-check-pastelpink-title {
font-size: 18px;
font-weight: 700;
color: #ff8ca3;
text-align: center;
margin: 0 0 22px 0;
letter-spacing: 0.05em;
}
.gingham-check-pastelpink-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.gingham-check-pastelpink-card {
background-color: #ffffff;
border: 1px solid #ffeff2;
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.gingham-check-pastelpink-badge {
background-color: #fff5f7;
color: #ff8ca3;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.gingham-check-pastelpink-text {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #635055;
}
</style>
<div class="gingham-check-pastelpink">
<div class="gingham-check-pastelpink-title">タイトルが入ります</div>
<div class="gingham-check-pastelpink-container">
<div class="gingham-check-pastelpink-card">
<span class="gingham-check-pastelpink-badge">STEP 01</span>
<p class="gingham-check-pastelpink-text">
step1の内容を入力します
</p>
</div>
<div class="gingham-check-pastelpink-card">
<span class="gingham-check-pastelpink-badge">STEP 02</span>
<p class="gingham-check-pastelpink-text">
step2の内容を入力します
</p>
</div>
<div class="gingham-check-pastelpink-card">
<span class="gingham-check-pastelpink-badge">STEP 03</span>
<p class="gingham-check-pastelpink-text">
step3の内容を入力します
</p>
</div>
</div>
</div>
真っ赤なレッド
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
COPY CODE
<style type="text/css">
.gingham-check-vividred {
max-width: 580px;
margin: 30px auto;
padding: 28px 22px;
background-color: #ffffff;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(235, 45, 55, 0.18) 10px, rgba(235, 45, 55, 0.18) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(235, 45, 55, 0.18) 10px, rgba(235, 45, 55, 0.18) 20px);
border: 1.5px solid #e64c55;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #3b2829;
box-sizing: border-box;
}
.gingham-check-vividred-title {
font-size: 18px;
font-weight: 700;
color: #d61c28;
text-align: center;
margin: 0 0 22px 0;
letter-spacing: 0.05em;
}
.gingham-check-vividred-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.gingham-check-vividred-card {
background-color: #ffffff;
border: 1px solid #f7c1c5;
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.gingham-check-vividred-badge {
background-color: #fde8ea;
color: #d61c28;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.gingham-check-vividred-text {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #3b2829;
}
</style>
<div class="gingham-check-vividred">
<div class="gingham-check-vividred-title">タイトルが入ります</div>
<div class="gingham-check-vividred-container">
<div class="gingham-check-vividred-card">
<span class="gingham-check-vividred-badge">STEP 01</span>
<p class="gingham-check-vividred-text">
step1の内容を入力します
</p>
</div>
<div class="gingham-check-vividred-card">
<span class="gingham-check-vividred-badge">STEP 02</span>
<p class="gingham-check-vividred-text">
step2の内容を入力します
</p>
</div>
<div class="gingham-check-vividred-card">
<span class="gingham-check-vividred-badge">STEP 03</span>
<p class="gingham-check-vividred-text">
step3の内容を入力します
</p>
</div>
</div>
</div>
くすみピンク
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
COPY CODE
<style type="text/css">
.gingham-check-dustypink {
max-width: 580px;
margin: 30px auto;
padding: 28px 22px;
background-color: #ffffff;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(220, 160, 175, 0.18) 10px, rgba(220, 160, 175, 0.18) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(220, 160, 175, 0.18) 10px, rgba(220, 160, 175, 0.18) 20px);
border: 1.5px solid #e0b2bd;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #4a3d40;
box-sizing: border-box;
}
.gingham-check-dustypink-title {
font-size: 18px;
font-weight: 700;
color: #b86b7d;
text-align: center;
margin: 0 0 22px 0;
letter-spacing: 0.05em;
}
.gingham-check-dustypink-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.gingham-check-dustypink-card {
background-color: #ffffff;
border: 1px solid #f2d8df;
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.gingham-check-dustypink-badge {
background-color: #f9e8ec;
color: #b86b7d;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.gingham-check-dustypink-text {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #4a3d40;
}
</style>
<div class="gingham-check-dustypink">
<div class="gingham-check-dustypink-title">タイトルが入ります</div>
<div class="gingham-check-dustypink-container">
<div class="gingham-check-dustypink-card">
<span class="gingham-check-dustypink-badge">STEP 01</span>
<p class="gingham-check-dustypink-text">
step1の内容を入力します
</p>
</div>
<div class="gingham-check-dustypink-card">
<span class="gingham-check-dustypink-badge">STEP 02</span>
<p class="gingham-check-dustypink-text">
step2の内容を入力します
</p>
</div>
<div class="gingham-check-dustypink-card">
<span class="gingham-check-dustypink-badge">STEP 03</span>
<p class="gingham-check-dustypink-text">
step3の内容を入力します
</p>
</div>
</div>
</div>
ブルー
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
COPY CODE
<style type="text/css">
.gingham-check-pastelblue {
max-width: 580px;
margin: 30px auto;
padding: 28px 22px;
background-color: #ffffff;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(185, 220, 250, 0.35) 10px, rgba(185, 220, 250, 0.35) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(185, 220, 250, 0.35) 10px, rgba(185, 220, 250, 0.35) 20px);
border: 1.5px solid #b3d7f5;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #43515c;
box-sizing: border-box;
}
.gingham-check-pastelblue-title {
font-size: 18px;
font-weight: 700;
color: #61a5e0;
text-align: center;
margin: 0 0 22px 0;
letter-spacing: 0.05em;
}
.gingham-check-pastelblue-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.gingham-check-pastelblue-card {
background-color: #ffffff;
border: 1px solid #e3f1fc;
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.gingham-check-pastelblue-badge {
background-color: #f0f7fd;
color: #61a5e0;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.gingham-check-pastelblue-text {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #43515c;
}
</style>
<div class="gingham-check-pastelblue">
<div class="gingham-check-pastelblue-title">タイトルが入ります</div>
<div class="gingham-check-pastelblue-container">
<div class="gingham-check-pastelblue-card">
<span class="gingham-check-pastelblue-badge">STEP 01</span>
<p class="gingham-check-pastelblue-text">
step1の内容を入力します
</p>
</div>
<div class="gingham-check-pastelblue-card">
<span class="gingham-check-pastelblue-badge">STEP 02</span>
<p class="gingham-check-pastelblue-text">
step2の内容を入力します
</p>
</div>
<div class="gingham-check-pastelblue-card">
<span class="gingham-check-pastelblue-badge">STEP 03</span>
<p class="gingham-check-pastelblue-text">
step3の内容を入力します
</p>
</div>
</div>
</div>
ラベンダー
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
COPY CODE
<style type="text/css">
.gingham-check-stellalavender {
max-width: 580px;
margin: 30px auto;
padding: 28px 22px;
background-color: #ffffff;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(200, 180, 235, 0.35) 10px, rgba(200, 180, 235, 0.35) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(200, 180, 235, 0.35) 10px, rgba(200, 180, 235, 0.35) 20px);
border: 1.5px solid #d4c2f0;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #484052;
box-sizing: border-box;
}
.gingham-check-stellalavender-title {
font-size: 18px;
font-weight: 700;
color: #9373cd;
text-align: center;
margin: 0 0 22px 0;
letter-spacing: 0.05em;
}
.gingham-check-stellalavender-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.gingham-check-stellalavender-card {
background-color: #ffffff;
border: 1px solid #f0e8fa;
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.gingham-check-stellalavender-badge {
background-color: #f6f0fd;
color: #9373cd;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.gingham-check-stellalavender-text {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #484052;
}
</style>
<div class="gingham-check-stellalavender">
<div class="gingham-check-stellalavender-title">タイトルが入ります</div>
<div class="gingham-check-stellalavender-container">
<div class="gingham-check-stellalavender-card">
<span class="gingham-check-stellalavender-badge">STEP 01</span>
<p class="gingham-check-stellalavender-text">
step1の内容を入力します
</p>
</div>
<div class="gingham-check-stellalavender-card">
<span class="gingham-check-stellalavender-badge">STEP 02</span>
<p class="gingham-check-stellalavender-text">
step2の内容を入力します
</p>
</div>
<div class="gingham-check-stellalavender-card">
<span class="gingham-check-stellalavender-badge">STEP 03</span>
<p class="gingham-check-stellalavender-text">
step3の内容を入力します
</p>
</div>
</div>
</div>
アプリコット
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
COPY CODE
<style type="text/css">
.gingham-check-apricot {
max-width: 580px;
margin: 30px auto;
padding: 28px 22px;
background-color: #ffffff;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(245, 160, 110, 0.2) 10px, rgba(245, 160, 110, 0.2) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(245, 160, 110, 0.2) 10px, rgba(245, 160, 110, 0.2) 20px);
border: 1.5px solid #f2ab80;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #45332a;
box-sizing: border-box;
}
.gingham-check-apricot-title {
font-size: 18px;
font-weight: 700;
color: #d96b34;
text-align: center;
margin: 0 0 22px 0;
letter-spacing: 0.05em;
}
.gingham-check-apricot-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.gingham-check-apricot-card {
background-color: #ffffff;
border: 1px solid #fbd9c8;
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.gingham-check-apricot-badge {
background-color: #fdeee6;
color: #d96b34;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.gingham-check-apricot-text {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #45332a;
}
</style>
<div class="gingham-check-apricot">
<div class="gingham-check-apricot-title">タイトルが入ります</div>
<div class="gingham-check-apricot-container">
<div class="gingham-check-apricot-card">
<span class="gingham-check-apricot-badge">STEP 01</span>
<p class="gingham-check-apricot-text">
step1の内容を入力します
</p>
</div>
<div class="gingham-check-apricot-card">
<span class="gingham-check-apricot-badge">STEP 02</span>
<p class="gingham-check-apricot-text">
step2の内容を入力します
</p>
</div>
<div class="gingham-check-apricot-card">
<span class="gingham-check-apricot-badge">STEP 03</span>
<p class="gingham-check-apricot-text">
step3の内容を入力します
</p>
</div>
</div>
</div>
テラコッタ
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
COPY CODE
<style type="text/css">
.gingham-check-terracotta {
max-width: 580px;
margin: 30px auto;
padding: 28px 22px;
background-color: #ffffff;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(186, 95, 68, 0.18) 10px, rgba(186, 95, 68, 0.18) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(186, 95, 68, 0.18) 10px, rgba(186, 95, 68, 0.18) 20px);
border: 1.5px solid #d88f7b;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #423531;
box-sizing: border-box;
}
.gingham-check-terracotta-title {
font-size: 18px;
font-weight: 700;
color: #b54f35;
text-align: center;
margin: 0 0 22px 0;
letter-spacing: 0.05em;
}
.gingham-check-terracotta-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.gingham-check-terracotta-card {
background-color: #ffffff;
border: 1px solid #ebd0c8;
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.gingham-check-terracotta-badge {
background-color: #f7e4df;
color: #b54f35;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.gingham-check-terracotta-text {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #423531;
}
</style>
<div class="gingham-check-terracotta">
<div class="gingham-check-terracotta-title">タイトルが入ります</div>
<div class="gingham-check-terracotta-container">
<div class="gingham-check-terracotta-card">
<span class="gingham-check-terracotta-badge">STEP 01</span>
<p class="gingham-check-terracotta-text">
step1の内容を入力します
</p>
</div>
<div class="gingham-check-terracotta-card">
<span class="gingham-check-terracotta-badge">STEP 02</span>
<p class="gingham-check-terracotta-text">
step2の内容を入力します
</p>
</div>
<div class="gingham-check-terracotta-card">
<span class="gingham-check-terracotta-badge">STEP 03</span>
<p class="gingham-check-terracotta-text">
step3の内容を入力します
</p>
</div>
</div>
</div>
ブラウン
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
COPY CODE
<style type="text/css">
.gingham-check-brown {
max-width: 580px;
margin: 30px auto;
padding: 28px 22px;
background-color: #ffffff;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(160, 130, 115, 0.18) 10px, rgba(160, 130, 115, 0.18) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(160, 130, 115, 0.18) 10px, rgba(160, 130, 115, 0.18) 20px);
border: 1.5px solid #c4b0a3;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #403632;
box-sizing: border-box;
}
.gingham-check-brown-title {
font-size: 18px;
font-weight: 700;
color: #8c6d58;
text-align: center;
margin: 0 0 22px 0;
letter-spacing: 0.05em;
}
.gingham-check-brown-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.gingham-check-brown-card {
background-color: #ffffff;
border: 1px solid #e3d8d0;
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.gingham-check-brown-badge {
background-color: #f2ebe6;
color: #8c6d58;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.gingham-check-brown-text {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #403632;
}
</style>
<div class="gingham-check-brown">
<div class="gingham-check-brown-title">タイトルが入ります</div>
<div class="gingham-check-brown-container">
<div class="gingham-check-brown-card">
<span class="gingham-check-brown-badge">STEP 01</span>
<p class="gingham-check-brown-text">
step1の内容を入力します
</p>
</div>
<div class="gingham-check-brown-card">
<span class="gingham-check-brown-badge">STEP 02</span>
<p class="gingham-check-brown-text">
step2の内容を入力します
</p>
</div>
<div class="gingham-check-brown-card">
<span class="gingham-check-brown-badge">STEP 03</span>
<p class="gingham-check-brown-text">
step3の内容を入力します
</p>
</div>
</div>
</div>
ミント
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
COPY CODE
<style type="text/css">
.gingham-check-paleblue {
max-width: 580px;
margin: 30px auto;
padding: 28px 22px;
background-color: #ffffff;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(130, 210, 215, 0.22) 10px, rgba(130, 210, 215, 0.22) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(130, 210, 215, 0.22) 10px, rgba(130, 210, 215, 0.22) 20px);
border: 1.5px solid #89cbcf;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #2b3d40;
box-sizing: border-box;
}
.gingham-check-paleblue-title {
font-size: 18px;
font-weight: 700;
color: #388a91;
text-align: center;
margin: 0 0 22px 0;
letter-spacing: 0.05em;
}
.gingham-check-paleblue-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.gingham-check-paleblue-card {
background-color: #ffffff;
border: 1px solid #c2e6e8;
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.gingham-check-paleblue-badge {
background-color: #e2f5f6;
color: #388a91;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.gingham-check-paleblue-text {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #2b3d40;
}
</style>
<div class="gingham-check-paleblue">
<div class="gingham-check-paleblue-title">タイトルが入ります</div>
<div class="gingham-check-paleblue-container">
<div class="gingham-check-paleblue-card">
<span class="gingham-check-paleblue-badge">STEP 01</span>
<p class="gingham-check-paleblue-text">
step1の内容を入力します
</p>
</div>
<div class="gingham-check-paleblue-card">
<span class="gingham-check-paleblue-badge">STEP 02</span>
<p class="gingham-check-paleblue-text">
step2の内容を入力します
</p>
</div>
<div class="gingham-check-paleblue-card">
<span class="gingham-check-paleblue-badge">STEP 03</span>
<p class="gingham-check-paleblue-text">
step3の内容を入力します
</p>
</div>
</div>
</div>
グレージュ
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
COPY CODE
<style type="text/css">
.gingham-check-greige {
max-width: 580px;
margin: 30px auto;
padding: 28px 22px;
background-color: #ffffff;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(165, 158, 152, 0.18) 10px, rgba(165, 158, 152, 0.18) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(165, 158, 152, 0.18) 10px, rgba(165, 158, 152, 0.18) 20px);
border: 1.5px solid #c7bfb8;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #423e3b;
box-sizing: border-box;
}
.gingham-check-greige-title {
font-size: 18px;
font-weight: 700;
color: #7a7068;
text-align: center;
margin: 0 0 22px 0;
letter-spacing: 0.05em;
}
.gingham-check-greige-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.gingham-check-greige-card {
background-color: #ffffff;
border: 1px solid #e4ded8;
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.gingham-check-greige-badge {
background-color: #f2ede8;
color: #7a7068;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.gingham-check-greige-text {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #423e3b;
}
</style>
<div class="gingham-check-greige">
<div class="gingham-check-greige-title">タイトルが入ります</div>
<div class="gingham-check-greige-container">
<div class="gingham-check-greige-card">
<span class="gingham-check-greige-badge">STEP 01</span>
<p class="gingham-check-greige-text">
step1の内容を入力します
</p>
</div>
<div class="gingham-check-greige-card">
<span class="gingham-check-greige-badge">STEP 02</span>
<p class="gingham-check-greige-text">
step2の内容を入力します
</p>
</div>
<div class="gingham-check-greige-card">
<span class="gingham-check-greige-badge">STEP 03</span>
<p class="gingham-check-greige-text">
step3の内容を入力します
</p>
</div>
</div>
</div>
アイボリー
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
COPY CODE
<style type="text/css">
.gingham-check-ivory {
max-width: 580px;
margin: 30px auto;
padding: 28px 22px;
background-color: #ffffff;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(215, 195, 165, 0.22) 10px, rgba(215, 195, 165, 0.22) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(215, 195, 165, 0.22) 10px, rgba(215, 195, 165, 0.22) 20px);
border: 1.5px solid #dfd0be;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #4a443c;
box-sizing: border-box;
}
.gingham-check-ivory-title {
font-size: 18px;
font-weight: 700;
color: #947e68;
text-align: center;
margin: 0 0 22px 0;
letter-spacing: 0.05em;
}
.gingham-check-ivory-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.gingham-check-ivory-card {
background-color: #ffffff;
border: 1px solid #ebdcd0;
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.gingham-check-ivory-badge {
background-color: #f7f2eb;
color: #947e68;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.gingham-check-ivory-text {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #4a443c;
}
</style>
<div class="gingham-check-ivory">
<div class="gingham-check-ivory-title">タイトルが入ります</div>
<div class="gingham-check-ivory-container">
<div class="gingham-check-ivory-card">
<span class="gingham-check-ivory-badge">STEP 01</span>
<p class="gingham-check-ivory-text">
step1の内容を入力します
</p>
</div>
<div class="gingham-check-ivory-card">
<span class="gingham-check-ivory-badge">STEP 02</span>
<p class="gingham-check-ivory-text">
step2の内容を入力します
</p>
</div>
<div class="gingham-check-ivory-card">
<span class="gingham-check-ivory-badge">STEP 03</span>
<p class="gingham-check-ivory-text">
step3の内容を入力します
</p>
</div>
</div>
</div>
ピスタチオ
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
COPY CODE
<style type="text/css">
.gingham-check-yellowgreen {
max-width: 580px;
margin: 30px auto;
padding: 28px 22px;
background-color: #ffffff;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(175, 195, 120, 0.2) 10px, rgba(175, 195, 120, 0.2) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(175, 195, 120, 0.2) 10px, rgba(175, 195, 120, 0.2) 20px);
border: 1.5px solid #bdcf8f;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #3e4233;
box-sizing: border-box;
}
.gingham-check-yellowgreen-title {
font-size: 18px;
font-weight: 700;
color: #6e8c32;
text-align: center;
margin: 0 0 22px 0;
letter-spacing: 0.05em;
}
.gingham-check-yellowgreen-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.gingham-check-yellowgreen-card {
background-color: #ffffff;
border: 1px solid #dee8c4;
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.gingham-check-yellowgreen-badge {
background-color: #eef2de;
color: #6e8c32;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.gingham-check-yellowgreen-text {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #3e4233;
}
</style>
<div class="gingham-check-yellowgreen">
<div class="gingham-check-yellowgreen-title">タイトルが入ります</div>
<div class="gingham-check-yellowgreen-container">
<div class="gingham-check-yellowgreen-card">
<span class="gingham-check-yellowgreen-badge">STEP 01</span>
<p class="gingham-check-yellowgreen-text">
step1の内容を入力します
</p>
</div>
<div class="gingham-check-yellowgreen-card">
<span class="gingham-check-yellowgreen-badge">STEP 02</span>
<p class="gingham-check-yellowgreen-text">
step2の内容を入力します
</p>
</div>
<div class="gingham-check-yellowgreen-card">
<span class="gingham-check-yellowgreen-badge">STEP 03</span>
<p class="gingham-check-yellowgreen-text">
step3の内容を入力します
</p>
</div>
</div>
</div>
アイスミント
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
COPY CODE
<style type="text/css">
.gingham-check-paleblue {
max-width: 580px;
margin: 30px auto;
padding: 28px 22px;
background-color: #ffffff;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(130, 210, 215, 0.22) 10px, rgba(130, 210, 215, 0.22) 20px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(130, 210, 215, 0.22) 10px, rgba(130, 210, 215, 0.22) 20px);
border: 1.5px solid #89cbcf;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #2b3d40;
box-sizing: border-box;
}
.gingham-check-paleblue-h2 {
font-size: 18px;
font-weight: 700;
color: #388a91;
text-align: center;
margin: 0 0 22px 0;
letter-spacing: 0.05em;
}
.gingham-check-paleblue-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.gingham-check-paleblue-card {
background-color: #ffffff;
border: 1px solid #c2e6e8;
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.gingham-check-paleblue-badge {
background-color: #e2f5f6;
color: #388a91;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.gingham-check-paleblue-text {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #2b3d40;
}
</style>
<div class="gingham-check-paleblue">
<h2 class="gingham-check-paleblue-h2">タイトルが入ります</h2>
<div class="gingham-check-paleblue-container">
<div class="gingham-check-paleblue-card">
<span class="gingham-check-paleblue-badge">STEP 01</span>
<p class="gingham-check-paleblue-text">
step1の内容を入力します
</p>
</div>
<div class="gingham-check-paleblue-card">
<span class="gingham-check-paleblue-badge">STEP 02</span>
<p class="gingham-check-paleblue-text">
step2の内容を入力します
</p>
</div>
<div class="gingham-check-paleblue-card">
<span class="gingham-check-paleblue-badge">STEP 03</span>
<p class="gingham-check-paleblue-text">
step3の内容を入力します
</p>
</div>
</div>
</div>
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
アメブロ囲み枠ご使用時のお願い
- ブログやホームページにコピペして使っていただいてOKです
- 商用利用可能です
- 無断転載・再配布は禁止です
- ご使用時の報告は不要です
デザインの著作権は捨てていません
（LINE公式などで自作と偽り配布することは禁止です）
（LINE公式などで自作と偽り配布することは禁止です）
まとめ ✦
アメブロ可愛い囲み枠でギンガムチェック模様を付けてみましたが、お気に入りは見つかりましたか？
コピペで使えるのでアメブロ・ホームページでお気軽にご活用ください。
大人可愛い色合いで１２色用意してみたので、女性起業家さんが気に入ってくださると嬉しいです♡
私はピスタチオが結構可愛くて気に入っています^^
今回は囲み枠を紹介していますが、もっともっとしっかりと自分の教室・サロンの世界観を持った１つのホームページが欲しいという方は女性向けホームページ制作をご検討ください。
⇣ 大人可愛いホームページ制作はこちら
