好きなことを仕事にし
価値あるサービスを届けて
人に喜ばれながら
売り上げを3倍に増やしていく
起業家さんの時間を生み出す
Webデザイナー
後藤美和子です♪
こんにちは!
ご訪問くださり
ありがとうございます
前回の投稿は
アメブロのヘッダーを自分で
カスタマイズしたい方向けに
ご紹介した内容でしたが
ご覧いただけましたでしょうか?!
今回は
木目調の画像
を配置してみました
CSSでカスタマイズした
ボックス背景デザイン
これからご紹介する
HTMLコード欄をコピーし
アメブロの投稿ページ編集画面で
[HTML編集]に切り替え
必要箇所に貼り付けると
ご自身の投稿ページに活かせます
ぜひ、よろしければご覧ください
▼---- Design Sample1----▼
↓ ↓ ↓
ここに文章を入力してください!
ここに文章を入力してください!
ここに文章を入力してください!
ここに文章を入力してください!
ここに文章を入力してください!
◇ HTMLコード ◇
<p> </p> <div style="border-radius:5px;background: url('https://stat.ameba.jp/user_images/20230106/16/migomigo7/e8/cb/j/o0640038015226286948.jpg') repeat-y center top;background-size: cover;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.6);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/20230106/16/migomigo7/16/8c/j/o0640038015226286946.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,238,212,0.6);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/20230106/16/migomigo7/ba/25/j/o0640038015226286951.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(132,80,50,0.6);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/20230106/16/migomigo7/75/9e/j/o0640042515226286953.jpg') repeat-y center top;background-size: 100% auto;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:20px;background-color:rgba(255,255,255,0.6);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/20230106/16/migomigo7/b4/a0/j/o0640048015226286957.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.4);border-radius: 5px;border:2px solid #fff;"> <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/20230106/16/migomigo7/bc/fd/j/o0640048015226286958.jpg') repeat-y center bottom;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.6);border-radius: 5px;border:2px solid #fff;">
<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/20230106/16/migomigo7/d8/db/j/o0640036215226286959.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(132,80,50,0.6);border-radius: 5px;border:2px solid #fff;">
<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/20230106/16/migomigo7/bc/fd/j/o0640048015226286958.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,223,210,0.5);border-radius: 5px;border:2px solid #fff;">
<p style="background:none;">ここに文章を入力してください!</p>
</div></div></div>
<p> </p>
以上の8点、
木目調の画像を背景にした
ボックスデザイン
ご覧いただき
ありがとうございました♪
デザインで伝える・伝わる画像作り
【過去の連載記事】
■■■■■■
集客WEBページ(ランディングページ)制作
アメブロやFBヘッダー画像のデザイン作成
Excel集計/PowerPoint販促資料
パソコン苦手でも大丈夫!
Officeソフトの操作サポート
時間を生み出し本業に専念したいあなたに!
アメブロやFacebookヘッダーの魅せるデザイン画像
Excel、PowerPoint、Word等で時短資料作成
Officeソフトの便利機能を最短で活用できる集客事務処理
最短で真似するだけでOK!
どうすればもっとアメブロの記事が見やすくなるか知りたい!
有名ブロガーさんの装飾を真似てPVを上げたい!
お客様が見やすくて自然と読まれるようなブロブにしたい!
もし気になることや疑問など下記のLINEに
ご質問メッセージをくだされば、
無料相談でお答えいたします!