アメブロで使える可愛い囲み枠で、ハンドメイド作家さん向けに3ステップの受注フロー枠をつくりました。
オンラインショップや注文時のご注文手順にお使いください。
１２色種類があり、各色ごとにゴールドと組み合わせて上品にしています。
商用利用可能なので、ホームページやアメブロにコピペでご活用いただけます。
アメブロ可愛い囲み枠│ハンドメイド作家さん向け注文フロー枠12色
パステルピンク×ゴールド
ご注文手順
— ORDER PROCESS —
STEP 01
商品を選択・カート追加
お好みのカラーやサイズを選び、カートに入れて購入手続きに進みます。
STEP 02
お届け先・お支払い確認
配送先情報とご希望の決済方法を入力し、ご注文内容を確定します。
STEP 03
発送・お手元へ到着
丁寧な梱包でお届けいたします。追跡番号で配送状況もご確認いただけます。
COPY CODE
<style type="text/css">
.kr-step-wrapper-sakura {
max-width: 580px;
margin: 30px auto;
padding: 30px 24px;
background-color: #fff9fa;
border: 1px solid #f2dcd0;
border-radius: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #4a3e42;
box-shadow: 0 4px 16px rgba(230, 160, 175, 0.08);
}
.kr-step-header-sakura {
text-align: center;
margin-bottom: 24px;
}
.kr-step-title-sakura {
font-size: 16px;
font-weight: 700;
color: #e6a0af;
margin: 0;
letter-spacing: 0.05em;
}
.kr-step-sub-sakura {
display: block;
font-size: 11px;
color: #c5a059;
letter-spacing: 0.15em;
margin-top: 4px;
font-weight: 600;
}
.kr-step-container-sakura {
display: flex;
flex-direction: column;
gap: 16px;
}
.kr-step-card-sakura {
background: #ffffff;
border-radius: 18px;
padding: 20px;
border: 1px solid #fdf0f3;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.kr-step-top-sakura {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.kr-step-badge-sakura {
background-color: #fcebf0;
color: #e6a0af;
font-size: 11px;
font-weight: 700;
padding: 3px 12px;
border-radius: 50px;
letter-spacing: 0.08em;
}
.kr-step-head-sakura {
font-size: 15px;
font-weight: 700;
color: #4a3e42;
margin: 0;
}
.kr-step-text-sakura {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #5e4c52;
}
</style>
<div class="kr-step-wrapper-sakura">
<div class="kr-step-header-sakura">
<div class="kr-step-title-sakura">タイトルが入ります</div>
<span class="kr-step-sub-sakura">— SUB TITLE —</span>
</div>
<div class="kr-step-container-sakura">
<!-- STEP 1 -->
<div class="kr-step-card-sakura">
<div class="kr-step-top-sakura">
<span class="kr-step-badge-sakura">STEP 01</span>
<div class="kr-step-head-sakura">step1のタイトル</div>
</div>
<p class="kr-step-text-sakura">step1の内容を入力します</p>
</div>
<!-- STEP 2 -->
<div class="kr-step-card-sakura">
<div class="kr-step-top-sakura">
<span class="kr-step-badge-sakura">STEP 02</span>
<div class="kr-step-head-sakura">step2のタイトル</div>
</div>
<p class="kr-step-text-sakura">step2の内容を入力します</p>
</div>
<!-- STEP 3 -->
<div class="kr-step-card-sakura">
<div class="kr-step-top-sakura">
<span class="kr-step-badge-sakura">STEP 03</span>
<div class="kr-step-head-sakura">step3のタイトル</div>
</div>
<p class="kr-step-text-sakura">step3の内容を入力します</p>
</div>
</div>
</div>
くすみピンク×ゴールド
ご注文手順
— ORDER PROCESS —
STEP 01
商品を選択・カート追加
お好みのカラーやサイズを選び、カートに入れて購入手続きに進みます。
STEP 02
お届け先・お支払い確認
配送先情報とご希望の決済方法を入力し、ご注文内容を確定します。
STEP 03
発送・お手元へ到着
丁寧な梱包でお届けいたします。追跡番号で配送状況もご確認いただけます。
COPY CODE
<style type="text/css">
.kr-step-wrapper-duskpink {
max-width: 580px;
margin: 30px auto;
padding: 30px 24px;
background-color: #fbf7f7;
border: 1px solid #ebdcd0;
border-radius: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #4a3f41;
box-shadow: 0 4px 16px rgba(184, 137, 145, 0.08);
}
.kr-step-header-duskpink {
text-align: center;
margin-bottom: 24px;
}
.kr-step-title-duskpink {
font-size: 1.15em;
font-weight: 700;
color: #b88991;
margin: 0;
letter-spacing: 0.05em;
}
.kr-step-sub-duskpink {
display: block;
font-size: 0.75em;
color: #c5a059;
letter-spacing: 0.15em;
margin-top: 4px;
font-weight: 600;
}
.kr-step-container-duskpink {
display: flex;
flex-direction: column;
gap: 16px;
}
.kr-step-card-duskpink {
background: #ffffff;
border-radius: 18px;
padding: 20px;
border: 1px solid #f5e9eb;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.kr-step-top-duskpink {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.kr-step-badge-duskpink {
background-color: #f7e9ec;
color: #b88991;
font-size: 0.72em;
font-weight: 700;
padding: 3px 12px;
border-radius: 50px;
letter-spacing: 0.08em;
}
.kr-step-head-duskpink {
font-size: 0.95em;
font-weight: 700;
color: #4a3f41;
margin: 0;
}
.kr-step-text-duskpink {
font-size: 0.88em;
line-height: 1.6;
margin: 0;
color: #5c4f52;
}
</style>
<div class="kr-step-wrapper-duskpink">
<div class="kr-step-header-duskpink">
<div class="kr-step-title-duskpink">タイトルが入ります</div>
<span class="kr-step-sub-duskpink">— SUB TITLE —</span>
</div>
<div class="kr-step-container-duskpink">
<!-- STEP 1 -->
<div class="kr-step-card-duskpink">
<div class="kr-step-top-duskpink">
<span class="kr-step-badge-duskpink">STEP 01</span>
<div class="kr-step-head-duskpink">step1のタイトル</div>
</div>
<p class="kr-step-text-duskpink">step1の内容を入力します</p>
</div>
<!-- STEP 2 -->
<div class="kr-step-card-duskpink">
<div class="kr-step-top-duskpink">
<span class="kr-step-badge-duskpink">STEP 02</span>
<div class="kr-step-head-duskpink">step2のタイトル</div>
</div>
<p class="kr-step-text-duskpink">step2の内容を入力します</p>
</div>
<!-- STEP 3 -->
<div class="kr-step-card-duskpink">
<div class="kr-step-top-duskpink">
<span class="kr-step-badge-duskpink">STEP 03</span>
<div class="kr-step-head-duskpink">step3のタイトル</div>
</div>
<p class="kr-step-text-duskpink">step3の内容を入力します</p>
</div>
</div>
</div>
濃いめピンク×ゴールド
ご注文手順
— ORDER PROCESS —
STEP 01
商品を選択・カート追加
お好みのカラーやサイズを選び、カートに入れて購入手続きに進みます。
STEP 02
お届け先・お支払い確認
配送先情報とご希望の決済方法を入力し、ご注文内容を確定します。
STEP 03
発送・お手元へ到着
丁寧な梱包でお届けいたします。追跡番号で配送状況もご確認いただけます。
COPY CODE
<style type="text/css">
.kr-step-wrapper-deeppink {
max-width: 580px;
margin: 30px auto;
padding: 30px 24px;
background-color: #fdf6f8;
border: 1px solid #ebdcd0;
border-radius: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #423538;
box-shadow: 0 4px 16px rgba(216, 27, 96, 0.08);
}
.kr-step-header-deeppink {
text-align: center;
margin-bottom: 24px;
}
.kr-step-title-deeppink {
font-size: 1.15em;
font-weight: 700;
color: #d81b60;
margin: 0;
letter-spacing: 0.05em;
}
.kr-step-sub-deeppink {
display: block;
font-size: 0.75em;
color: #c5a059;
letter-spacing: 0.15em;
margin-top: 4px;
font-weight: 600;
}
.kr-step-container-deeppink {
display: flex;
flex-direction: column;
gap: 16px;
}
.kr-step-card-deeppink {
background: #ffffff;
border-radius: 18px;
padding: 20px;
border: 1px solid #fce4ec;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.kr-step-top-deeppink {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.kr-step-badge-deeppink {
background-color: #f8bbd0;
color: #ad1457;
font-size: 0.72em;
font-weight: 700;
padding: 3px 12px;
border-radius: 50px;
letter-spacing: 0.08em;
}
.kr-step-head-deeppink {
font-size: 0.95em;
font-weight: 700;
color: #423538;
margin: 0;
}
.kr-step-text-deeppink {
font-size: 0.88em;
line-height: 1.6;
margin: 0;
color: #574549;
}
</style>
<div class="kr-step-wrapper-deeppink">
<div class="kr-step-header-deeppink">
<div class="kr-step-title-deeppink">タイトルが入ります</div>
<span class="kr-step-sub-deeppink">— SUB TITLE —</span>
</div>
<div class="kr-step-container-deeppink">
<!-- STEP 1 -->
<div class="kr-step-card-deeppink">
<div class="kr-step-top-deeppink">
<span class="kr-step-badge-deeppink">STEP 01</span>
<div class="kr-step-head-deeppink">step1のタイトル</div>
</div>
<p class="kr-step-text-deeppink">step1の内容を入力します</p>
</div>
<!-- STEP 2 -->
<div class="kr-step-card-deeppink">
<div class="kr-step-top-deeppink">
<span class="kr-step-badge-deeppink">STEP 02</span>
<div class="kr-step-head-deeppink">step2のタイトル</div>
</div>
<p class="kr-step-text-deeppink">step2の内容を入力します</p>
</div>
<!-- STEP 3 -->
<div class="kr-step-card-deeppink">
<div class="kr-step-top-deeppink">
<span class="kr-step-badge-deeppink">STEP 03</span>
<div class="kr-step-head-deeppink">step3のタイトル</div>
</div>
<p class="kr-step-text-deeppink">step3の内容を入力します</p>
</div>
</div>
</div>
ボルドー×ゴールド
ご注文手順
— ORDER PROCESS —
STEP 01
商品を選択・カート追加
お好みのカラーやサイズを選び、カートに入れて購入手続きに進みます。
STEP 02
お届け先・お支払い確認
配送先情報とご希望の決済方法を入力し、ご注文内容を確定します。
STEP 03
発送・お手元へ到着
丁寧な梱包でお届けいたします。追跡番号で配送状況もご確認いただけます。
COPY CODE
<style type="text/css">
.kr-step-wrapper-bordeaux {
max-width: 580px;
margin: 30px auto;
padding: 30px 24px;
background-color: #fcf8f8;
border: 1px solid #ebdcd0;
border-radius: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #423538;
box-shadow: 0 4px 16px rgba(112, 38, 52, 0.08);
}
.kr-step-header-bordeaux {
text-align: center;
margin-bottom: 24px;
}
.kr-step-title-bordeaux {
font-size: 1.15em;
font-weight: 700;
color: #702634;
margin: 0;
letter-spacing: 0.05em;
}
.kr-step-sub-bordeaux {
display: block;
font-size: 0.75em;
color: #c5a059;
letter-spacing: 0.15em;
margin-top: 4px;
font-weight: 600;
}
.kr-step-container-bordeaux {
display: flex;
flex-direction: column;
gap: 16px;
}
.kr-step-card-bordeaux {
background: #ffffff;
border-radius: 18px;
padding: 20px;
border: 1px solid #f7ecee;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.kr-step-top-bordeaux {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.kr-step-badge-bordeaux {
background-color: #f8eaed;
color: #702634;
font-size: 0.72em;
font-weight: 700;
padding: 3px 12px;
border-radius: 50px;
letter-spacing: 0.08em;
}
.kr-step-head-bordeaux {
font-size: 0.95em;
font-weight: 700;
color: #423538;
margin: 0;
}
.kr-step-text-bordeaux {
font-size: 0.88em;
line-height: 1.6;
margin: 0;
color: #574549;
}
</style>
<div class="kr-step-wrapper-bordeaux">
<div class="kr-step-header-bordeaux">
<div class="kr-step-title-bordeaux">タイトルが入ります</div>
<span class="kr-step-sub-bordeaux">— SUB TITLE —</span>
</div>
<div class="kr-step-container-bordeaux">
<!-- STEP 1 -->
<div class="kr-step-card-bordeaux">
<div class="kr-step-top-bordeaux">
<span class="kr-step-badge-bordeaux">STEP 01</span>
<div class="kr-step-head-bordeaux">step1のタイトル</div>
</div>
<p class="kr-step-text-bordeaux">step1の内容を入力します</p>
</div>
<!-- STEP 2 -->
<div class="kr-step-card-bordeaux">
<div class="kr-step-top-bordeaux">
<span class="kr-step-badge-bordeaux">STEP 02</span>
<div class="kr-step-head-bordeaux">step2のタイトル</div>
</div>
<p class="kr-step-text-bordeaux">step2の内容を入力します</p>
</div>
<!-- STEP 3 -->
<div class="kr-step-card-bordeaux">
<div class="kr-step-top-bordeaux">
<span class="kr-step-badge-bordeaux">STEP 03</span>
<div class="kr-step-head-bordeaux">step3のタイトル</div>
</div>
<p class="kr-step-text-bordeaux">step3の内容を入力します</p>
</div>
</div>
</div>
ブルー×ゴールド
ご注文手順
— ORDER PROCESS —
STEP 01
商品を選択・カート追加
お好みのカラーやサイズを選び、カートに入れて購入手続きに進みます。
STEP 02
お届け先・お支払い確認
配送先情報とご希望の決済方法を入力し、ご注文内容を確定します。
STEP 03
発送・お手元へ到着
丁寧な梱包でお届けいたします。追跡番号で配送状況もご確認いただけます。
COPY CODE
<style type="text/css">
.kr-step-wrapper-bluegold {
max-width: 580px;
margin: 30px auto;
padding: 30px 24px;
background-color: #f4f7f9;
border: 1px solid #ebdcd0;
border-radius: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #38424d;
box-shadow: 0 4px 16px rgba(44, 62, 80, 0.08);
}
.kr-step-header-bluegold {
text-align: center;
margin-bottom: 24px;
}
.kr-step-title-bluegold {
font-size: 1.15em;
font-weight: 700;
color: #2c3e50;
margin: 0;
letter-spacing: 0.05em;
}
.kr-step-sub-bluegold {
display: block;
font-size: 0.75em;
color: #c5a059;
letter-spacing: 0.15em;
margin-top: 4px;
font-weight: 600;
}
.kr-step-container-bluegold {
display: flex;
flex-direction: column;
gap: 16px;
}
.kr-step-card-bluegold {
background: #ffffff;
border-radius: 18px;
padding: 20px;
border: 1px solid #e2e9f0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.kr-step-top-bluegold {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.kr-step-badge-bluegold {
background-color: #e6eef5;
color: #2c3e50;
font-size: 0.72em;
font-weight: 700;
padding: 3px 12px;
border-radius: 50px;
letter-spacing: 0.08em;
}
.kr-step-head-bluegold {
font-size: 0.95em;
font-weight: 700;
color: #38424d;
margin: 0;
}
.kr-step-text-bluegold {
font-size: 0.88em;
line-height: 1.6;
margin: 0;
color: #4f5a66;
}
</style>
<div class="kr-step-wrapper-bluegold">
<div class="kr-step-header-bluegold">
<div class="kr-step-title-bluegold">タイトルが入ります</div>
<span class="kr-step-sub-bluegold">— SUB TITLE —</span>
</div>
<div class="kr-step-container-bluegold">
<!-- STEP 1 -->
<div class="kr-step-card-bluegold">
<div class="kr-step-top-bluegold">
<span class="kr-step-badge-bluegold">STEP 01</span>
<div class="kr-step-head-bluegold">step1のタイトル</div>
</div>
<p class="kr-step-text-bluegold">step1の内容を入力します</p>
</div>
<!-- STEP 2 -->
<div class="kr-step-card-bluegold">
<div class="kr-step-top-bluegold">
<span class="kr-step-badge-bluegold">STEP 02</span>
<div class="kr-step-head-bluegold">step2のタイトル</div>
</div>
<p class="kr-step-text-bluegold">step2の内容を入力します</p>
</div>
<!-- STEP 3 -->
<div class="kr-step-card-bluegold">
<div class="kr-step-top-bluegold">
<span class="kr-step-badge-bluegold">STEP 03</span>
<div class="kr-step-head-bluegold">step3のタイトル</div>
</div>
<p class="kr-step-text-bluegold">step3の内容を入力します</p>
</div>
</div>
</div>
ラベンダー×ゴールド
ご注文手順
— ORDER PROCESS —
STEP 01
商品を選択・カート追加
お好みのカラーやサイズを選び、カートに入れて購入手続きに進みます。
STEP 02
お届け先・お支払い確認
配送先情報とご希望の決済方法を入力し、ご注文内容を確定します。
STEP 03
発送・お手元へ到着
丁寧な梱包でお届けいたします。追跡番号で配送状況もご確認いただけます。
COPY CODE
<style type="text/css">
.kr-step-wrapper-lavender {
max-width: 580px;
margin: 30px auto;
padding: 30px 24px;
background-color: #f8f6fb;
border: 1px solid #ebdcd0;
border-radius: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #423d4a;
box-shadow: 0 4px 16px rgba(155, 137, 184, 0.08);
}
.kr-step-header-lavender {
text-align: center;
margin-bottom: 24px;
}
.kr-step-title-lavender {
font-size: 1.15em;
font-weight: 700;
color: #9b89b8;
margin: 0;
letter-spacing: 0.05em;
}
.kr-step-sub-lavender {
display: block;
font-size: 0.75em;
color: #c5a059;
letter-spacing: 0.15em;
margin-top: 4px;
font-weight: 600;
}
.kr-step-container-lavender {
display: flex;
flex-direction: column;
gap: 16px;
}
.kr-step-card-lavender {
background: #ffffff;
border-radius: 18px;
padding: 20px;
border: 1px solid #f0ebf7;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.kr-step-top-lavender {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.kr-step-badge-lavender {
background-color: #f0eaf7;
color: #9b89b8;
font-size: 0.72em;
font-weight: 700;
padding: 3px 12px;
border-radius: 50px;
letter-spacing: 0.08em;
}
.kr-step-head-lavender {
font-size: 0.95em;
font-weight: 700;
color: #423d4a;
margin: 0;
}
.kr-step-text-lavender {
font-size: 0.88em;
line-height: 1.6;
margin: 0;
color: #585163;
}
</style>
<div class="kr-step-wrapper-lavender">
<div class="kr-step-header-lavender">
<div class="kr-step-title-lavender">タイトルが入ります</div>
<span class="kr-step-sub-lavender">— SUB TITLE —</span>
</div>
<div class="kr-step-container-lavender">
<!-- STEP 1 -->
<div class="kr-step-card-lavender">
<div class="kr-step-top-lavender">
<span class="kr-step-badge-lavender">STEP 01</span>
<div class="kr-step-head-lavender">step1のタイトル</div>
</div>
<p class="kr-step-text-lavender">step1の内容を入力します</p>
</div>
<!-- STEP 2 -->
<div class="kr-step-card-lavender">
<div class="kr-step-top-lavender">
<span class="kr-step-badge-lavender">STEP 02</span>
<div class="kr-step-head-lavender">step2のタイトル</div>
</div>
<p class="kr-step-text-lavender">step2の内容を入力します</p>
</div>
<!-- STEP 3 -->
<div class="kr-step-card-lavender">
<div class="kr-step-top-lavender">
<span class="kr-step-badge-lavender">STEP 03</span>
<div class="kr-step-head-lavender">step3のタイトル</div>
</div>
<p class="kr-step-text-lavender">step3の内容を入力します</p>
</div>
</div>
</div>
ベージュ×ゴールド
ご注文手順
— ORDER PROCESS —
STEP 01
商品を選択・カート追加
お好みのカラーやサイズを選び、カートに入れて購入手続きに進みます。
STEP 02
お届け先・お支払い確認
配送先情報とご希望の決済方法を入力し、ご注文内容を確定します。
STEP 03
発送・お手元へ到着
丁寧な梱包でお届けいたします。追跡番号で配送状況もご確認いただけます。
COPY CODE
<style type="text/css">
.kr-step-wrapper-beigegold {
max-width: 580px;
margin: 30px auto;
padding: 30px 24px;
background-color: #faf7f2;
border: 1px solid #ebdcd0;
border-radius: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #4a433d;
box-shadow: 0 4px 16px rgba(181, 150, 110, 0.08);
}
.kr-step-header-beigegold {
text-align: center;
margin-bottom: 24px;
}
.kr-step-title-beigegold {
font-size: 1.15em;
font-weight: 700;
color: #a68a68;
margin: 0;
letter-spacing: 0.05em;
}
.kr-step-sub-beigegold {
display: block;
font-size: 0.75em;
color: #c5a059;
letter-spacing: 0.15em;
margin-top: 4px;
font-weight: 600;
}
.kr-step-container-beigegold {
display: flex;
flex-direction: column;
gap: 16px;
}
.kr-step-card-beigegold {
background: #ffffff;
border-radius: 18px;
padding: 20px;
border: 1px solid #f2e9e1;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.kr-step-top-beigegold {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.kr-step-badge-beigegold {
background-color: #f5ece4;
color: #a68a68;
font-size: 0.72em;
font-weight: 700;
padding: 3px 12px;
border-radius: 50px;
letter-spacing: 0.08em;
}
.kr-step-head-beigegold {
font-size: 0.95em;
font-weight: 700;
color: #4a433d;
margin: 0;
}
.kr-step-text-beigegold {
font-size: 0.88em;
line-height: 1.6;
margin: 0;
color: #5c534c;
}
</style>
<div class="kr-step-wrapper-beigegold">
<div class="kr-step-header-beigegold">
<div class="kr-step-title-beigegold">タイトルが入ります</div>
<span class="kr-step-sub-beigegold">— SUB TITLE —</span>
</div>
<div class="kr-step-container-beigegold">
<!-- STEP 1 -->
<div class="kr-step-card-beigegold">
<div class="kr-step-top-beigegold">
<span class="kr-step-badge-beigegold">STEP 01</span>
<div class="kr-step-head-beigegold">step1のタイトル</div>
</div>
<p class="kr-step-text-beigegold">step1の内容を入力します</p>
</div>
<!-- STEP 2 -->
<div class="kr-step-card-beigegold">
<div class="kr-step-top-beigegold">
<span class="kr-step-badge-beigegold">STEP 02</span>
<div class="kr-step-head-beigegold">step2のタイトル</div>
</div>
<p class="kr-step-text-beigegold">step2の内容を入力します</p>
</div>
<!-- STEP 3 -->
<div class="kr-step-card-beigegold">
<div class="kr-step-top-beigegold">
<span class="kr-step-badge-beigegold">STEP 03</span>
<div class="kr-step-head-beigegold">step3のタイトル</div>
</div>
<p class="kr-step-text-beigegold">step3の内容を入力します</p>
</div>
</div>
</div>
セージグーン×ゴールド
ご注文手順
— ORDER PROCESS —
STEP 01
商品を選択・カート追加
お好みのカラーやサイズを選び、カートに入れて購入手続きに進みます。
STEP 02
お届け先・お支払い確認
配送先情報とご希望の決済方法を入力し、ご注文内容を確定します。
STEP 03
発送・お手元へ到着
丁寧な梱包でお届けいたします。追跡番号で配送状況もご確認いただけます。
COPY CODE
<style type="text/css">
.kr-step-wrapper-03 {
max-width: 580px;
margin: 30px auto;
padding: 30px 24px;
background-color: #f2f5f3;
border: 1px solid #dce4de;
border-radius: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #3e4741;
box-shadow: 0 4px 16px rgba(98, 124, 106, 0.08);
}
.kr-step-header-03 {
text-align: center;
margin-bottom: 24px;
}
.kr-step-title-03 {
font-size: 1.15em;
font-weight: 700;
color: #5c7863;
margin: 0;
letter-spacing: 0.05em;
}
.kr-step-sub-03 {
display: block;
font-size: 0.75em;
color: #a38c5b;
letter-spacing: 0.15em;
margin-top: 4px;
font-weight: 600;
}
.kr-step-container-03 {
display: flex;
flex-direction: column;
gap: 16px;
}
.kr-step-card-03 {
background: #ffffff;
border-radius: 18px;
padding: 20px;
border: 1px solid #e1e8e3;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.kr-step-top-03 {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.kr-step-badge-03 {
background-color: #e8f0ea;
color: #5c7863;
font-size: 0.72em;
font-weight: 700;
padding: 3px 12px;
border-radius: 50px;
letter-spacing: 0.08em;
}
.kr-step-head-03 {
font-size: 0.95em;
font-weight: 700;
color: #3e4741;
margin: 0;
}
.kr-step-text-03 {
font-size: 0.88em;
line-height: 1.6;
margin: 0;
color: #525e56;
}
</style>
<div class="kr-step-wrapper-03">
<div class="kr-step-header-03">
<div class="kr-step-title-03">タイトルが入ります</div>
<span class="kr-step-sub-03">— SUB TITLE —</span>
</div>
<div class="kr-step-container-03">
<!-- STEP 1 -->
<div class="kr-step-card-03">
<div class="kr-step-top-03">
<span class="kr-step-badge-03">STEP 01</span>
<div class="kr-step-head-03">step1のタイトル</div>
</div>
<p class="kr-step-text-03">step1の内容を入力します</p>
</div>
<!-- STEP 2 -->
<div class="kr-step-card-03">
<div class="kr-step-top-03">
<span class="kr-step-badge-03">STEP 02</span>
<div class="kr-step-head-03">step2のタイトル</div>
</div>
<p class="kr-step-text-03">step2の内容を入力します</p>
</div>
<!-- STEP 3 -->
<div class="kr-step-card-03">
<div class="kr-step-top-03">
<span class="kr-step-badge-03">STEP 03</span>
<div class="kr-step-head-03">step3のタイトル</div>
</div>
<p class="kr-step-text-03">step3の内容を入力します</p>
</div>
</div>
</div>
くすみブルー×ゴールド
ご注文手順
— ORDER PROCESS —
STEP 01
商品を選択・カート追加
お好みのカラーやサイズを選び、カートに入れて購入手続きに進みます。
STEP 02
お届け先・お支払い確認
配送先情報とご希望の決済方法を入力し、ご注文内容を確定します。
STEP 03
発送・お手元へ到着
丁寧な梱包でお届けいたします。追跡番号で配送状況もご確認いただけます。
COPY CODE
<style type="text/css">
.kr-step-wrapper-duskblue {
max-width: 580px;
margin: 30px auto;
padding: 30px 24px;
background-color: #f2f6f8;
border: 1px solid #ebdcd0;
border-radius: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #3b4652;
box-shadow: 0 4px 16px rgba(112, 138, 153, 0.08);
}
.kr-step-header-duskblue {
text-align: center;
margin-bottom: 24px;
}
.kr-step-title-duskblue {
font-size: 1.15em;
font-weight: 700;
color: #708a99;
margin: 0;
letter-spacing: 0.05em;
}
.kr-step-sub-duskblue {
display: block;
font-size: 0.75em;
color: #c5a059;
letter-spacing: 0.15em;
margin-top: 4px;
font-weight: 600;
}
.kr-step-container-duskblue {
display: flex;
flex-direction: column;
gap: 16px;
}
.kr-step-card-duskblue {
background: #ffffff;
border-radius: 18px;
padding: 20px;
border: 1px solid #e3ebf0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.kr-step-top-duskblue {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.kr-step-badge-duskblue {
background-color: #e6eef2;
color: #708a99;
font-size: 0.72em;
font-weight: 700;
padding: 3px 12px;
border-radius: 50px;
letter-spacing: 0.08em;
}
.kr-step-head-duskblue {
font-size: 0.95em;
font-weight: 700;
color: #3b4652;
margin: 0;
}
.kr-step-text-duskblue {
font-size: 0.88em;
line-height: 1.6;
margin: 0;
color: #52606e;
}
</style>
<div class="kr-step-wrapper-duskblue">
<div class="kr-step-header-duskblue">
<div class="kr-step-title-duskblue">タイトルが入ります</div>
<span class="kr-step-sub-duskblue">— SUB TITLE —</span>
</div>
<div class="kr-step-container-duskblue">
<!-- STEP 1 -->
<div class="kr-step-card-duskblue">
<div class="kr-step-top-duskblue">
<span class="kr-step-badge-duskblue">STEP 01</span>
<div class="kr-step-head-duskblue">step1のタイトル</div>
</div>
<p class="kr-step-text-duskblue">step1の内容を入力します</p>
</div>
<!-- STEP 2 -->
<div class="kr-step-card-duskblue">
<div class="kr-step-top-duskblue">
<span class="kr-step-badge-duskblue">STEP 02</span>
<div class="kr-step-head-duskblue">step2のタイトル</div>
</div>
<p class="kr-step-text-duskblue">step2の内容を入力します</p>
</div>
<!-- STEP 3 -->
<div class="kr-step-card-duskblue">
<div class="kr-step-top-duskblue">
<span class="kr-step-badge-duskblue">STEP 03</span>
<div class="kr-step-head-duskblue">step3のタイトル</div>
</div>
<p class="kr-step-text-duskblue">step3の内容を入力します</p>
</div>
</div>
</div>
アプリコット×ゴールド
ご注文手順
— ORDER PROCESS —
STEP 01
商品を選択・カート追加
お好みのカラーやサイズを選び、カートに入れて購入手続きに進みます。
STEP 02
お届け先・お支払い確認
配送先情報とご希望の決済方法を入力し、ご注文内容を確定します。
STEP 03
発送・お手元へ到着
丁寧な梱包でお届けいたします。追跡番号で配送状況もご確認いただけます。
COPY CODE
<style type="text/css">
.kr-step-wrapper-apricot {
max-width: 580px;
margin: 30px auto;
padding: 30px 24px;
background-color: #faf5f0;
border: 1px solid #ebdcd0;
border-radius: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #4a3e3d;
box-shadow: 0 4px 16px rgba(224, 130, 98, 0.08);
}
.kr-step-header-apricot {
text-align: center;
margin-bottom: 24px;
}
.kr-step-title-apricot {
font-size: 1.15em;
font-weight: 700;
color: #e08262;
margin: 0;
letter-spacing: 0.05em;
}
.kr-step-sub-apricot {
display: block;
font-size: 0.75em;
color: #c5a059;
letter-spacing: 0.15em;
margin-top: 4px;
font-weight: 600;
}
.kr-step-container-apricot {
display: flex;
flex-direction: column;
gap: 16px;
}
.kr-step-card-apricot {
background: #ffffff;
border-radius: 18px;
padding: 20px;
border: 1px solid #f7eae1;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.kr-step-top-apricot {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.kr-step-badge-apricot {
background-color: #fceee6;
color: #e08262;
font-size: 0.72em;
font-weight: 700;
padding: 3px 12px;
border-radius: 50px;
letter-spacing: 0.08em;
}
.kr-step-head-apricot {
font-size: 0.95em;
font-weight: 700;
color: #4a3e3d;
margin: 0;
}
.kr-step-text-apricot {
font-size: 0.88em;
line-height: 1.6;
margin: 0;
color: #61504f;
}
</style>
<div class="kr-step-wrapper-apricot">
<div class="kr-step-header-apricot">
<div class="kr-step-title-apricot">タイトルが入ります</div>
<span class="kr-step-sub-apricot">— SUB TITLE —</span>
</div>
<div class="kr-step-container-apricot">
<!-- STEP 1 -->
<div class="kr-step-card-apricot">
<div class="kr-step-top-apricot">
<span class="kr-step-badge-apricot">STEP 01</span>
<div class="kr-step-head-apricot">step1のタイトル</div>
</div>
<p class="kr-step-text-apricot">step1の内容を入力します</p>
</div>
<!-- STEP 2 -->
<div class="kr-step-card-apricot">
<div class="kr-step-top-apricot">
<span class="kr-step-badge-apricot">STEP 02</span>
<div class="kr-step-head-apricot">step2のタイトル</div>
</div>
<p class="kr-step-text-apricot">step2の内容を入力します</p>
</div>
<!-- STEP 3 -->
<div class="kr-step-card-apricot">
<div class="kr-step-top-apricot">
<span class="kr-step-badge-apricot">STEP 03</span>
<div class="kr-step-head-apricot">step3のタイトル</div>
</div>
<p class="kr-step-text-apricot">step3の内容を入力します</p>
</div>
</div>
</div>
テラコッタ×ゴールド
ご注文手順
— ORDER PROCESS —
STEP 01
商品を選択・カート追加
お好みのカラーやサイズを選び、カートに入れて購入手続きに進みます。
STEP 02
お届け先・お支払い確認
配送先情報とご希望の決済方法を入力し、ご注文内容を確定します。
STEP 03
発送・お手元へ到着
丁寧な梱包でお届けいたします。追跡番号で配送状況もご確認いただけます。
COPY CODE
<style type="text/css">
.kr-step-wrapper-terracotta {
max-width: 580px;
margin: 30px auto;
padding: 30px 24px;
background-color: #fcf6f3;
border: 1px solid #ebcdc3;
border-radius: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #4a332d;
box-shadow: 0 4px 16px rgba(192, 90, 62, 0.08);
}
.kr-step-header-terracotta {
text-align: center;
margin-bottom: 24px;
}
.kr-step-title-terracotta {
font-size: 1.15em;
font-weight: 700;
color: #c05a3e;
margin: 0;
letter-spacing: 0.05em;
}
.kr-step-sub-terracotta {
display: block;
font-size: 0.75em;
color: #a8793b;
letter-spacing: 0.15em;
margin-top: 4px;
font-weight: 600;
}
.kr-step-container-terracotta {
display: flex;
flex-direction: column;
gap: 16px;
}
.kr-step-card-terracotta {
background: #ffffff;
border-radius: 18px;
padding: 20px;
border: 1px solid #f3ded7;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.kr-step-top-terracotta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.kr-step-badge-terracotta {
background-color: #f7e7e2;
color: #c05a3e;
font-size: 0.72em;
font-weight: 700;
padding: 3px 12px;
border-radius: 50px;
letter-spacing: 0.08em;
}
.kr-step-head-terracotta {
font-size: 0.95em;
font-weight: 700;
color: #4a332d;
margin: 0;
}
.kr-step-text-terracotta {
font-size: 0.88em;
line-height: 1.6;
margin: 0;
color: #5c433c;
}
</style>
<div class="kr-step-wrapper-terracotta">
<div class="kr-step-header-terracotta">
<div class="kr-step-title-terracotta">タイトルが入ります</div>
<span class="kr-step-sub-terracotta">— SUB TITLE —</span>
</div>
<div class="kr-step-container-terracotta">
<!-- STEP 1 -->
<div class="kr-step-card-terracotta">
<div class="kr-step-top-terracotta">
<span class="kr-step-badge-terracotta">STEP 01</span>
<div class="kr-step-head-terracotta">step1のタイトル</div>
</div>
<p class="kr-step-text-terracotta">step1の内容を入力します</p>
</div>
<!-- STEP 2 -->
<div class="kr-step-card-terracotta">
<div class="kr-step-top-terracotta">
<span class="kr-step-badge-terracotta">STEP 02</span>
<div class="kr-step-head-terracotta">step2のタイトル</div>
</div>
<p class="kr-step-text-terracotta">step2の内容を入力します</p>
</div>
<!-- STEP 3 -->
<div class="kr-step-card-terracotta">
<div class="kr-step-top-terracotta">
<span class="kr-step-badge-terracotta">STEP 03</span>
<div class="kr-step-head-terracotta">step3のタイトル</div>
</div>
<p class="kr-step-text-terracotta">step3の内容を入力します</p>
</div>
</div>
</div>
ブラウン×ゴールド
ご注文手順
— ORDER PROCESS —
STEP 01
商品を選択・カート追加
お好みのカラーやサイズを選び、カートに入れて購入手続きに進みます。
STEP 02
お届け先・お支払い確認
配送先情報とご希望の決済方法を入力し、ご注文内容を確定します。
STEP 03
発送・お手元へ到着
丁寧な梱包でお届けいたします。追跡番号で配送状況もご確認いただけます。
COPY CODE
<style type="text/css">
.kr-step-wrapper-brown {
max-width: 580px;
margin: 30px auto;
padding: 30px 24px;
background-color: #f7f5f2;
border: 1px solid #ebdcd0;
border-radius: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
color: #403632;
box-shadow: 0 4px 16px rgba(92, 64, 51, 0.08);
}
.kr-step-header-brown {
text-align: center;
margin-bottom: 24px;
}
.kr-step-title-brown {
font-size: 1.15em;
font-weight: 700;
color: #5c4033;
margin: 0;
letter-spacing: 0.05em;
}
.kr-step-sub-brown {
display: block;
font-size: 0.75em;
color: #c5a059;
letter-spacing: 0.15em;
margin-top: 4px;
font-weight: 600;
}
.kr-step-container-brown {
display: flex;
flex-direction: column;
gap: 16px;
}
.kr-step-card-brown {
background: #ffffff;
border-radius: 18px;
padding: 20px;
border: 1px solid #f0e9e4;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.kr-step-top-brown {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.kr-step-badge-brown {
background-color: #f2eae4;
color: #5c4033;
font-size: 0.72em;
font-weight: 700;
padding: 3px 12px;
border-radius: 50px;
letter-spacing: 0.08em;
}
.kr-step-head-brown {
font-size: 0.95em;
font-weight: 700;
color: #403632;
margin: 0;
}
.kr-step-text-brown {
font-size: 0.88em;
line-height: 1.6;
margin: 0;
color: #594e48;
}
</style>
<div class="kr-step-wrapper-brown">
<div class="kr-step-header-brown">
<div class="kr-step-title-brown">タイトルが入ります</div>
<span class="kr-step-sub-brown">— SUB TITLE —</span>
</div>
<div class="kr-step-container-brown">
<!-- STEP 1 -->
<div class="kr-step-card-brown">
<div class="kr-step-top-brown">
<span class="kr-step-badge-brown">STEP 01</span>
<div class="kr-step-head-brown">step1のタイトル</div>
</div>
<p class="kr-step-text-brown">step1の内容を入力します</p>
</div>
<!-- STEP 2 -->
<div class="kr-step-card-brown">
<div class="kr-step-top-brown">
<span class="kr-step-badge-brown">STEP 02</span>
<div class="kr-step-head-brown">step2のタイトル</div>
</div>
<p class="kr-step-text-brown">step2の内容を入力します</p>
</div>
<!-- STEP 3 -->
<div class="kr-step-card-brown">
<div class="kr-step-top-brown">
<span class="kr-step-badge-brown">STEP 03</span>
<div class="kr-step-head-brown">step3のタイトル</div>
</div>
<p class="kr-step-text-brown">step3の内容を入力します</p>
</div>
</div>
</div>
使い方の３ステップ
STEP 01
使いたい素材のコード（英語の枠内）をすべてコピーします。
STEP 02
アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。
STEP 03
「通常表示」に戻し、枠内の文字を書き換えたら完成です♡
アメブロ囲み枠ご使用時のお願い
- ブログやホームページにコピペして使っていただいてOKです
- 商用利用可能です
- 無断転載・再配布は禁止です
- ご使用時の報告は不要です
デザインの著作権は捨てていません
（LINE公式などで自作と偽り配布することは禁止です）
（LINE公式などで自作と偽り配布することは禁止です）
まとめ ✦
アメブロの可愛い囲み枠で、サロン・オンラインレッスンをされている方向けに注文フロー枠を12種類つくりました♡
お気に入りの色は見つかりましたか？
今回のデザインはゴールドを重ねているので、上品に見せたい女性起業家さんにぴったりかなと思います。
囲み枠１つでもご自身のビジネスの個性が出てくるものですが、サイト全体で世界観を表現したい方は女性向けホームページ制作を見てみてください。
⇣ 画像をタップすると「女性向けホームページ制作」に移動します
