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