お好きな囲み枠を選んで「コピー」ボタンを押してください。
コピーしたコードをアメブロの記事編集画面の「HTML表示」に貼り付けて使えます。
ふわっとした囲み枠
ここに文章を入力してください。
<div style="display:inline-block; background:#E8F8FA; box-shadow:#E8F8FA 0 0 5px 5px; padding:15px;">ここに文章を入力してください。</div>ここに文章を入力してください。
<div style="display:inline-block; background:#D2E9D5; box-shadow:#D2E9D5 0 0 5px 5px; padding:15px;">ここに文章を入力してください。</div>タイトルボックス囲み枠
ここにタイトル
ここに文章を入力してください。
<div style="padding:10px 18px; background:#B0E0E6; border-radius:10px 10px 0 0;"><span style="font-weight:bold; color:#ffffff;">ここにタイトル</span></div>
<div style="border:2px solid #B0E0E6; padding:15px; border-radius:0 0 10px 10px;">ここに文章を入力してください。</div>ここにタイトル
ここに文章を入力してください。
<div style="padding:10px 18px; background:#C1D7A2; border-radius:10px 10px 0 0;"><span style="font-weight:bold; color:#ffffff;">ここにタイトル</span></div>
<div style="border:2px solid #C1D7A2; padding:15px; border-radius:0 0 10px 10px;">ここに文章を入力してください。</div>タイトルラベル囲み枠
ここにタイトル
ここに文章を入力してください。
<div style="display:inline-block; padding:10px 18px; background:#B0E0E6; border-radius:10px 10px 0 0;"><span style="font-weight:bold; color:#ffffff;">ここにタイトル</span></div>
<div style="border:2px solid #B0E0E6; padding:15px; border-radius:0 10px 10px 10px;">ここに文章を入力してください。</div>ここにタイトル
ここに文章を入力してください。
<div style="display:inline-block; padding:10px 18px; background:#C1D7A2; border-radius:10px 10px 0 0;"><span style="font-weight:bold; color:#ffffff;">ここにタイトル</span></div>
<div style="border:2px solid #C1D7A2; padding:15px; border-radius:0 10px 10px 10px;">ここに文章を入力してください。</div>シンプルなタイトル付き囲み枠
<fieldset style="border:2px solid #B0E0E6; padding:15px;"><legend> ここにタイトル </legend>ここに文章を入力してください。</fieldset><fieldset style="border:2px solid #C1D7A2; padding:15px;"><legend> ここにタイトル </legend>ここに文章を入力してください。</fieldset>シンプル囲み枠
ここに文章を入力してください。
<div style="border:2px solid #B0E0E6; padding:15px;">ここに文章を入力してください。</div>ここに文章を入力してください。
<div style="border:2px solid #C1D7A2; padding:15px;">ここに文章を入力してください。</div>見出し風囲み枠
ここに見出し
<div style="padding:10px;background:#B0E0E6;color:#fff;margin-bottom:0px; border-radius:5px; font-weight:bold;">ここに見出し</div> <div style="width:0px;height:0px;border-style: solid;border-width: 10px 10px 0 10px;border-color: #B0E0E6 transparent transparent transparent;margin-left:30px;margin-bottom:20px;"> </div>ここに見出し
<div style="padding:10px;background:#C1D7A2;color:#fff;margin-bottom:0px; border-radius:5px; font-weight:bold;">ここに見出し</div> <div style="width:0px;height:0px;border-style: solid;border-width: 10px 10px 0 10px;border-color: #C1D7A2 transparent transparent transparent;margin-left:30px;margin-bottom:20px;"> </div>ここに見出し
<div style="border-left: 8px solid #B0E0E6; padding: 8px; font-weight:bold;">ここに見出し</div>ここに見出し
<div style="border-left: 8px solid #C1D7A2; padding: 8px; font-weight:bold;">ここに見出し</div>ここに見出し
<div style="border-left: 12px solid #B0E0E6; border-bottom: 2px solid #B0E0E6; padding: 8px; font-weight:bold;">ここに見出し</div>ここに見出し
<div style="border-left: 12px solid #C1D7A2; border-bottom: 2px solid #C1D7A2; padding: 8px; font-weight:bold;">ここに見出し</div>ここに見出し
<div style="border: #B0E0E6 solid 2px; border-left: #B0E0E6 solid 10px; padding: 8px; font-weight:bold;">ここに見出し</div>ここに見出し
<div style="border: #C1D7A2 solid 2px; border-left: #C1D7A2 solid 10px; padding: 8px; font-weight:bold;">ここに見出し</div>ここに見出し
<div style="border: #B0E0E6 solid 2px; border-left: #B0E0E6 solid 10px; border-right: #B0E0E6 solid 10px; padding: 8px; font-weight:bold;">ここに見出し</div>ここに見出し
<div style="border: #C1D7A2 solid 2px; border-left: #C1D7A2 solid 10px; border-right: #C1D7A2 solid 10px; padding: 8px; font-weight:bold;">ここに見出し</div>ここに見出し
<div style="border-top: #B0E0E6 solid 2px; border-bottom: #B0E0E6 solid 2px; padding: 8px; font-weight:bold;">ここに見出し</div>ここに見出し
<div style="border-top: #C1D7A2 solid 2px; border-bottom: #C1D7A2 solid 2px; padding: 8px; font-weight:bold;">ここに見出し</div>