コピペで使えるアメブロの囲み枠線のサンプル一覧
直線の囲み枠線
ここに本文を入力する。
改行はShift+Enter
改行はShift+Enter
■このタグをコピペする
<div style="background:#fff; padding:10px; border:2px solid #ffdbff;">ここに本文を入力する。<br />改行はShift+Enter</div>
角丸の囲み枠線
ここに本文を入力する。
改行はShift+Enter
改行はShift+Enter
改行はShift+Enter
■このタグをコピペする
<div style="padding: 10px; border: 2px solid #eddbff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
点線の囲み枠線
ここに本文を入力する。
改行はShift+Enter
■このタグをコピペする
<div style="background:#fff; padding:10px; border:2px dashed #ffdbdb;">ここに本文を入力する。<br />改行はShift+Enter</div>
改行はShift+Enter
改行はShift+Enter
水玉の囲み枠線
ここに本文を入力する。
改行はShift+Enter
■このタグをコピペする
<div style="background:#fff; padding:10px; border:3px dotted #ff0000;">ここに本文を入力する。<br />改行はShift+Enter</div>
二重の囲み枠線
ここに本文を入力する。
改行はShift+Enter
■このタグをコピペする
<div style="background:#fff; padding:10px; border:3px double#99ffff;">ここに本文を入力する。<br />改行はShift+Enter</div>
中が塗りつぶされてる四角い囲み枠線
ここに本文を入力する。
改行はShift+Enter
■このタグをコピペする
<div style="background:#ffd6ea; padding:10px; border:none;">ここに本文を入力する。 <br />改行はShift+Enter</div>
中が塗りつぶされてる角丸の囲み枠線
ここに本文を入力する。
改行はShift+Enter
■このタグをコピペする
<div style="background: #ffeaff; padding: 10px; border: none; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
見出し付きの囲み枠線
■ここにタイトルを入力する
ここに本文を入力する。
改行はShift+Enter
■このタグをコピペする
<div style="background: #ff7fbf; border: 1px solid #ff7fbf; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">■ここにタイトルを入力する</span></div><div style="border: 1px solid #ff7fbf; padding: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>
タイトルがはみ出てる直線の囲み枠線
■このタグをコピペする
<fieldset style="border:2px solid #ff6699;"><legend><span style="font-weight:bold;">■ここにタイトルを入力する</span> </legend> ここに本文を入力する。<br />改行はShift+Enter</fieldset>
タイトルがはみ出てる二重の囲み枠線
■このタグをコピペする
<fieldset style="border:3px double #ff6699;"><legend><span style="font-weight:bold;">■ここにタイトルを入力する</span> </legend>ここに本文を入力する。<br />改行はShift+Enter</fieldset>
シンプルな影付きの囲み枠線
ここに本文を入力する。
改行はShift+Enter
■このタグをコピペする
<div style="border: 1px #dcdcdc solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>
グラデーションと影付きで立体的な囲み枠線（角丸）
ここに本文を入力する。
改行はShift+Enter
■このタグをコピペする
<div style="background-image:linear-gradient(#ffd6ea,#ffe0ef,#ffeff7,#ffe0ef,#ffd6ea);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>
※グラデーションと影はつけすぎるとダサくなってしまいますので、あくまでさりげなくがポイントです！
ポイント付きの付箋風オシャレ囲み枠線
ここに本文を入力する。
改行はShift+Enter
■このタグをコピペする
<div style="border: #ffb2d8 solid 1px; border-left: #ffb2d8 solid 13px; padding: 10px; background: #fffff9; ">
ここに本文を入力する。<br>
改行はShift+Enter</div>
スマホアプリで囲み枠線を使う方法を解説
スマホアプリで囲み枠を使うと改行がきちんとできないというコメントをいただきましたので、スマホでの使い方を説明させていただきますね！
スマホで改行すると段々になってしまうってきっとこの状態のことですよね！？
（スマホで囲み枠を使い、改行したら段々になった状態
）
スマホでも綺麗に改行できる方法をお伝えさせていただきますね！
①使いたい囲み枠線のタグをコピーする。
↓
②HTML編集にしてペタッと貼り付け。
ここからがポイント！
PCで入力する時は、通常表示に戻すのですがスマホの場合はHTML表示のままで！！
改行して入れたい文章を入力していきます。
そしてさらにここがポイント！
HTML編集で改行しても、改行はされません。
改行したいところで<br>といれましょう。
<br>=改行です。
<br>タグをいれるのを忘れると、改行したはずのところが半角スペースが空いて繋がっているはずです。笑
【残念な例
】
（<br>タグを入れないと・・・。）
↓
（こうなります・・・。笑）
囲み枠線のタグの解説
タグを理解して自分の好きなデザインに応用しよう♪
<div style="background:#fff; padding:10px; border:2px solid #ffdbff;">ここに本文を入力する。<br />改行はShift+Enter</div>
background：背景色
padding：枠と文字の間の隙間の幅
border：線の太さ、種類、色を指定
・線の種類
→solid…直線／double…二重線／dashed…破線／dotted…水玉線
#fff、#ffdbffなどは色になります。
色を変更したい場合は、こちらのサイトを参考にしてください。
原色大辞典
http://www.colordic.org/
ポイント
”;”で閉じるのを忘れないようにしましょう。
タグは1文字でも消えてしまうときちんと表示されなくなってしまうので、気をつけてくださいね。