華やかグラデーション背景の囲み枠
華やかグラデーション背景の囲み枠
2022.06.20
文章が長めになっても、キレイなグラデーションのまま伸びていくシームレスタイプの囲み枠です。
囲み枠の下の『Copy』ボタンを押すとコードがコピーできるので、アメブロの『HTML表示』に貼り付けてくださいね。
シンプルなグラデーション囲み枠
見出し用
<p> </p><div style="padding: 8px;background-image: linear-gradient(45deg,#fff5ea 0%,#ffe5f8 25%,#f4effd 50%,#e7f9ff 75%,#d7faf4 100%);"><span style="font-weight:bold;">ここに見出し</span></div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="padding:20px;background-image: linear-gradient(45deg,#fff5ea 0%,#ffe5f8 25%,#f4effd 50%,#e7f9ff 75%,#d7faf4 100%);"><div style="background:rgba(255,255,255,0.7);padding:20px;">本文はここに入力してください。改行はShift+Enterで！ </div></div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="padding:20px;background-image: linear-gradient(45deg,#fff5ea 0%,#ffe5f8 25%,#f4effd 50%,#e7f9ff 75%,#d7faf4 100%);"><div style="background:rgba(255,255,255,0.7);padding:5px;"><div style="border:4px double #FEE5F8;padding:20px;">本文はここに入力してください。改行はShift+Enterで！ </div></div></div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="padding:20px;background-image: linear-gradient(45deg,#fff5ea 0%,#ffe5f8 25%,#f4effd 50%,#e7f9ff 75%,#d7faf4 100%);"><div style="background:rgba(255,255,255,0.7);padding:5px;"><div style="border:4px double #DFC69B;padding:20px;">本文はここに入力してください。改行はShift+Enterで！ </div></div></div><p> </p>
↑ Copy
角丸グラデーション囲み枠
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="padding:20px;background-image: linear-gradient(45deg,#fff5ea 0%,#ffe5f8 25%,#f4effd 50%,#e7f9ff 75%,#d7faf4 100%);border-radius:10px;"><div style="background:rgba(255,255,255,0.7);padding:20px;">本文はここに入力してください。改行はShift+Enterで！ </div></div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="padding:20px;background-image: linear-gradient(45deg,#fff5ea 0%,#ffe5f8 25%,#f4effd 50%,#e7f9ff 75%,#d7faf4 100%);border-radius:10px;"><div style="background:rgba(255,255,255,0.7);padding:5px;"><div style="border:4px double #FEE5F8;padding:20px;">本文はここに入力してください。改行はShift+Enterで！ </div></div></div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="padding:20px;background-image: linear-gradient(45deg,#fff5ea 0%,#ffe5f8 25%,#f4effd 50%,#e7f9ff 75%,#d7faf4 100%);border-radius:10px;"><div style="background:rgba(255,255,255,0.7);padding:5px;"><div style="border:4px double #DFC69B;padding:20px;">本文はここに入力してください。改行はShift+Enterで！ </div></div></div><p> </p>
↑ Copy
影つきグラデーション囲み枠
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="padding:20px;background-image: linear-gradient(45deg,#fff5ea 0%,#ffe5f8 25%,#f4effd 50%,#e7f9ff 75%,#d7faf4 100%);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><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="padding:20px;background-image: linear-gradient(45deg,#fff5ea 0%,#ffe5f8 25%,#f4effd 50%,#e7f9ff 75%,#d7faf4 100%);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 #FEE5F8;padding:20px;">本文はここに入力してください。改行はShift+Enterで！</div></div></div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="padding:20px;background-image: linear-gradient(45deg,#fff5ea 0%,#ffe5f8 25%,#f4effd 50%,#e7f9ff 75%,#d7faf4 100%);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><p> </p>
↑ Copy
影つき角丸グラデーション囲み枠
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="padding:20px;background-image: linear-gradient(45deg,#fff5ea 0%,#ffe5f8 25%,#f4effd 50%,#e7f9ff 75%,#d7faf4 100%);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);border-radius:10px;"><div style="background:rgba(255,255,255,0.7);padding:20px;">本文はここに入力してください。改行はShift+Enterで！</div></div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="padding:20px;background-image: linear-gradient(45deg,#fff5ea 0%,#ffe5f8 25%,#f4effd 50%,#e7f9ff 75%,#d7faf4 100%);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);border-radius:10px;"><div style="background:rgba(255,255,255,0.7);padding:5px;"><div style="border:4px double #FEE5F8;padding:20px;">本文はここに入力してください。改行はShift+Enterで！</div></div></div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="padding:20px;background-image: linear-gradient(45deg,#fff5ea 0%,#ffe5f8 25%,#f4effd 50%,#e7f9ff 75%,#d7faf4 100%);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);border-radius:10px;"><div style="background:rgba(255,255,255,0.7);padding:5px;"><div style="border:4px double #DFC69B;padding:20px;">本文はここに入力してください。改行はShift+Enterで！</div></div></div><p> </p>
↑ Copy
＼ Share ／