この記事では、アメブロで使える「かわいい・おしゃれな囲み枠」を紹介します。
コピペで簡単に設置できる素材を、たくさん用意しました。
なお、はじめての方はアメブロの囲み枠の作り方・設置方法を確認して下さいね。
(補足:素材の無断転載・再配布は禁止です)
表題・タブ付き
各丸タブ付き
<div style="border: 2px solid #eb6ea5; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
<div style="border: 2px solid #fca60d; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
<div style="border: 2px solid #4169e1; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
<div style="border: 2px solid #59a136; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
<div style="border: 2px solid #d2b48c; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
内側タブ付き
<div style="display: inline-block; background: #eb6ea5; color: #ffffff; padding: 1px 15px 3px 17px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
<div style="display: inline-block; background: #fca60d; color: #ffffff; padding: 1px 15px 3px 17px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
<div style="display: inline-block; background: #4169e1; color: #ffffff; padding: 1px 15px 3px 17px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
<div style="display: inline-block; background: #59a136; color: #ffffff; padding: 1px 15px 3px 17px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
<div style="display: inline-block; background: #d2b48c; color: #ffffff; padding: 1px 15px 3px 17px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
塗りつぶし+内側タブ付き
<div style="display: inline-block; background: #eb6ea5; color: #ffffff; padding: 3px 15px 3px 15px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
<div style="display: inline-block; background: #fca60d; color: #ffffff; padding: 3px 15px 3px 15px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
<div style="display: inline-block; background: #4169e1; color: #ffffff; padding: 3px 15px 3px 15px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
<div style="display: inline-block; background: #59a136; color: #ffffff; padding: 3px 15px 3px 15px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
<div style="display: inline-block; background: #d2b48c; color: #ffffff; padding: 3px 15px 3px 15px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
大きな表題部分つきの囲み枠
<div style="background: #eb6ea5; color: #ffffff; padding: 3px 15px 5px 15px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
<div style="background: #fca60d; color: #ffffff; padding: 3px 15px 5px 15px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
<div style="background: #4169e1; color: #ffffff; padding: 3px 15px 5px 15px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
<div style="background: #59a136; color: #ffffff; padding: 3px 15px 5px 15px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
<div style="background: #d2b48c; color: #ffffff; padding: 3px 15px 5px 15px;"><p style="margin: 0;">ここに表題</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
大きな表題部分つきの塗りつぶし囲み枠
<div style="background: #fbe4ee; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
<div style="background: #fee8c2; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
<div style="background: #e0e7fa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
<div style="background: #d6efbe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
<div style="background: #f2e9de; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
表題部分が左上に入る囲み枠
表題部分が左上に入るピンク色の囲み枠
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #eb6ea5; padding: 0 0.5em;"><p style="margin: 0;">ここに表題</p></div>
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
表題部分が左上に入るオレンジ色の囲み枠
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #fca60d; padding: 0 0.5em;"><p style="margin: 0;">ここに表題</p></div>
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
表題部分が左上に入る青色の囲み枠
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #4169e1; padding: 0 0.5em;"><p style="margin: 0;">ここに表題</p></div>
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
表題部分が左上に入る緑色の囲み枠
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #59a136; padding: 0 0.5em;"><p style="margin: 0;">ここに表題</p></div>
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
表題部分が左上に入るベージュ色の囲み枠
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #d2b48c; padding: 0 0.5em;"><p style="margin: 0;">ここに表題</p></div>
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
表題部分が左上に入る角丸の囲み枠
表題部分が左上に入る角丸のピンク色囲み枠
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #eb6ea5; padding: 0 0.5em;"><p style="margin: 0;">ここに表題</p></div>
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
表題部分が左上に入る角丸のオレンジ色囲み枠
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #fca60d; padding: 0 0.5em;"><p style="margin: 0;">ここに表題</p></div>
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
表題部分が左上に入る角丸の青色囲み枠
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #4169e1; padding: 0 0.5em;"><p style="margin: 0;">ここに表題</p></div>
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
表題部分が左上に入る角丸の緑色囲み枠
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #59a136; padding: 0 0.5em;"><p style="margin: 0;">ここに表題</p></div>
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
表題部分が左上に入る角丸のベージュ色囲み枠
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #d2b48c; padding: 0 0.5em;"><p style="margin: 0;">ここに表題</p></div>
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

かわいい囲み枠
水玉模様
ピンク色の水玉模様の囲み枠です。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
オレンジ色の水玉模様の囲み枠です。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
水色の水玉模様の囲み枠です。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
緑色の水玉模様の囲み枠です。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
ベージュ色の水玉模様の囲み枠です。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
キルト風
ピンク色のキルト模様の囲み枠です。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
オレンジ色のキルト模様の囲み枠です。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
水色のキルト模様の囲み枠です。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
緑色のキルト模様の囲み枠です。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
ベージュ色のキルト模様の囲み枠です。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

おしゃれな囲み枠
ストライプ模様
ピンク色のストライプボックスです。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
オレンジ色のストライプボックスです。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
水色のストライプボックスです。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
緑色のストライプボックスです。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
ベージュ色のストライプボックスです。
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
ストライプ枠線
ピンク色のストライプを枠線にしたボックスです。
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
オレンジ色のストライプを枠線にしたボックスです。
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
水色のストライプを枠線にしたボックスです。
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
緑色のストライプを枠線にしたボックスです。
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
ベージュ色のストライプを枠線にしたボックスです。
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p> </p>
「うまくできない」など困った方は、記事下のコメント欄から遠慮なく質問して下さいね。
\ フォローバック・いいねしてます /
収益・集客UPのテクニック集

