\暑い夏/
ホントに毎日暑いね〜
私が住んでいる町から見える
「大山(だいせん)」
という一番高い山があり
親しまれている。
なんとその大山が噴火した!
かの様に見えた積乱雲
この高さは凄くないですか!!
もうびっくりで
すぐさま撮影しちゃった私
娘の送迎移動時に
空を見上げて面白い雲を
探すことが日課なってます
さぁ〜
今回も日々感じたものから
デザインに繋げていきまーす♪
アメブロの投稿で
伝えたい一番大切な内容を
文字だけで表現する
プラス
デザインで施し
視覚的に目立つようにすることで
思いも倍に伝わる仕掛けに!
好きなことを仕事にし
価値あるサービスを届けて
人に喜ばれながら
売り上げを3倍に増やしていく
起業家さんの時間を生み出す
Webデザイナー
後藤美和子です♪
CSSでカスタマイズする
ボックス背景デザイン
今回は、
爽やかさを活かした
室内の背景画像を配置してみました
利用する写真の印象で
ブログの中身も雰囲気が変わる♪
これからご紹介する
HTMLコード欄をコピーし
アメブロの投稿ページ編集画面で
[HTML編集]に切り替え
必要箇所に貼り付けると
ご自身の投稿ページに活かせます
▼---- Design Sample1----▼
↓ ↓ ↓
ここに文章を入力してください!
ここに文章を入力してください!
ここに文章を入力してください!
ここに文章を入力してください!
ここに文章を入力してください!
◇ HTMLコード ◇
<p> </p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230729/23/migomigo7/a3/a1/j/o1000100015318547460.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> </p>
▼---- Design Sample2----▼
↓ ↓ ↓
ここに文章を入力してください!
ここに文章を入力してください!
ここに文章を入力してください!
ここに文章を入力してください!
ここに文章を入力してください!
◇ HTMLコード ◇
<p> </p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230729/23/migomigo7/00/99/j/o1000100015318547465.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> </p>
▼---- Design Sample3----▼
↓ ↓ ↓
ここに文章を入力してください!
ここに文章を入力してください!
ここに文章を入力してください!
ここに文章を入力してください!
ここに文章を入力してください!
◇ HTMLコード ◇
<p> </p><div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230729/23/migomigo7/ba/65/j/o1000100015318547462.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: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/20230729/23/migomigo7/2f/e8/j/o1000100015318547468.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> </p>
以上の4点、
爽やかなイメージを演出する
背景にしてみました
ご利用いただけると嬉しいです
ご覧いただき、ありがとうございました♪
花柄シリーズ[1]
花柄シリーズ[2]
花柄シリーズ[3]
\開催している講座/
〜*〜*〜*〜*〜*〜
Canvaでサクッとヘッダー画像作成
&アメブロ設置の作業を大公開
↑ ↑ ↑
※開催日時が合わない場合は、リクエストしてくださいね♪
デザインで伝える・伝わる画像作り
気軽にLINEメッセージを送ってください!
( ID: @238peydi )