アメブロ 可愛い囲み線 シンプル囲み線 で囲む方法です
キレイデザイン学・パソコンインストラクター
色の専門家のかなわひろみです
今回は、ルビー色 です。
ルビー 色の持つ意味は、カリスマ性を高める起業家さん
ルビーは、「宝石の女王」
女性を華やかに、アクティブに彩ってくれます。
アメブロで使うことができる枠線について
【アメブロ編】
作り方は最後にあります
最後までみてください
様々な色のデザインをご用意しています。
①二重の囲み枠線
タグ
（コピペして使用してください）
↓
<fieldset style="border:3px double #c70067;"><legend><span style="font-weight:bold;">■タイトル</span> </legend>本文を入力してください。<br>
改行はShift+Enter</fieldset>
②付箋風オシャレ囲み枠線
タグ
（コピペして使用してください）
↓
<div style="border: #c70067 solid 1px; border-left: #c70067 solid 13px; padding: 10px; background: #fffff9; ">■</div>
③ステッチ型囲み枠線
タグ
（コピペして使用してください）
↓
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px 5px;padding:10px;color:#fffacd;background:#c70067;box-shadow:0 0 0 5px #c70067;border:dashed 2px#fffafa;"><span style="color:#ffffff;"><span style="font-weight:bold;">■</span></span></div>
④ぼかし枠線
タグ
（コピペして使用してください）
↓
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="border:0 none;padding:15px;margin:15px 8px;box-shadow:0 0 5px 3px#c70067,0 0 5px 2px #c70067 inset;border-radius:10px;background#c70067;">■</div>
⑤井方囲み枠
タグ
（コピペして使用してください）
↓
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px auto;padding:20px;background-size:2px 2px;background-position:9px 0,0 9px,right 9px top 0,left 0 bottom 9px;background-repeat:repeat-y,repeat-x,repeat-y,repeat-x;background-image:linear-gradient(#c06,#c06),linear-gradient(#c06,#c06),linear-gradient(#c06,#c06),linear-gradient(#c06,#c06);"><img alt="ジュエリーハート" data-ameba-id="nailland002" data-id="3813338" draggable="false" height="16" src="https://emoji.ameba.jp/img/user/na/nailland002/3813338.gif" width="16"><span style="color:#ff7fbe;"><span style="font-size:1.4em;">%TEXT% </span></span></div>
⑥カッコの枠線
タグ
（コピペして使用してください）
↓
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px 10px;padding:10px 20px;border-radius:20px/50%;border-style:solid;border-width:0 3px;border-color:#c70067">■</div>
⑦四角
直線
タグ
（コピペして使用してください）
↓
<div style="background:#fff; padding:10px; border:2px solid #c70067;">◆</div>
直線（太線）
タグ
（コピペして使用してください）
↓
<div style="border: 5px solid #c70067; padding: 10px;">本文を入れる</div>
点線
タグ
（コピペして使用してください）
↓
<div style="background:#fff; padding:10px; border:2px dotted #c70067;">本文</div>
破線
タグ
（コピペして使用してください）
↓
<div style="background:#fff; padding:10px; border:2px dashed #c70067;">本文</div>
⑧角丸四角形
直線
タグ
（コピペして使用してください）
↓
<div style="background:#FFFFFF; padding:10px; border-radius: 10px; border: 2px solid #c70067;">◆</div>
点線
タグ
（コピペして使用してください）
↓
<div style="background:#FFFFFF; padding:10px; border-radius: 10px; border: 2px dotted #c70067;">◆</div>
破線
タグ
（コピペして使用してください）
↓
<div style="background:#FFFFFF; padding:10px; border-radius: 10px; border: 2px dashed #c70067;">◆</div>
⑨二重枠線角丸
直線
タグ
（コピペして使用してください）
↓
<div style="padding:10px;border-radius: 10px; border: 5px double #c70067;">◆</div>
⑩塗りつぶし角丸四角形
タグ
（コピペして使用してください）
↓
<div style="background: #c70067; padding: 10px; border: none; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;"><span style="color:#ffffff;">◆</span></div>
⑪見出し付き枠1
タグ
（コピペして使用してください）
↓
<div style="background: #c70067; border: 1px solid #c70067; padding-left: 10px;"><span style="color:#ffffff;"><span style="font-weight: bold;">■タイトル</span></span></div>
<div style="border: 1px solid #c70067; padding: 10px;">本文</div>
⑫見出し付き枠2
■タイトル
タグ
（コピペして使用してください）
↓
<p><span style="color:#000000;"><font style="padding:6px 10px; background: #c70067; color:#ffffff; font-weight:bold;">■タイトル</font></span></p>
<div style="border:1px solid #c70067; padding:10px; font-size:0.9em; margin-top:2px;"><span style="color:#000000;">本文</span></div>
⑬角丸の水色二重線（影つき）
タイトル
本文１
本文２
本文３
タグ
（コピペして使用してください）
↓
<div style="border: #c70067 3px double; padding: 6px; background-color: #ffffff; margin: 5px; color: #c70067; border-radius: 10px; box-shadow: 5px 5px 5px #AAAAAA"><p><span style="color:#000000;"><strong>タイトル</strong></span></p><p>span style="color:#000000;">本文１<br>本文２<br>本文３</span></p></div>
⑭グラデーション枠
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #ffcce5; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>改行はShift+Enter</div>
⑮はみ出しタイトル枠線
タグ
（コピペして使用してください）
↓
<fieldset style="border:2px solid #c70067;"><legend><span style="font-weight:bold;">■ここにタイトルを入力する</span> </legend> ここに本文を入力する。<br />改行はShift+Enter</fieldset>
⑯ ワッペン囲み枠①
タグ
（コピペして使用してください）
↓
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 10px 5px; padding: 15px; word-break: break-all; box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 2px; background: url("https://stat.ameba.jp/user_images/20181118/19/12color-happylife/93/4d/j/o0640048814305469794.jpg"); border-radius: 10px;">
<div style="background: rgba(255, 255, 255, 0.85); padding: 5px; border-radius: 5px;">
<div style="border: 2px dashed rgb(199, 0, 103); border-radius: 5px; padding: 10px;"><span style="font-size:1.4em;"><font color="#333333"><img alt="ルビー" data-ameba-id="marl-dear" data-id="330775" draggable="false" height="16" src="https://emoji.ameba.jp/img/user/ma/marl-dear/330775.gif" width="16"></font></span></div></div></div>
②
囲み枠
タグ
（コピペして使用してください）
↓
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(https://stat.ameba.jp/user_images/20181118/19/12color-happylife/ca/27/j/o1600120014305470750.jpg
);border-radius:10px;">
<div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;">
<div style="border:2px dashed #c70067;border-radius:5px;padding:10px"><img alt="ルビー" data-ameba-id="kr-kr-2" data-id="3728939" draggable="false" height="16" src="https://emoji.ameba.jp/img/user/kr/kr-kr-2/3728939.gif" width="16"><span style="font-size:1.4em;">囲み枠</span></div></div></div>
他の人とひと味違った枠線を手に入れて、素敵なブログを作りませんか
特別にご用意した枠線をプレゼント致します
お申し込みはこちらから
ト致します■
ジャンプしない場合は、こちらからどうぞ
https://www.reservestock.jp/subscribe/94628◇お問い合わせがございましたら、ご連絡ください。
（カラー診断の受付・お問い合わせも行います
）
①HTML表示にしましょう
②ソースを入れましょう
③通常表示に戻しましょう
④出来上がり（必ず、表示が正しいか確認してください）
メリハリ有るブログって素敵!！
可愛く作ってくださいね(*^_^*)