今年は桜が満開で
天候にも恵まれ
ゆっくりと花見がでた私です。
やっぱり春はだーいスキ
好きなことを仕事にし
価値あるサービスを届けて
人に喜ばれながら
売り上げを3倍に増やしていく
起業家さんの時間を生み出す
Webデザイナー
後藤美和子です♪
こんにちは！
ご訪問くださり
ありがとうございます
CSSでカスタマイズする
ボックス背景デザイン
今回は
私自身の幼少期や
子育て中に我が子と一緒に遊んだ
シャボン玉をバックに
背景画像を配置してみました
これからご紹介する
HTMLコード欄をコピーし
アメブロの投稿ページ編集画面で
［HTML編集］に切り替え
必要箇所に貼り付けると
ご自身の投稿ページに活かせます
ぜひ、よろしければご覧ください
▼---- Design Sample１----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230405/17/migomigo7/4a/0b/j/o1000141515265774638.jpg') repeat-y center top;background-size: 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> </p>
▼---- Design Sample2----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230405/17/migomigo7/37/95/j/o0842119115265774640.jpg') repeat-y center center;background-size: 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> </p>
▼---- Design Sample3----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230405/17/migomigo7/ec/3e/j/o1000141415265774641.jpg'') repeat-y center center;background-size: 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:2px solid #fff;border-radius: 5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p> </p>
▼---- Design Sample4----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230405/17/migomigo7/ed/57/j/o1000141415265774642.jpg'') repeat-y center center;background-size: 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:2px solid #fff;border-radius: 5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p> </p>
▼---- Design Sample5----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230405/17/migomigo7/69/49/j/o1000154715265774646.jpg'') repeat-y center center;background-size: 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:2px solid #fff;border-radius: 5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p> </p>
▼---- Design Sample6----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230405/17/migomigo7/5e/40/j/o1000133315265774648.jpg'') repeat-y center center;background-size: 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:2px solid #fff;border-radius: 5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p> </p>
▼---- Design Sample7----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230405/17/migomigo7/7d/e2/j/o1000133315265774650.jpg'') repeat-y center center;background-size: 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:2px solid #fff;border-radius: 5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p> </p>
▼---- Design Sample8----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230405/17/migomigo7/90/83/j/o1000133315265774636.jpg'') repeat-y center center;background-size: 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:2px solid #fff;border-radius: 5px;"><p style="background:none;">ここに文章を入力してください！</p></div></div></div><p> </p>
以上、
シャボン玉を背景にした
ボックスデザイン！
ご覧いただき
ありがとうございました♪
デザインで伝える・伝わる画像作り
■■■■■■
集客WEBページ（ランディングページ）制作
アメブロやFBヘッダー画像のデザイン作成
Excel集計／PowerPoint販促資料
パソコン苦手でも大丈夫！
時間を生み出し本業に専念したいあなたに！
アメブロやFacebookヘッダーの魅せるデザイン画像
提案書・プレゼン資料の構成編集
ホームページ制作・編集
Excel、PowerPoint、Word等で時短資料作成
最短で活用できる集客事務処理
最短で真似するだけでOK！
どうすればアメブロの記事が見やすくなるか知りたい！
アメブロの装飾を世界観に合わせてカスタマイズしたい！
読者に自然と読まれるようなブロブにしたい！
もし気になることや疑問など下記のLINEに
ご質問メッセージをくだされば、
無料相談でお答えいたします！
〜・〜・〜・〜
あなたの思考のモヤモヤを
一緒に解消していきませんか？！
〜・〜・〜・〜
後藤美和子の
LINE公式アカウントはこちら
↓ ↓ ↓
気軽にLINEメッセージを送ってください！
( ID: @238peydi )
