【アメブロ向けシンプルな囲み枠】囲み線・点線・二重線・角丸・影つき

この記事では、アメブロで使える「シンプルな囲み枠」を紹介します。

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

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

あめっくま

記事の要点を入れて読者の印象に残したり、宣伝を目立たせるためにも使えますね。

自己紹介はこちら⇒

この記事を書いた人

あめっくま

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

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

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

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

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

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

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

枠線・点線・二重線の囲み枠
塗りつぶしの囲み枠
角丸の囲み枠
影つきの囲み枠
角丸＋影つきの囲み枠

枠線・点線・二重線・角丸の囲み枠

シンプルな枠線

ピンク色のシンプルな枠線です。

<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="border: 2px dotted #eb6ea5; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

オレンジ色ドット線の囲み枠です

<div style="border: 2px dotted #fca60d; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

青色ドット線の囲み枠です

<div style="border: 2px dotted #4169e1; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色ドット線の囲み枠です

<div style="border: 2px dotted #59a136; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色ドット線の囲み枠です

<div style="border: 2px dotted #d2b48c; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

シンプルな二重線

ピンク色二重線の囲み枠です

<div style="border: 3px double #eb6ea5; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

オレンジ色二重線の囲み枠です

<div style="border: 3px double #fca60d; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

青色二重線の囲み枠です

<div style="border: 3px double #4169e1; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色二重線の囲み枠です

<div style="border: 3px double #59a136; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色二重線の囲み枠です

<div style="border: 3px double #d2b48c; padding: 15px;">
<p style="margin: 0;">ここに文章</p></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="border: 1px solid #eb6ea5; background: #fbe4ee; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

オレンジ色の枠線と塗りつぶしの囲み枠です

<div style="border: 1px solid #fca60d; background: #fee8c2; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

青色の枠線と塗りつぶしの囲み枠です

<div style="border: 1px solid #4169e1; background: #e0e7fa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色の枠線と塗りつぶしの囲み枠です

<div style="border: 1px solid #59a136; background: #d6efbe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色の枠線と塗りつぶしの囲み枠です

<div style="border: 1px solid #d2b48c; background: #f2e9de; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

2重線＋塗りつぶし

ピンク色の2重線と塗りつぶしの囲み枠です

<div style="border: 3px double #eb6ea5; background: #fbe4ee; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

オレンジ色の2重線と塗りつぶしの囲み枠です

<div style="border: 3px double #fca60d; background: #fee8c2; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

青色の2重線と塗りつぶしの囲み枠です

<div style="border: 3px double #4169e1; background: #e0e7fa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色の2重線と塗りつぶしの囲み枠です

<div style="border: 3px double #59a136; background: #d6efbe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色の2重線と塗りつぶしの囲み枠です

<div style="border: 3px double #d2b48c; background: #f2e9de; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

角丸の囲み枠

角丸の枠線

ピンク色の角丸囲み枠です

<div style="border: 2px solid #eb6ea5; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

オレンジ色の角丸囲み枠です

<div style="border: 2px solid #fca60d; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

青色の角丸囲み枠です

<div style="border: 2px solid #4169e1; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色の角丸囲み枠です

<div style="border: 2px solid #59a136; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色の角丸囲み枠です

<div style="border: 2px solid #d2b48c; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

角丸＋塗りつぶし

ピンク色の塗りつぶし＋角丸囲み枠です

<div style="background: #fbe4ee; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

オレンジ色の塗りつぶし＋角丸囲み枠です

<div style="background: #fee8c2; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

青色の塗りつぶし＋角丸囲み枠です

<div style="background: #e0e7fa; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色の塗りつぶし＋角丸囲み枠です

<div style="background: #d6efbe; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色の塗りつぶし＋角丸囲み枠です

<div style="background: #f2e9de; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

角丸＋枠線＋塗りつぶし

ピンク色の枠線で囲った塗りつぶしを角丸にしました

<div style="border: 1px solid #eb6ea5; background: #fbe4ee; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

オレンジ色の枠線で囲った塗りつぶしを角丸にしました

<div style="border: 1px solid #fca60d; background: #fee8c2; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

青色の枠線で囲った塗りつぶしを角丸にしました

<div style="border: 1px solid #4169e1; background: #e0e7fa; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色の枠線で囲った塗りつぶしを角丸にしました

<div style="border: 1px solid #59a136; background: #d6efbe; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色の枠線で囲った塗りつぶしを角丸にしました

<div style="border: 1px solid #d2b48c; background: #f2e9de; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

角丸＋2重線＋塗りつぶし

ピンク色の2重線で囲った塗りつぶしを角丸にしました

<div style="border: 3px double #eb6ea5; background: #fbe4ee; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

オレンジ色の2重線で囲った塗りつぶしを角丸にしました

<div style="border: 3px double #fca60d; background: #fee8c2; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

青色の2重線で囲った塗りつぶしを角丸にしました

<div style="border: 3px double #4169e1; background: #e0e7fa; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色の2重線で囲った塗りつぶしを角丸にしました

<div style="border: 3px double #59a136; background: #d6efbe; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色の2重線で囲った塗りつぶしを角丸にしました

<div style="border: 3px double #d2b48c; background: #f2e9de; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

影つきの囲み枠

影付きの枠線

ピンク色枠線の囲み枠に影をつけました

<div style="border: 2px solid #eb6ea5; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

オレンジ色枠線の囲み枠に影をつけました

<div style="border: 2px solid #fca60d; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

青色枠線の囲み枠に影をつけました

<div style="border: 2px solid #4169e1; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色枠線の囲み枠に影をつけました

<div style="border: 2px solid #59a136; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色枠線の囲み枠に影をつけました

<div style="border: 2px solid #d2b48c; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

影付き＋2重線の枠線

ピンク色2重線の囲み枠に影をつけました

<div style="border: 3px double #eb6ea5; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

オレンジ色2重線の囲み枠に影をつけました

<div style="border: 3px double #fca60d; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

青色2重線の囲み枠に影をつけました

<div style="border: 3px double #4169e1; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色2重線の囲み枠に影をつけました

<div style="border: 3px double #59a136; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色2重線の囲み枠に影をつけました

<div style="border: 3px double #d2b48c; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

影付き＋塗りつぶし

うすいピンク色で塗りつぶした影付き囲み枠です

<div style="background: #fbe4ee; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

うすいオレンジ色で塗りつぶした影付き囲み枠です

<div style="background: #fee8c2; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

うすい青色で塗りつぶした影付き囲み枠です

<div style="background: #e0e7fa; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

うすい緑色で塗りつぶした影付き囲み枠です

<div style="background: #d6efbe; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

うすいベージュ色で塗りつぶした影付き囲み枠です

<div style="background: #f2e9de; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

枠線＋塗りつぶし＋影つき

ピンク色枠線＋塗りつぶしの囲み枠に影をつけました

<div style="border: 1px solid #eb6ea5; background: #fbe4ee; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

オレンジ色枠線＋塗りつぶしの囲み枠に影をつけました

<div style="border: 1px solid #fca60d; background: #fee8c2; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

青色枠線＋塗りつぶしの囲み枠に影をつけました

<div style="border: 1px solid #4169e1; background: #e0e7fa; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色枠線＋塗りつぶしの囲み枠に影をつけました

<div style="border: 1px solid #59a136; background: #d6efbe; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色枠線＋塗りつぶしの囲み枠に影をつけました

<div style="border: 1px solid #d2b48c; background: #f2e9de; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

角丸＋影つきの囲み枠

角丸＋影付きの枠線

ピンク色の角丸＋影付き囲み枠です

<div style="border: 2px solid #eb6ea5; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

オレンジ色の角丸＋影付き囲み枠です

<div style="border: 2px solid #fca60d; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

青色の角丸＋影付き囲み枠です

<div style="border: 2px solid #4169e1; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色の角丸＋影付き囲み枠です

<div style="border: 2px solid #59a136; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色の角丸＋影付き囲み枠です

<div style="border: 2px solid #d2b48c; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

角丸＋影付き＋塗りつぶし

ピンク色の塗りつぶし＋角丸影付き囲み枠です

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

オレンジ色の塗りつぶし＋角丸影付き囲み枠です

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

青色の塗りつぶし＋角丸影付き囲み枠です

<div style="background: #e0e7fa; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色の塗りつぶし＋角丸影付き囲み枠です

<div style="background: #d6efbe; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色の塗りつぶし＋角丸影付き囲み枠です

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

角丸＋影つき＋枠線＋塗りつぶし

ピンク色の枠線で囲った塗りつぶしを角丸影つきにしました

<div style="border: 1px solid #eb6ea5; background: #fbe4ee; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

オレンジ色の枠線で囲った塗りつぶしを角丸影つきにしました

<div style="border: 1px solid #fca60d; background: #fee8c2; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

青色の枠線で囲った塗りつぶしを角丸影つきにしました

<div style="border: 1px solid #4169e1; background: #e0e7fa; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色の枠線で囲った塗りつぶしを角丸影つきにしました

<div style="border: 1px solid #59a136; background: #d6efbe; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色の枠線で囲った塗りつぶしを角丸影つきにしました

<div style="border: 1px solid #d2b48c; background: #f2e9de; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

角丸＋影つき＋2重線＋塗りつぶし

ピンク色の2重線で囲った塗りつぶしを角丸影つきにしました

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

オレンジ色の2重線で囲った塗りつぶしを角丸影つきにしました

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

青色の2重線で囲った塗りつぶしを角丸影つきにしました

<div style="border: 3px double #4169e1; background: #e0e7fa; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色の2重線で囲った塗りつぶしを角丸影つきにしました

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

ベージュ色の2重線で囲った塗りつぶしを角丸影つきにしました

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

あめっくま

記事の要点などを入れて、読者に分かりやすく伝えましょうね。