アメブロ向けかわいい囲み枠

 

 

 

 

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

 

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

 

 

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

 

(補足:素材の無断転載・再配布は禁止です)

 

あめっくま
 

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

自己紹介はこちら⇒

 

 

 

 

 

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

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

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

 

 

 

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

ついに登場!アメトピ攻略法

 

 

 

 

 

 

表題・タブ付き 

 

各丸タブ付き

表題
ピンク色のタブ付きの囲み枠です
<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>

 

 

あめっくま
 

「うまくできない」など困った方は、記事下のコメント欄から遠慮なく質問して下さいね。

 

 

\ フォローバックしてます /

フォローしてね

 

 

 

 

 

おすすめコンテンツ


コンサルティングメニュー

高単価メニュー販売実践講座
 ⇒高単価メニューを売りたい人向けに、長期間完全マンツーマンサポート!

ビジネスブログ収益UPサポート
 ⇒ビジネスブログの改善アドバイスをチャットで受け放題!

実施中のWebセミナー

アクセス・集客UP実践セミナー
 ⇒アクセス・集客UP方法を実際の画面で紹介!

売れる告知記事作成セミナー
 ⇒読者が申し込みたくなる告知記事作成テクニックを紹介!

Canva活用・収益UPレッスン
 ⇒Canvaの使い方~収益UPノウハウまで紹介!

「アメブロ収益UP講座」の一覧はこちら⇒


公式note


お問い合わせ・お仕事依頼

お問い合わせ・お仕事依頼はこちら⇒