アメブロで使える大人かわいい囲み枠をご紹介しています♡
こちらのページはエレガントなグレースフラワーのホワイトピンクバージョンをベースに背景色などのデザイン違いをご紹介しています。
他のデザイン一覧ページはこちら →こちら★
私が作成してご紹介する囲み枠は改行は『Enter』のみで大丈夫です♡
- デザインを選んで、HTMLコード(グレーの枠内)をコピーする
- アメブロの記事作成画面で [HTML表示] に画面を切り替える
- ①でコピーしたHTMLコードを貼付けます
- 囲み枠の中を入力する
- 無断転載・パクリ・二次利用などは禁止です！
- ご自分のブログでコピペしての使用はOKです！
- 記事をご紹介いただく際は、出典元として当ブログのリンクをお願いします。ご自分のブログでコピペしての使用はOKです！
Contents
エレガントなグレースフラワーのアメブロ囲み枠
シンプル・ゴールド枠
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background:rgba(255,255,255,0.9); padding:10px;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background:rgba(255,255,255,0.9); padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
角丸・ゴールド枠
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;border-radius:10px;"> <div style="background:rgba(255,255,255,0.9); padding:10px;border-radius:8px;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;border-radius:10px;"> <div style="background:rgba(255,255,255,0.9); padding:10px; border:3px solid #cbb994; border-radius:8px;"> <p style="margin: 1;">文字を入力</p></div></div> <p> </p>
影付き・ゴールド枠
文字を入力
<div style=" box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background:rgba(255,255,255,0.9); padding:10px;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
文字を入力
<div style=" box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background:rgba(255,255,255,0.9); padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
パステルカラーの背景色
ベビーピンク
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #FFF9FF; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
ベビーブルー
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #EFF7FF; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
パステルパープル
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #F7EFFF; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
パステルグリーン
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #EFFFF7; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
パステルイエロー
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #FFFFEF; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
くすみカラーの背景色
くすみホワイト
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #F7F6F5; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
アイボリー
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #FAF7EE; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
くすみグレー
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #F3F3F3; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
グレージュ
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #E9E4E0; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
くすみピンク
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #EAD8D8; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
ローズグレー
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #EAD8E3; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
ラベンダーグレー
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #E5D8EA; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
くすみブルー
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #D8DDEA; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
ミントグレー
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #D8E8EA; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
くすみグリーン
文字を入力
<div style="background-image:url(https://stat.ameba.jp/user_images/20220510/16/joujounet/02/37/p/o1080108015115893203.png); padding: 15px ; background-size: 50%;"> <div style="background: #DBEAD8; opacity: 0.95; padding:10px; border:4px double #cbb994;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
他のデザイン一覧ページはこちら →こちら★
まとめ・見やすく可愛いブログには囲み枠を使おう
アメブロで長い文章を書くときは文章をボックス(枠)で囲むと読みやすくなります。
ぜひ設定してあなたらしいかわいい”あなただけの”アメブロを完成させましょう！
お役に立てましたら嬉しいです♡
本日も最後までお読みいただき、ありがとうございました♡
