MENU表などに使いやすい
タイトル付きの囲み枠を１０種類そろえました♡
✾ボーダータイトル付き囲み枠
・キュートピンク
・ビタミンオレンジ
・ターコイズブルー
・ビビッドピンク
・アプリコット
✾スタンダードタイトル付き囲み枠
・サーモンピンク
・アッシュグリーン
・モードブルー
・チャイニーズレッド
・モーヴピンク
使い方はこちら▼
HTML編集表示画面にしてコピペ
通常編集画面で
タイトル→タイトルに入れたい文字
★★→本文
を書きこんで使ってください♡
✾タイトル付き囲み枠♡
キュートピンク
タイトル
★★
▼下のコードをコピペ▼
<p> </p><div style="marin:20px auto 0 auto;padding: 0 9px;min-height: 25px;line-height: 25px;text-align:center;background-color: #FFA9A2;background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #FBC8B0), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #FBC8B0),color-stop(.75, #FBC8B0), color-stop(.75, transparent),to(transparent));-webkit-background-size: 8px 8px;color: #FF2646;font-weight">タイトル</div>
<div style="position: relative; margin:0 auto;padding: 0.5em 1em;border: solid 2px #FBC8B0;">
<div style="margin:0;">★★</div></div><p> </p>
<div style="position: relative; margin:0 auto;padding: 0.5em 1em;border: solid 2px #FBC8B0;">
<div style="margin:0;">★★</div></div><p> </p>
ビタミンオレンジ
タイトル
★★
▼下のコードをコピペ▼
<p> </p><div style="marin:20px auto 0 auto;padding: 0 9px;min-height: 25px;line-height: 25px;text-align:center;background-color: #FD9267;background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #ff6600), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #ff6600),color-stop(.75, #ff6600), color-stop(.75, transparent),to(transparent));-webkit-background-size: 8px 8px;color: #ffffff;font-weight">タイトル</div>
<div style="position: relative; margin:0 auto;padding: 0.5em 1em;border: solid 2px #ff6600;">
<div style="margin:0;">★★</div></div><p> </p>
<div style="position: relative; margin:0 auto;padding: 0.5em 1em;border: solid 2px #ff6600;">
<div style="margin:0;">★★</div></div><p> </p>
ターコイズブルー
タイトル
★★
▼下のコードをコピペ▼
<p> </p><div style="marin:20px auto 0 auto;padding: 0 9px;min-height: 25px;line-height: 25px;text-align:center;background-color: #99ffcc;background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #5ACEBF), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #5ACEBF),color-stop(.75, #5ACEBF), color-stop(.75, transparent),to(transparent));-webkit-background-size: 8px 8px;color: #173054;font-weight">タイトル</div>
<div style="position: relative; margin:0 auto;padding: 0.5em 1em;border: solid 2px #5ACEBF;">
<div style="margin:0;">★★</div></div><p> </p>
<div style="position: relative; margin:0 auto;padding: 0.5em 1em;border: solid 2px #5ACEBF;">
<div style="margin:0;">★★</div></div><p> </p>
ビビッドピンク
タイトル
★★
▼下のコードをコピペ▼
<p> </p><div style="marin:20px auto 0 auto;padding: 0 9px;min-height: 25px;line-height: 25px;text-align:center;background-color: #FF7597;background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #ff3366), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #ff3366),color-stop(.75, #ff3366), color-stop(.75, transparent),to(transparent));-webkit-background-size: 8px 8px;color: #ffffff;font-weight">タイトル</div>
<div style="position: relative; margin:0 auto;padding: 0.5em 1em;border: solid 2px #ff3366;">
<div style="margin:0;">★★</div></div><p> </p>
<div style="position: relative; margin:0 auto;padding: 0.5em 1em;border: solid 2px #ff3366;">
<div style="margin:0;">★★</div></div><p> </p>
アプリコット
タイトル
★★
▼下のコードをコピペ▼
<p> </p><div style="marin:20px auto 0 auto;padding: 0 9px;min-height: 25px;line-height: 25px;text-align:center;background-color: #FDBFA5;background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #FC9D75), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #FC9D75),color-stop(.75, #FC9D75), color-stop(.75, transparent),to(transparent));-webkit-background-size: 8px 8px;color: #ff3300;font-weight">タイトル</div>
<div style="position: relative; margin:0 auto;padding: 0.5em 1em;border: solid 2px #FC9D75;">
<div style="margin:0;">★★</div></div><p> </p>
<div style="position: relative; margin:0 auto;padding: 0.5em 1em;border: solid 2px #FC9D75;">
<div style="margin:0;">★★</div></div><p> </p>
サーモンピンク
タイトル
★★
▼下のコードをコピペ▼
<p> </p><div style="background: #FA8072; border: 1px solid #FA8072; padding-left: 10px; color: rgb(255, 255, 255); font-weight: bold; text-align: center;">タイトル</div>
<div style="border: 1.5px solid #FA8072; padding: 10px;">
<div style="margin:0;">★★</div></div><p> </p>
<div style="border: 1.5px solid #FA8072; padding: 10px;">
<div style="margin:0;">★★</div></div><p> </p>
アッシュグリーン
タイトル
★★
▼下のコードをコピペ▼
<p> </p><div style="background: #8BD888; border: 1px solid #8BD888; padding-left: 10px; color: rgb(255, 255, 255); font-weight: bold; text-align: center;">タイトル</div>
<div style="border: 1.5px solid #8BD888; padding: 10px;">
<div style="margin:0;">★★</div></div><p> </p>
<div style="border: 1.5px solid #8BD888; padding: 10px;">
<div style="margin:0;">★★</div></div><p> </p>
モードブルー
タイトル
★★
▼下のコードをコピペ▼
<p> </p><div style="background: #9999ff; border: 1px solid #9999ff; padding-left: 10px; color: rgb(255, 255, 255); font-weight: bold; text-align: center;">タイトル</div>
<div style="border: 1.5px solid #9999ff; padding: 10px;">
<div style="margin:0;">★★</div></div><p> </p>
<div style="border: 1.5px solid #9999ff; padding: 10px;">
<div style="margin:0;">★★</div></div><p> </p>
チャイニーズレッド
タイトル
★★
▼下のコードをコピペ▼
<p> </p><div style="background: #ff6633; border: 1px solid #ff6633; padding-left: 10px; color: rgb(255, 255, 255); font-weight: bold; text-align: center;">タイトル</div>
<div style="border: 1.5px solid #ff6633; padding: 10px;">
<div style="margin:0;">★★</div></div><p> </p>
<div style="border: 1.5px solid #ff6633; padding: 10px;">
<div style="margin:0;">★★</div></div><p> </p>
モーヴピンク
タイトル
★★
▼下のコードをコピペ▼
<p> </p><div style="background: #F57DA7; border: 1px solid #F57DA7; padding-left: 10px; color: rgb(255, 255, 255); font-weight: bold; text-align: center;">タイトル</div>
<div style="border: 1.5px solid #F57DA7; padding: 10px;">
<div style="margin:0;">★★</div></div><p> </p>
<div style="border: 1.5px solid #F57DA7; padding: 10px;">
<div style="margin:0;">★★</div></div><p> </p>
カワイイ枠があると
心がぐっとトキメキますよね♡
ふわふわシリーズの囲み枠もあります♪
線やお申込みボタンはこちらからどうぞ♡
