こんにちは
ヘッダー制作や魅力アップアドバイスをしています
はやみずしょうこです(*^^*)
女性らしく繊細なデザインが得意
世界観を表現するキャッチコピーが人気
♡自己紹介はこちら♡
ヘッダー制作や魅力アップアドバイスをしています
はやみずしょうこです(*^^*)
女性らしく繊細なデザインが得意
世界観を表現するキャッチコピーが人気
♡自己紹介はこちら♡
前回、好評でした
【簡単コピペ】おすすめ囲み枠・お申込みボタン・マーカーライン
第二弾♡
簡単コピペで使える
オリジナリティのある
可愛い囲み枠3選☆
ドット&フラッグ&付箋
です♡
それぞれ
タイプの違うカラーテーマで
作成しましたので
ぜひ
お気に入りを見つけてみてください(*^^*)
カジュアル可愛いドット柄
定番女子のガーリーピンク♡
ここにテキスト
改行はShift+Enter
改行はShift+Enter
☆このタグをコピペ
<div style="margin:20px auto;background: #ffd6d1;padding:0.5em 1em;background-image: radial-gradient(#feeeec 30%, transparent 0),radial-gradient(#feeeec 30%, transparent 0);background-size: 30px 30px;background-position: 0 0, 15px 15px;"> ここにテキスト<br />改行はShift+Enter</div>
・・・・・・・・・・・・
爽やかスッキリ♡
ここにテキスト
改行はShift+Enter
改行はShift+Enter
☆このタグをコピペ
<div style="margin:20px auto;background: #AFEEEE;padding:0.5em 1em;background-image: radial-gradient(#F5FFFA 30%, transparent 0),radial-gradient(#F5FFFA 30%, transparent 0);background-size: 30px 30px;background-position: 0 0, 15px 15px;"> ここにテキスト<br />改行はShift+Enter</div>
・・・・・・・・・・・・
上品でエレガント♡
ここにテキスト
改行はShift+Enter
改行はShift+Enter
☆このタグをコピペ
<div style="margin:20px auto;background: #F2E8DC;padding:0.5em 1em;background-image: radial-gradient(#FFFFFF 30%, transparent 0),radial-gradient(#FFFFFF 30%, transparent 0);background-size: 30px 30px;background-position: 0 0, 15px 15px;">ここにテキスト<br>
改行はShift+Enter</div>
改行はShift+Enter</div>
ここぞというときにフラッグ枠
ポイントになって使いやすい♡
★
ここにテキスト
改行はShift+Enter
改行はShift+Enter
<div style="position: relative; margin:20px auto;padding: 5px 15px 5px 55px;box-sizing: border-box;background: #FCEEEB;"><span style="display: inline-block;position: absolute;top: 0;left: 8px;width: 38px;height: 30px;text-align: center;color: #FFF;font-size: 18px;line-height: 30px;background: #ff3366;font-weight: 900;">★</span><span style="position: absolute;left: 8px;top: 30px;height: 0;width: 0;border-left: 19px solid #ff3366;border-right: 19px solid #ff3366;border-bottom: 10px solid transparent;"> </span>
<div style="position: relative;padding: 0;margin: 10px 0;z-index: 3;line-height: 1.7;">ここにテキスト<br>
改行はShift+Enter</div></div>
<div style="position: relative;padding: 0;margin: 10px 0;z-index: 3;line-height: 1.7;">ここにテキスト<br>
改行はShift+Enter</div></div>
・・・・・・・・・・・・
大人かっこいいモノトーン♡
★
ここにテキスト
改行はShift+Enter
改行はShift+Enter
☆このタグをコピペ
<div style="position: relative; margin:20px auto;padding: 5px 15px 5px 55px;box-sizing: border-box;background: #F0EFE8;"><span style="display: inline-block;position: absolute;top: 0;left: 8px;width: 38px;height: 30px;text-align: center;color: #FFF;font-size: 18px;line-height: 30px;background: #2A2A2A;font-weight: 900;">★</span><span style="position: absolute;left: 8px;top: 30px;height: 0;width: 0;border-left: 19px solid #2A2A2A;border-right: 19px solid #2A2A2A;border-bottom: 10px solid transparent;"> </span>
<div style="position: relative;padding: 0;margin: 10px 0;z-index: 3;line-height: 1.7;">ここにテキスト<br>
改行はShift+Enter</div></div>
<div style="position: relative;padding: 0;margin: 10px 0;z-index: 3;line-height: 1.7;">ここにテキスト<br>
改行はShift+Enter</div></div>
・・・・・・・・・・・・
明るく元気♡
★
ここにテキスト
改行はShift+Enter
改行はShift+Enter
☆このタグをコピペ
<div style="position: relative; margin:20px auto;padding: 5px 15px 5px 55px;box-sizing: border-box;background: #ffff66;"><span style="display: inline-block;position: absolute;top: 0;left: 8px;width: 38px;height: 30px;text-align: center;color: #FFF;font-size: 18px;line-height: 30px;background: #58CE91;font-weight: 900;">★</span><span style="position: absolute;left: 8px;top: 30px;height: 0;width: 0;border-left: 19px solid #58CE91;border-right: 19px solid #58CE91;border-bottom: 10px solid transparent;"> </span>
<div style="position: relative;padding: 0;margin: 10px 0;z-index: 3;line-height: 1.7;">ここにテキスト<br>
改行はShift+Enter</div></div>
<div style="position: relative;padding: 0;margin: 10px 0;z-index: 3;line-height: 1.7;">ここにテキスト<br>
改行はShift+Enter</div></div>
ピタッと☆人気の付箋風
やわらか桜色♡
タイトル
サブタイトル
ここに文字を入力
改行はShift+Enter
<div style="width: 260px;padding: 15px;margin: 2em auto;background: #FFE3E2;color: #000;box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform: rotate(2deg);word-break: break-all;">
<div style="width: 50%;height: 35px;margin: -25px auto 0;background: rgba(251, 234, 144, 0.5);transform: rotate(-3deg);opacity: 0.9;"> </div>
<p style="text-align: center;font-size: 1.3em!important;margin: 0;margin-top: 10px!important;">タイトル</p>
<p style="text-align: center;font-size: 0.7em!important;margin-bottom: 1em!important;">サブタイトル</p>
<p style="text-align: center;font-size: 0.9em;margin: 0;padding: 0;">ここに文字を入力<br>
改行はShift+Enter</p></div>
<div style="width: 50%;height: 35px;margin: -25px auto 0;background: rgba(251, 234, 144, 0.5);transform: rotate(-3deg);opacity: 0.9;"> </div>
<p style="text-align: center;font-size: 1.3em!important;margin: 0;margin-top: 10px!important;">タイトル</p>
<p style="text-align: center;font-size: 0.7em!important;margin-bottom: 1em!important;">サブタイトル</p>
<p style="text-align: center;font-size: 0.9em;margin: 0;padding: 0;">ここに文字を入力<br>
改行はShift+Enter</p></div>
・・・・・・・・・・・・
シックで落ち着いたアースカラー♡
タイトル
サブタイトル
ここに文字を入力
改行はShift+Enter
☆このタグをコピペ
<div style="width: 260px;padding: 15px;margin: 2em auto;background: #EEE8AA;color: #000;box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform: rotate(2deg);word-break: break-all;">
<div style="width: 50%;height: 35px;margin: -25px auto 0;background: #F9F6E8;transform: rotate(-3deg);opacity: 0.9;"> </div>
<p style="text-align: center;font-size: 1.3em!important;margin: 0;margin-top: 10px!important;">タイトル</p>
<p style="text-align: center;font-size: 0.7em!important;margin-bottom: 1em!important;">サブタイトル</p>
<p style="text-align: center;font-size: 0.9em;margin: 0;padding: 0;">ここに文字を入力<br>
改行はShift+Enter</p></div>
<div style="width: 50%;height: 35px;margin: -25px auto 0;background: #F9F6E8;transform: rotate(-3deg);opacity: 0.9;"> </div>
<p style="text-align: center;font-size: 1.3em!important;margin: 0;margin-top: 10px!important;">タイトル</p>
<p style="text-align: center;font-size: 0.7em!important;margin-bottom: 1em!important;">サブタイトル</p>
<p style="text-align: center;font-size: 0.9em;margin: 0;padding: 0;">ここに文字を入力<br>
改行はShift+Enter</p></div>
・・・・・・・・・・・・
パキっと目を惹く♡
タイトル
サブタイトル
ここに文字を入力
改行はShift+Enter
☆このタグをコピペ
<div style="width: 260px;padding: 15px;margin: 2em auto;background:#99ffcc;color: #000;box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform: rotate(2deg);word-break: break-all;">
<div style="width: 50%;height: 35px;margin: -25px auto 0;background: #F0FFFF;transform: rotate(-3deg);opacity: 0.9;"> </div>
<p style="text-align: center;font-size: 1.3em!important;margin: 0;margin-top: 10px!important;">タイトル</p>
<p style="text-align: center;font-size: 0.7em!important;margin-bottom: 1em!important;">サブタイトル</p>
<p style="text-align: center;font-size: 0.9em;margin: 0;padding: 0;">ここに文字を入力<br>
改行はShift+Enter</p></div>
<div style="width: 50%;height: 35px;margin: -25px auto 0;background: #F0FFFF;transform: rotate(-3deg);opacity: 0.9;"> </div>
<p style="text-align: center;font-size: 1.3em!important;margin: 0;margin-top: 10px!important;">タイトル</p>
<p style="text-align: center;font-size: 0.7em!important;margin-bottom: 1em!important;">サブタイトル</p>
<p style="text-align: center;font-size: 0.9em;margin: 0;padding: 0;">ここに文字を入力<br>
改行はShift+Enter</p></div>
可愛いと読まれる♡
今回は
オリジナリティを出せる
かわいいアメブロ囲み枠
をご紹介しました♡
どんなに素敵な記事を書いても
読んでもらえないと
もったいないですよね
だからこそ
囲み枠や色で
あなたのオリジナリティを表現して
魅力的なブログにしましょう♡
♜