【アメブロ向け囲み枠】かわいい・おしゃれな素材

人気のWebセミナー

アクセス・集客UP実践セミナーはこちら⇒
アクセス・集客UP方法が丸ごと分かる！

この記事では、アメブロで使える「かわいい・おしゃれな囲み枠」を紹介します。

コピペで簡単に設置できる素材を、たくさん用意しました。

なお、はじめての方はアメブロの囲み枠の作り方・設置方法を確認して下さいね。

（補足：素材の無断転載・再配布は禁止です）

あめっくま

記事のポイントや要点を囲って、読者の印象に残る記事を作りましょう！

自己紹介はこちら⇒

こちらも人気！

▶ アメブロ向けのシンプルな囲み枠

▶ アメブロ向けのふんわり・ぼかした囲み枠

▶ 【素敵に変身】アメブロのカスタマイズ方法まとめ

この記事を書いた人

あめっくま

• Amebaオンラインレッスン認定講師
• アメブロ収益UP講座を運営
• コンサル生300名以上が収益UPに成功

>> 提供サービスはこちら

>> あめっくまをフォロー

＼アメブロ20記事で5万PVの手法／

アメブロで資産記事を作る方法はこちら ⇒

＼ついに登場！アメトピ攻略法／

アメトピ攻略法はこちら ⇒

目次

1. 表題・タブ付き
2. かわいい囲み枠
3. おしゃれな囲み枠

表題・タブ付き 

各丸タブ付き

表題

ピンク色のタブ付きの囲み枠です

<div style="display: inline-block; background: #eb6ea5; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #ffffff; padding: 3px 15px 1px 15px; margin-bottom: 0;"><p style="margin: 0;">ここに表題</p></div>
<div style="border: 2px solid #eb6ea5; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

表題

オレンジ色のタブ付きの囲み枠です

<div style="display: inline-block; background: #fca60d; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #ffffff; padding: 3px 15px 1px 15px; margin-bottom: 0;"><p style="margin: 0;">ここに表題</p></div>
<div style="border: 2px solid #fca60d; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

表題

青色のタブ付きの囲み枠です

<div style="display: inline-block; background: #4169e1; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #ffffff; padding: 3px 15px 1px 15px; margin-bottom: 0;"><p style="margin: 0;">ここに表題</p></div>
<div style="border: 2px solid #4169e1; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

表題

緑色のタブ付きの囲み枠です

<div style="display: inline-block; background: #59a136; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #ffffff; padding: 3px 15px 1px 15px; margin-bottom: 0;"><p style="margin: 0;">ここに表題</p></div>
<div style="border: 2px solid #59a136; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

表題

ベージュ色のタブ付きの囲み枠です

<div style="display: inline-block; background: #d2b48c; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #ffffff; padding: 3px 15px 1px 15px; margin-bottom: 0;"><p style="margin: 0;">ここに表題</p></div>
<div style="border: 2px solid #d2b48c; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

内側タブ付き

表題

ピンク色の内側タブ付きの囲み枠です

<div style="border: 2px solid #eb6ea5;">
<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>&nbsp;</p>

表題

オレンジ色の内側タブ付きの囲み枠です

<div style="border: 2px solid #fca60d;">
<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>&nbsp;</p>

表題

青色の内側タブ付きの囲み枠です

<div style="border: 2px solid #4169e1;">
<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>&nbsp;</p>

表題

緑色の内側タブ付きの囲み枠です

<div style="border: 2px solid #59a136;">
<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>&nbsp;</p>

表題

ベージュ色の内側タブ付きの囲み枠です

<div style="border: 2px solid #d2b48c;">
<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>&nbsp;</p>

塗りつぶし＋内側タブ付き

表題

ピンク色の塗りつぶし＋内側タブ付きの囲み枠です

<div style="background: #fbe4ee;">
<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>&nbsp;</p>

表題

オレンジ色の塗りつぶし＋内側タブ付きの囲み枠です

<div style="background: #fee8c2;">
<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>&nbsp;</p>

表題

青色の塗りつぶし＋内側タブ付きの囲み枠です

<div style="background: #e0e7fa;">
<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>&nbsp;</p>

表題

緑色の塗りつぶし＋内側タブ付きの囲み枠です

<div style="background: #d6efbe;">
<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>&nbsp;</p>

表題

ベージュ色の塗りつぶし＋内側タブ付きの囲み枠です

<div style="background: #f2e9de;">
<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>&nbsp;</p>

大きな表題部分つきの囲み枠

表題

表題部分が横に広がったピンク色の囲み枠

<div style="border: 2px solid #eb6ea5; background: #ffffff;">
<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>&nbsp;</p>

表題

表題部分が横に広がったオレンジ色の囲み枠

<div style="border: 2px solid #fca60d; background: #ffffff;">
<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>&nbsp;</p>

表題

表題部分が横に広がった青色の囲み枠

<div style="border: 2px solid #4169e1; background: #ffffff;">
<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>&nbsp;</p>

表題

表題部分が横に広がった緑色の囲み枠

<div style="border: 2px solid #59a136; background: #ffffff;">
<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>&nbsp;</p>

表題

表題部分が横に広がったベージュ色の囲み枠

<div style="border: 2px solid #d2b48c; background: #ffffff;">
<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>&nbsp;</p>

大きな表題部分つきの塗りつぶし囲み枠

表題

表題部分が横に広がった塗りつぶしのピンク色囲み枠

<div style="background: #eb6ea5; color: #ffffff; padding: 3px 15px; margin-bottom: 0;"><p style="margin: 0;">ここに表題</p></div>
<div style="background: #fbe4ee; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

表題

表題部分が横に広がった塗りつぶしのオレンジ色囲み枠

<div style="background: #fca60d; color: #ffffff; padding: 3px 15px; margin-bottom: 0;"><p style="margin: 0;">ここに表題</p></div>
<div style="background: #fee8c2; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

表題

表題部分が横に広がった塗りつぶしの青色囲み枠

<div style="background: #4169e1; color: #ffffff; padding: 3px 15px; margin-bottom: 0;"><p style="margin: 0;">ここに表題</p></div>
<div style="background: #e0e7fa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

表題

表題部分が横に広がった塗りつぶしの緑色囲み枠

<div style="background: #59a136; color: #ffffff; padding: 3px 15px; margin-bottom: 0;"><p style="margin: 0;">ここに表題</p></div>
<div style="background: #d6efbe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

表題

表題部分が横に広がった塗りつぶしのベージュ色囲み枠

<div style="background: #d2b48c; color: #ffffff; padding: 3px 15px; margin-bottom: 0;"><p style="margin: 0;">ここに表題</p></div>
<div style="background: #f2e9de; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

表題部分が左上に入る囲み枠

表題

表題部分が左上に入るピンク色の囲み枠

<div style="position: relative; border: 2px solid #eb6ea5; padding: 20px 15px 15px 15px;">
<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>&nbsp;</p>

表題

表題部分が左上に入るオレンジ色の囲み枠

<div style="position: relative; border: 2px solid #fca60d; padding: 20px 15px 15px 15px;">
<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>&nbsp;</p>

表題

表題部分が左上に入る青色の囲み枠

<div style="position: relative; border: 2px solid #4169e1; padding: 20px 15px 15px 15px;">
<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>&nbsp;</p>

表題

表題部分が左上に入る緑色の囲み枠

<div style="position: relative; border: 2px solid #59a136; padding: 20px 15px 15px 15px;">
<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>&nbsp;</p>

表題

表題部分が左上に入るベージュ色の囲み枠

<div style="position: relative; border: 2px solid #d2b48c; padding: 20px 15px 15px 15px;">
<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>&nbsp;</p>

表題部分が左上に入る角丸の囲み枠

表題

表題部分が左上に入る角丸のピンク色囲み枠

<div style="position: relative; border: 2px solid #eb6ea5; border-radius: 7px; padding: 20px 15px 15px 15px;">
<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>&nbsp;</p>

表題

表題部分が左上に入る角丸のオレンジ色囲み枠

<div style="position: relative; border: 2px solid #fca60d; border-radius: 7px; padding: 20px 15px 15px 15px;">
<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>&nbsp;</p>

表題

表題部分が左上に入る角丸の青色囲み枠

<div style="position: relative; border: 2px solid #4169e1; border-radius: 7px; padding: 20px 15px 15px 15px;">
<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>&nbsp;</p>

表題

表題部分が左上に入る角丸の緑色囲み枠

<div style="position: relative; border: 2px solid #59a136; border-radius: 7px; padding: 20px 15px 15px 15px;">
<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>&nbsp;</p>

表題

表題部分が左上に入る角丸のベージュ色囲み枠

<div style="position: relative; border: 2px solid #d2b48c; border-radius: 7px; padding: 20px 15px 15px 15px;">
<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>&nbsp;</p>

かわいい囲み枠 

水玉模様

ピンク色の水玉模様の囲み枠です。

<div style="border: 2px solid #eb6ea5; background-color: #fbe4ee; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 12px 12px; background-size: 24px 24px; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

オレンジ色の水玉模様の囲み枠です。

<div style="border: 2px solid #fca60d; background-color: #fee8c2; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 12px 12px; background-size: 24px 24px; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

水色の水玉模様の囲み枠です。

<div style="border: 2px solid #87cefa; background-color: #e7f5fe; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 12px 12px; background-size: 24px 24px; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

緑色の水玉模様の囲み枠です。

<div style="border: 2px solid #59a136; background-color: #d6efbe; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 12px 12px; background-size: 24px 24px; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

ベージュ色の水玉模様の囲み枠です。

<div style="border: 2px solid #d2b48c; background-color: #f2e9de; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 12px 12px; background-size: 24px 24px; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

キルト風

ピンク色のキルト模様の囲み枠です。

<div style="border: 2px dashed #eb6ea5; background: #fbe4ee; border-radius: 10px; box-shadow:0px 0px 0px 10px #fbe4ee; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

オレンジ色のキルト模様の囲み枠です。

<div style="border: 2px dashed #fca60d; background: #fee8c2; border-radius: 10px; box-shadow:0px 0px 0px 10px #fee8c2; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

水色のキルト模様の囲み枠です。

<div style="border: 2px dashed #87cefa; background: #e7f5fe; border-radius: 10px; box-shadow:0px 0px 0px 10px #e7f5fe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

緑色のキルト模様の囲み枠です。

<div style="border: 2px dashed #59a136; background: #d6efbe; border-radius: 10px; box-shadow:0px 0px 0px 10px #d6efbe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

ベージュ色のキルト模様の囲み枠です。

<div style="border: 2px dashed #d2b48c; background: #f2e9de; border-radius: 10px; box-shadow:0px 0px 0px 10px #f2e9de; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

おしゃれな囲み枠 

ストライプ模様

ピンク色のストライプボックスです。

<div style="border: 2px solid #eb6ea5; background: repeating-linear-gradient(-45deg, #fbe4ee, #fbe4ee 3px, #fcedf4 3px, #fcedf4 7px); border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

オレンジ色のストライプボックスです。

<div style="border: 2px solid #fca60d; background: repeating-linear-gradient(-45deg, #fee8c2, #fee8c2 3px, #fef0d7 3px, #fef0d7 7px); border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

水色のストライプボックスです。

<div style="border: 2px solid #87cefa; background: repeating-linear-gradient(-45deg, #e7f5fe, #e7f5fe 3px, #f0f9fe 3px, #f0f9fe 7px); border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

緑色のストライプボックスです。

<div style="border: 2px solid #59a136; background: repeating-linear-gradient(-45deg, #d6efbe, #d6efbe 3px, #e0f3ce 3px, #e0f3ce 7px); border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

ベージュ色のストライプボックスです。

<div style="border: 2px solid #d2b48c; background: repeating-linear-gradient(-45deg, #f2e9de, #f2e9de 3px, #f8f3ed 3px, #f8f3ed 7px); border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

ストライプ枠線

ピンク色のストライプを枠線にしたボックスです。

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #eb6ea5 25%, #eb6ea5 50%, #ffffff 50%, #ffffff 75%, #eb6ea5 75%, #eb6ea5); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

オレンジ色のストライプを枠線にしたボックスです。

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #fca60d 25%, #fca60d 50%, #ffffff 50%, #ffffff 75%, #fca60d 75%, #fca60d); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

水色のストライプを枠線にしたボックスです。

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #87cefa 25%, #87cefa 50%, #ffffff 50%, #ffffff 75%, #87cefa 75%, #87cefa); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

緑色のストライプを枠線にしたボックスです。

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #59a136 25%, #59a136 50%, #ffffff 50%, #ffffff 75%, #59a136 75%, #59a136); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

ベージュ色のストライプを枠線にしたボックスです。

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #d2b48c 25%, #d2b48c 50%, #ffffff 50%, #ffffff 75%, #d2b48c 75%, #d2b48c); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

あめっくま

どんどん使ってくださいね！

囲み枠の記事一覧

▶ シンプルな囲み枠

▶ アメブロ向け吹き出し

▶ ふんわり・ぼかした囲み枠

▶ 付箋風の囲み枠

▶ 黒板風の囲み枠

▶ 囲み枠の作り方・設置方法