グラデーション背景の囲み枠。
写真ではないので長めになっても
キレイなグラデーションのまま伸びていきます。
  • シンプル背景
  • 角丸背景
  • 影つき背景
  • 影つき角丸背景
    があります。
背景の透け具合
お好みで調整してくださいね。
 
 
グラデーション背景
 
見出し用

 

<div style="padding: 8px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);"><span style="font-weight:bold;">ここに見出し</span></div>

 

 

本文はここに入力してください。
改行はShift+Enterで!


 

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);"><div style="background:rgba(255,255,255,0.8);padding:20px;">本文はここに入力してください。改行はShift+Enterで! </div></div>

 

 

本文はここに入力してください。 
改行はShift+Enterで!

 

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #FFDED0;padding:20px;">本文はここに入力してください。改行はShift+Enterで! </div></div></div>

 

 

本文はここに入力してください。 
改行はShift+Enterで!

 

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #DFC69B;padding:20px;">本文はここに入力してください。改行はShift+Enterで! </div></div></div>

 

 

角丸グラデーション背景

 

本文はここに入力してください。 
改行はShift+Enterで!


 

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:20px;">本文はここに入力してください。改行はShift+Enterで! </div></div>

 

 

本文はここに入力してください。 
改行はShift+Enterで!

 

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #FFDED0;padding:20px;">本文はここに入力してください。改行はShift+Enterで! </div></div></div>

 

 

本文はここに入力してください。 
改行はShift+Enterで!


 

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #DFC69B;padding:20px;">本文はここに入力してください。改行はShift+Enterで! </div></div></div>

 

 

影つきグラデーション背景

 

本文はここに入力してください。 
改行はShift+Enterで!


 

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.8);padding:20px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

本文はここに入力してください。 
改行はShift+Enterで!


 

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #FFDED0;padding:20px;">本文はここに入力してください。改行はShift+Enterで!</div></div></div>

 

 

本文はここに入力してください。 
改行はShift+Enterで!


 

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #DFC69B;padding:20px;">本文はここに入力してください。改行はShift+Enterで!</div></div></div>

 

 

影つき角丸グラデーション背景

 

本文はここに入力してください。 
改行はShift+Enterで!


 

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

本文はここに入力してください。 
改行はShift+Enterで!


 

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:5px;border-radius:5px;"><div style="border:4px double #FFDED0;padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div></div>

 

 

 

本文はここに入力してください。 
改行はShift+Enterで!


 

 

<div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:5px;border-radius:5px;"><div style="border:4px double #DFC69B;padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div></div>

 

 

 

LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています!

「マーカー」とメッセージを送ってね
ドキドキ

友だち追加

ID検索は @570smkow 

 

 

アメブロ囲み枠

 

 

カミツレ囲み枠です。

  • シンプル背景
  • 角丸背景
  • 影つき背景
  • 影つき角丸背景
    があります。








 

 

シンプルカミツレ

 

本文はここに入力してください。
改行はShift+Enterで!

 

<div style="padding:16px;background:url(https://stat.ameba.jp/user_images/20240412/19/atelier-plume-net/bc/e7/j/o0650065015424943966.jpg);"><div style="background:rgba(255,255,255,0.6);padding:20px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

本文はここに入力してください。
改行はShift+Enterで!

 

<div style="padding:16px;background:url(https://stat.ameba.jp/user_images/20240412/19/atelier-plume-net/bc/e7/j/o0650065015424943966.jpg);"><div style="background:rgba(255,255,255,0.6);border:4px double #FCEBAF;padding:20px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

本文はここに入力してください。
改行はShift+Enterで!

 

<div style="padding:16px;background:url(https://stat.ameba.jp/user_images/20240412/19/atelier-plume-net/bc/e7/j/o0650065015424943966.jpg);"><div style="background:rgba(255,255,255,0.6);border:4px double #e8d5af;padding:20px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

角丸カミツレ

 

本文はここに入力してください。 
改行はShift+Enterで!

 

<div style="padding:16px;background:url(https://stat.ameba.jp/user_images/20240412/19/atelier-plume-net/bc/e7/j/o0650065015424943966.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.6);padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

本文はここに入力してください。
改行はShift+Enterで!

 

<div style="padding:16px;background:url(https://stat.ameba.jp/user_images/20240412/19/atelier-plume-net/bc/e7/j/o0650065015424943966.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.6);border-radius:5px;border:4px double #FCEBAF;padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

本文はここに入力してください。
改行はShift+Enterで!

 

<div style="padding:16px;background:url(https://stat.ameba.jp/user_images/20240412/19/atelier-plume-net/bc/e7/j/o0650065015424943966.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.6);border-radius:5px;border:4px double #e8d5af;padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

影つきカミツレ

 

本文はここに入力してください。 
改行はShift+Enterで!

 

<div style="padding:16px;background:url(https://stat.ameba.jp/user_images/20240412/19/atelier-plume-net/bc/e7/j/o0650065015424943966.jpg);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.6);padding:20px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

本文はここに入力してください。
改行はShift+Enterで!

 

<div style="padding:16px;background:url(https://stat.ameba.jp/user_images/20240412/19/atelier-plume-net/bc/e7/j/o0650065015424943966.jpg);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.6);border:4px double #FCEBAF;padding:20px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

本文はここに入力してください。
改行はShift+Enterで!

 

<div style="padding:16px;background:url(https://stat.ameba.jp/user_images/20240412/19/atelier-plume-net/bc/e7/j/o0650065015424943966.jpg);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.6);border:4px double #e8d5af;padding:20px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

影つき角丸カミツレ

 

本文はここに入力してください。 
改行はShift+Enterで!

 

<div style="padding:16px;background:url(https://stat.ameba.jp/user_images/20240412/19/atelier-plume-net/bc/e7/j/o0650065015424943966.jpg);border-radius:10px;box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.6);padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

本文はここに入力してください。
改行はShift+Enterで!

 

<div style="padding:16px;background:url(https://stat.ameba.jp/user_images/20240412/19/atelier-plume-net/bc/e7/j/o0650065015424943966.jpg);border-radius:10px;box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.6);border-radius:5px;border:4px double #FCEBAF;padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

本文はここに入力してください。
改行はShift+Enterで!

 

<div style="padding:16px;background:url(https://stat.ameba.jp/user_images/20240412/19/atelier-plume-net/bc/e7/j/o0650065015424943966.jpg);border-radius:10px;box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.6);border-radius:5px;border:4px double #e8d5af;padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

 

LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています!

「マーカー」とメッセージを送ってね
ドキドキ

友だち追加

ID検索は @570smkow 

 

アメブロ囲み枠

 

 

メッセージボードや

記事下定型文におすすめです。

  • スズラン写真背景
  • 角丸スズラン写真背景
  • 影つきスズラン写真背景
  • 影つき角丸スズラン写真背景があります。 





 

 

シンプルスズラン写真 背景

 

本文はここに入力してください。
改行はShift+Enterで!



 

 

<div style="padding:20px;background:url(https://stat.ameba.jp/user_images/20220415/21/atelier-plume-net/c4/5e/j/o0650065015103393564.jpg);"><div style="background:rgba(255,255,255,0.7);padding:20px">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

本文はここに入力してください。 
改行はShift+Enterで!



 

 

<div style="padding:20px;background:url(https://stat.ameba.jp/user_images/20220415/21/atelier-plume-net/c4/5e/j/o0650065015103393564.jpg);"><div style="background:rgba(255,255,255,0.7);padding:5px;"><div style="border:4px double #B7DA96;padding:20px">本文はここに入力してください。改行はShift+Enterで!</div></div></div>

 

 

 

本文はここに入力してください。 
改行はShift+Enterで!

 

 

<div style="padding:20px;background:url(https://stat.ameba.jp/user_images/20220415/21/atelier-plume-net/c4/5e/j/o0650065015103393564.jpg);"><div style="background:rgba(255,255,255,0.7);padding:5px;"><div style="border:4px double #DFC69B;padding:20px">本文はここに入力してください。改行はShift+Enterで!</div></div></div>

 

 

角丸スズラン写真背景

 

本文はここに入力してください。 
改行はShift+Enterで!



 

 

<div style="padding:20px;background:url(https://stat.ameba.jp/user_images/20220415/21/atelier-plume-net/c4/5e/j/o0650065015103393564.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.7);padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

本文はここに入力してください。 
改行はShift+Enterで!



 

 

<div style="padding:20px;background:url(https://stat.ameba.jp/user_images/20220415/21/atelier-plume-net/c4/5e/j/o0650065015103393564.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.7);padding:5px;border-radius:5px;"> <div style="border:4px double #B7DA96;padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div></div>

 

 

 

本文はここに入力してください。 
改行はShift+Enterで!



 

 

<div style="padding:20px;background:url(https://stat.ameba.jp/user_images/20220415/21/atelier-plume-net/c4/5e/j/o0650065015103393564.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.7);padding:5px;border-radius:5px;"><div style="border:4px double #DFC69B;padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div></div>

 

 

影つきスズラン写真背景

 

本文はここに入力してください。 
改行はShift+Enterで!



 

 

<div style="padding:20px;background:url(https://stat.ameba.jp/user_images/20220415/21/atelier-plume-net/c4/5e/j/o0650065015103393564.jpg);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.7);padding:20px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

本文はここに入力してください。 
改行はShift+Enterで!



 

 

<div style="padding:20px;background:url(https://stat.ameba.jp/user_images/20220415/21/atelier-plume-net/c4/5e/j/o0650065015103393564.jpg);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.7);padding:5px;"><div style="border:4px double #B7DA96;padding:20px">本文はここに入力してください。改行はShift+Enterで!</div></div></div>

 

 

 

本文はここに入力してください。 
改行はShift+Enterで!



 

 

<div style="padding:20px;background:url(https://stat.ameba.jp/user_images/20220415/21/atelier-plume-net/c4/5e/j/o0650065015103393564.jpg);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.7);padding:5px;"><div style="border:4px double #DFC69B;padding:20px">本文はここに入力してください。改行はShift+Enterで!</div></div></div>

 

 

影つき角丸スズラン写真背景

 

本文はここに入力してください。 
改行はShift+Enterで!



 

 

<div style="padding:20px;background:url(https://stat.ameba.jp/user_images/20220415/21/atelier-plume-net/c4/5e/j/o0650065015103393564.jpg);border-radius:10px;box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.7);padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div>

 

 

 

本文はここに入力してください。 
改行はShift+Enterで!



 

 

<div style="padding:20px;background:url(https://stat.ameba.jp/user_images/20220415/21/atelier-plume-net/c4/5e/j/o0650065015103393564.jpg);border-radius:10px;box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.7);padding:5px;border-radius:5px;"><div style="border:4px double #B7DA96;padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div></div>

 

 

 

本文はここに入力してください。 
改行はShift+Enterで!



 

 

<div style="padding:20px;background:url(https://stat.ameba.jp/user_images/20220415/21/atelier-plume-net/c4/5e/j/o0650065015103393564.jpg);border-radius:10px;box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.7);padding:5px;border-radius:5px;"><div style="border:4px double #DFC69B;padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで!</div></div></div>

 

 

 

 

 

LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています!

「マーカー」とメッセージを送ってね
ドキドキ

友だち追加

ID検索は @570smkow 

 

 

アメブロ囲み枠

 

 

アメブロの作り方:デザインとブログアドバイス

 

先週人気だった囲み枠です♡
囲み枠を選ぶときの参考にしてみてくださいね。

 
奈城有美

 

 

宝石赤 1位 宝石赤

 

 

宝石紫 2位 宝石紫

 

 

宝石ブルー 3位 宝石ブルー

 


宝石白 4位 宝石白

 

 

宝石白 5位 宝石白

 

 

宝石白 6位 宝石白

 

 

宝石白 7位 宝石白

 

 

宝石白 8位 宝石白

 

 

宝石白 9位 宝石白

 

 

宝石白 10位 宝石白

 

 

 

LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています!

「マーカー」とメッセージを送ってね
ドキドキ

友だち追加

ID検索は @570smkow 

 

 

アメブロ囲み枠

 

 

タイトルボックス付き 囲み枠
  • タイトルボックス付き囲み枠
  • 角丸タイトルボックス付き囲み枠
  • 角丸タイトルボックス付き角丸囲み枠
  • タイトルラベル付き囲み枠
  • 角丸タイトルラベル付き囲み枠
  • 角丸タイトルラベル付き角丸囲み枠
    があります。

 

タイトルボックス付き囲み枠

 

ここにタイトル
ここに文字
改行はshift+エンター

 

<div style="padding:10px 18px;background:#D5EBE1;"><span style="font-weight:bold; ">ここにタイトル</span></div><div style="border:2px solid #D5EBE1; padding:15px;">ここに文字<br> 改行はshift+エンター</div>

 

 

角丸タイトルボックス付き囲み枠

 

ここにタイトル
ここに文字
改行はshift+エンター

 

<div style="padding:10px 18px;background:#D5EBE1;border-top-left-radius: 10px; border-top-right-radius: 10px;"><span style="font-weight:bold; ">ここにタイトル</span></div><div style="border:2px solid #D5EBE1; padding:15px;">ここに文字<br>改行はshift+エンター</div>

 

 

 

角丸タイトルボックス付き角丸囲み枠

 

ここにタイトル
ここに文字
改行はshift+エンター

 

<div style="padding:10px 18px;background:#D5EBE1;border-top-left-radius: 10px; border-top-right-radius: 10px;"><span style="font-weight:bold; ">ここにタイトル</span></div><div style="border:2px solid #D5EBE1; padding:15px;border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">ここに文字<br>改行はshift+エンター</div>

 

 

 

タイトルラベル付き囲み枠

 

ここにタイトル
ここに文字
改行はshift+エンター

 

<div style="display:inline-block;padding:10px 18px;background:#D5EBE1;"><span style="font-weight:bold; ">ここにタイトル</span></div><div style="border:2px solid #D5EBE1; padding:15px;">ここに文字<br>改行はshift+エンター</div>

 

 

 

角丸タイトルラベル付き囲み枠

 

ここにタイトル
ここに文字
改行はshift+エンター

 

<div style="display:inline-block;padding:10px 18px;background:#D5EBE1;border-top-left-radius: 10px; border-top-right-radius: 10px;"><span style="font-weight:bold; ">ここにタイトル</span></div><div style="border:2px solid #D5EBE1; padding:15px;">ここに文字<br> 改行はshift+エンター</div>

 

 

 

角丸タイトルラベル付き角丸囲み枠

 

ここにタイトル
ここに文字
改行はshift+エンター

 

<div style="display:inline-block;padding:10px 18px;background:#D5EBE1;border-top-left-radius: 10px; border-top-right-radius: 10px;"><span style="font-weight:bold; ">ここにタイトル</span></div><div style="border:2px solid #D5EBE1; padding:15px;border-top-right-radius: 10px;border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">ここに文字<br> 改行はshift+エンター</div>

 

 

 

LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています!

「マーカー」とメッセージを送ってね
ドキドキ

友だち追加

ID検索は @570smkow 

 

 

アメブロ囲み枠