［CSSコーナー装飾］２つの画像を使ってメッセージを綺麗に飾る！コピペで使うデザイン

好きなことを仕事にし
価値あるサービスを届けて

人に喜ばれながら
売り上げを3倍に増やしていく
起業家さんの時間を生み出す

Webデザイナー
後藤美和子です♪

こんにちは！

ご訪問くださり
ありがとうございます

CSSでカスタマイズした
ボックス背景デザイン

今回は

コーナーに花の素材を
あしらってみました

これからご紹介する
HTMLコード欄をコピーし

アメブロの投稿ページ編集画面で
［HTML編集］に切り替え

必要箇所に貼り付けると

ご自身の投稿ページに活かせます

ぜひ、よろしければご覧ください

▼---- Design Sample１----▼

ここに文章を入力してください！

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background-image: url('https://stat.ameba.jp/user_images/20230715/08/migomigo7/ae/48/p/o0215024015312382620.png'),url('https://stat.ameba.jp/user_images/20230715/08/migomigo7/81/43/p/o0215024015312382618.png');background-repeat:no-repeat;background-position: left top,right bottom;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:40px auto;padding:10px;"><div style="background-color:rgba(255,255,255,0.8);border-radius:5px;padding:20px 10px;border:1px solid #9BB671;"><p style="background: none; text-align: center;">ここに文章を入力してください！</p></div></div><p>&nbsp;</p>

▼---- Design Sample2----▼

ここに文章を入力してください！

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background-image: url('https://stat.ameba.jp/user_images/20230715/09/migomigo7/66/a3/p/o0300024215312412839.png'),url('https://stat.ameba.jp/user_images/20230715/09/migomigo7/83/2c/p/o0300024215312412838.png');background-repeat:no-repeat;background-position: left top,right bottom;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:40px auto;padding:10px;"><div style="background-color:rgba(255,255,255,0.8);border-radius:5px;padding:20px 10px;border:1px solid #9BB671;"><p style="background: none; text-align: center;">ここに文章を入力してください！</p></div></div><p>&nbsp;</p>

▼---- Design Sample3----▼

ここに文章を入力してください！

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background-image: url('https://stat.ameba.jp/user_images/20230715/10/migomigo7/c6/64/p/o0240024015312415632.png'),url('https://stat.ameba.jp/user_images/20230715/09/migomigo7/86/09/p/o0241023715312412840.png');background-repeat:no-repeat;background-position: left top,right bottom;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:40px auto;padding:10px;"><div style="background-color:rgba(255,255,255,0.8);border-radius:5px;padding:20px 10px;border:1px solid #9BB671;"><p style="background: none; text-align: center;">ここに文章を入力してください！</p></div></div><p>&nbsp;</p>

▼---- Design Sample4----▼

ここに文章を入力してください！

※改行しながら空白の行を設けて
　コーナー飾りの表示を調整してみてね！

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background-image: url('https://stat.ameba.jp/user_images/20230715/10/migomigo7/c6/64/p/o0240024015312415632.png'),url('https://stat.ameba.jp/user_images/20230715/09/migomigo7/86/09/p/o0241023715312412840.png');background-size:40% auto;background-repeat:no-repeat;background-position: left top,right bottom;margin:40px auto;padding:10px;">
<div style="background-color:rgba(255,255,255,0);padding:20px 10px;">
<p style="background: none; text-align: center;">&nbsp;</p>
<p style="background: none; text-align: center;">ここに文章を入力してください！</p><p style="background: none; text-align: center;">&nbsp;</p></div></div><p>&nbsp;</p>

▼---- Design Sample5----▼

ここに文章を入力してください！

※改行しながら空白の行を設けて
　コーナー飾りの表示を調整してみてね！

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background-image: url('https://stat.ameba.jp/user_images/20230715/10/migomigo7/38/07/p/o0242022815312419370.png'),url('https://stat.ameba.jp/user_images/20230715/10/migomigo7/c0/b4/p/o0240022815312419366.png');background-size:40% auto;background-repeat:no-repeat;background-position: left top,right bottom;margin:40px auto;padding:10px;">
<div style="background-color:rgba(255,255,255,0);padding:20px 10px;">
<p style="background: none; text-align: center;">&nbsp;</p>
<p style="background: none; text-align: center;">ここに文章を入力してください！</p><p style="background: none; text-align: center;">&nbsp;</p></div></div><p>&nbsp;</p>

以上、

コーナーに花の素材を添えた
ボックスデザイン

ご覧いただきありがとうございました♪

デザインで伝える・伝わる画像作り

【過去の連載記事】

☆・‥…☆・‥…☆・‥…☆

今のステージをワンランク高めて

集客をもっと加速していきたい方！

個別サポートだから安心

商品作りのためのブランディングコンサル

集客WEBページ（ランディングページ）制作

アメブロやFBヘッダー画像のデザイン作成

提案書作りの添削

CANVAデザイン制作マスター

〜・〜・〜・〜

あなたの思考のモヤモヤを

一緒に解消していきませんか？！

〜・〜・〜・〜

後藤美和子の

LINE公式アカウントはこちら

↓　↓　↓

気軽にLINEメッセージを送ってください！

( ID: @238peydi )