一人で頑張っている
忙しい起業家さんの
＼ビジネスをサポート／
売上アップのために
ITツールを活用し集客導線を整える
Web集客コンサルタント
後藤美和子です
パソコン講師歴20年以上
マンツーマン対応がご好評
こんにちは！
ご訪問くださり
ありがとうございます
今回は
水玉模様の画像 その2！
ブログ投稿記事を装飾できる
背景デザインをご用意しました
HTML＆CSSでカスタマイズした
ボックスデザイン
ぜひ、ご覧ください。
これからご紹介する
HTMLコード欄をコピーし
アメブロの投稿ページ編集画面で
［HTML編集］に切り替え
必要箇所に貼り付けると
ご自身の投稿ページに活かせます
▼---- 
Design Sample１----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p>
<div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240228/22/migomigo7/67/94/j/o0150015015407174910.jpg') repeat center center;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:16px; background-color:rgba(255,255,255,0.8);border-radius: 5px;border:2px 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/20240228/22/migomigo7/cc/67/j/o0150015015407174908.jpg') repeat center center;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:16px; background-color:rgba(255,255,255,0.8);border-radius: 5px;border:2px 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/20240228/22/migomigo7/84/2f/j/o0150015015407174907.jpg') repeat center center;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:16px; 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/20240228/22/migomigo7/0f/bf/j/o0150015015407174906.jpg') repeat center center;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);margin:20px auto;"><div style="padding:10px;"><div style="padding:16px; background-color:rgba(255,255,255,0.8);border:2px solid #fff;">
<p style="background:none;">ここに文章を入力してください！</p></div></div></div>
<p> </p>
▼---- Design Sample5----▼
↓ ↓ ↓
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
ここに文章を入力してください！
◇ HTMLコード ◇
<p> </p>
<div style="border:1px solid #daded4;border-radius:5px;background: url('https://stat.ameba.jp/user_images/20240228/22/migomigo7/a4/05/j/o0150015015407174905.jpg') repeat center center;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:16px; background-color:rgba(255,255,255,0.8);border-radius: 5px;border:2px solid #fff;"><p style="background:none;">ここに文章を入力してください！</p>
</div></div></div>
<p> </p>
以上の5点、
少し大柄な水玉模様を背景に
したボックスデザイン
いかがでしたでしょうか
最後まで、ご覧いただきありがとうございました♪
＼ 過去の投稿デザイン／
その他にも
お好みのボックスデザインが見つかるかも
↓ ↓ ↓
デザインで伝える・伝わる画像作り
【過去の連載記事】
■＊■＊■＊■＊■＊■
LINE登録のためのWebページ（LP）制作
ブランディングに欠かせないアメブロヘッダー画像作成
24時間営業をしてくれるホームページ制作
Excel集計・プレゼン資料等の作成代行
今すぐ解決したい！パソコン操作個別サポート
■＊■＊■＊■＊■＊■
もし気になることや疑問などがあれば
お気軽にご質問ください。
( ID: @238peydi )