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

注目

【人気】アメブロ収益UPセミナーはこちら⇒

この記事では「ふんわり・ぼかした素敵な囲み枠」を紹介します。

例えば、👇の素材ですね。

こんな感じのふんわり・ぼかした囲み枠のことですね。

ちなみに、当ブログの囲み枠は全てエンターで改行できちゃいます

女性向けサイトにピッタリな囲み枠を、コピペで簡単に設置できますよ。

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

あめっくま

ふんわりとした雰囲気で、優しくておしゃれなサイトを作りましょう！

自己紹介はこちら⇒

基本のふんわり・ぼかした囲み枠
角丸のふんわり・ぼかした囲み枠
幅が自動で変わるふんわり・ぼかし素材

この記事を書いた人

あめっくま

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

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

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

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

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

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

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

基本のふんわり・ぼかした囲み枠

ピンク色のふんわりぼかした囲み枠です。

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

オレンジ色のふんわりぼかした囲み枠です。

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

青色のふんわりぼかした囲み枠です。

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

水色のふんわりぼかした囲み枠です。

<div style="background: #e7f5fe; box-shadow: #e7f5fe 0 0 10px 10px; padding: 10px; margin: 10px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

緑色のふんわりぼかした囲み枠です。

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

赤色のふんわりぼかした囲み枠です。

<div style="background: #f7cfd2; box-shadow: #f7cfd2 0 0 10px 10px; padding: 10px; margin: 10px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

茶色のふんわりぼかした囲み枠です。

<div style="background: #f6d4bc; box-shadow: #f6d4bc 0 0 10px 10px; padding: 10px; margin: 10px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

ベージュ色のふんわりぼかした囲み枠です。

<div style="background: #f4f0e6; box-shadow: #f4f0e6 0 0 10px 10px; padding: 10px; margin: 10px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>

角丸のふんわり・ぼかした囲み枠

角丸＋ピンク色のふんわりぼかした囲み枠です。

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

角丸＋オレンジ色のふんわりぼかした囲み枠です。

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

角丸＋青色のふんわりぼかした囲み枠です。

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

角丸＋水色のふんわりぼかした囲み枠です。

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

角丸＋緑色のふんわりぼかした囲み枠です。

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

角丸＋赤色のふんわりぼかした囲み枠です。

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

角丸＋茶色のふんわりぼかした囲み枠です。

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

角丸＋ベージュ色のふんわりぼかした囲み枠です。

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

幅が自動で変わるふんわり・ぼかし素材

基本のタイプ

中身の文字の量によって、自動で幅が変わるタイプです。中央に配置しています。

ピンク色のふんわりぼかした囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #fbe4ee; box-shadow: #fbe4ee 0 0 10px 10px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

オレンジ色のふんわりぼかした囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #fee8c2; box-shadow: #fee8c2 0 0 10px 10px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

青色のふんわりぼかした囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #e0e7fa; box-shadow: #e0e7fa 0 0 10px 10px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

水色のふんわりぼかした囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #e7f5fe; box-shadow: #e7f5fe 0 0 10px 10px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

緑色のふんわりぼかした囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #d6efbe; box-shadow: #d6efbe 0 0 10px 10px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

赤色のふんわりぼかした囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #f7cfd2; box-shadow: #f7cfd2 0 0 10px 10px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

茶色のふんわりぼかした囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #f6d4bc; box-shadow: #f6d4bc 0 0 10px 10px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

ベージュ色のふんわりぼかした囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #f4f0e6; box-shadow: #f4f0e6 0 0 10px 10px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

角丸のタイプ

ピンク色のふんわりぼかした角丸囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #fbe4ee; box-shadow: #fbe4ee 0 0 10px 10px; border-radius: 15px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

オレンジ色のふんわりぼかした角丸囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #fee8c2; box-shadow: #fee8c2 0 0 10px 10px; border-radius: 15px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

青色のふんわりぼかした角丸囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #e0e7fa; box-shadow: #e0e7fa 0 0 10px 10px; border-radius: 15px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

水色のふんわりぼかした角丸囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #e7f5fe; box-shadow: #e7f5fe 0 0 10px 10px; border-radius: 15px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

緑色のふんわりぼかした角丸囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #d6efbe; box-shadow: #d6efbe 0 0 10px 10px; border-radius: 15px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

赤色のふんわりぼかした角丸囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #f7cfd2; box-shadow: #f7cfd2 0 0 10px 10px; border-radius: 15px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

茶色のふんわりぼかした角丸囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #f6d4bc; box-shadow: #f6d4bc 0 0 10px 10px; border-radius: 15px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

ベージュ色のふんわりぼかした角丸囲み枠です。

中身に書く文章の量で、幅が自動で決まります。

<div style="text-align: center;"><div style="display: inline-block; background: #f4f0e6; box-shadow: #f4f0e6 0 0 10px 10px; border-radius: 15px; padding: 10px; margin: 10px;">
<p style="text-align: left; margin: 0;">ここに文章</p></div></div>
<p> </p>

あめっくま

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

＼フォローバックしてます／

囲み枠の記事一覧