［CSS装飾］投稿記事の背景を素敵に演出しちゃおう！コピペで使えるアメブロ投稿デザイン

 

9月に入り、朝晩の暑さが
少しずつ和らいできましたね。


そして実家では、
稲刈りの時期となりました！


新米が食べれることを
とても楽しみにしている私ですおねがい

 

 


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

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

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

 

 

 

 

 

 

CSSでカスタマイズする
ボックス背景デザイン乙女のトキメキ

 

 

 

今回は、残暑に咲く花シリーズビックリマーク

お好みの背景があれば
ぜひ活用してみてくださいね飛び出すハート

 

 

 

    

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

 

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


必要箇所に貼り付けると

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

 

 

 

 

 

▼---- ハート Design Sample１----▼

 

         ↓ ↓ ↓

 

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

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240906/20/migomigo7/4e/e4/j/o0600100015483280932.jpg') repeat-y center top/100% auto; border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:10px;"><div style="padding:20px;background-color:rgba(255,255,255,0.9);border-radius: 5px;border:1px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

 

 

 

 

▼---- ハート Design Sample2----▼

 

         ↓ ↓ ↓

 

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

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240906/20/migomigo7/58/3e/j/o0600100015483280928.jpg') repeat-y center top/100% auto; border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:10px;"><div style="padding:20px;background-color:rgba(255,255,255,0.8);border-radius: 5px;border:1px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

 

 

 

▼---- ハート Design Sample3----▼

 

         ↓ ↓ ↓

 

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

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

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240906/20/migomigo7/21/27/j/o0600100015483280930.jpg') repeat-y center top/100% auto; border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:10px;"><div style="padding:20px;background-color:rgba(255,255,255,0.9);border:2px solid #fff;border-radius: 5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

 

 

 

 

 

▼---- ハート Design Sample4----▼

 

         ↓ ↓ ↓

 

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

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

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240906/20/migomigo7/7a/aa/j/o0600100015483280931.jpg') repeat-y center top/100% auto;"><div style="padding:10px;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:20px;background-color:rgba(255,255,255,0.9);border:2px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

 

 

 

▼---- ハート Design Sample5----▼

 

         ↓ ↓ ↓

 

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

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

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240906/20/migomigo7/5c/19/j/o0600100015483280926.jpg') repeat-y center top/100% auto;"><div style="padding:10px;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:20px;background-color:rgba(255,255,255,0.8);border:2px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

 

 

 

▼---- ハート Design Sample6----▼

 

         ↓ ↓ ↓

 

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

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

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

◇　HTMLコード ◇

<p>&nbsp;</p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240906/20/migomigo7/be/c8/j/o0600100015483280933.jpg') repeat-y center top/100% auto;"><div style="padding:10px;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);margin:20px auto;"><div style="padding:20px;background-color:rgba(255,255,255,0.8);border:2px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p>&nbsp;</p>

 

 

 

 

クローバー クローバー クローバー クローバー クローバー クローバー

 

以上の6点、

 

ご利用いただけると嬉しいですニコニコラブラブ
ご覧いただき、ありがとうございました♪

 

 

 

 

〜ピンク薔薇 ピンク薔薇 ピンク薔薇 ピンク薔薇 ピンク薔薇〜

 

公園シリーズ［1］

 

公園シリーズ［2］

 

爽やか編［1］

 

花柄シリーズ［1］

 

 

 

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

 

 

 

 

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

( ID: @238peydi )

 

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

 

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

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

個別サポートだから安心乙女のトキメキ

 

 

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

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

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

宝石赤提案書作りの添削

宝石赤CANVAデザイン制作マスター

 

 

〜・〜・〜・〜

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

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

〜・〜・〜・〜

 

後藤美和子の

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

↓　↓　↓

 

友だち追加

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

( ID: @238peydi )