アメブロで使える大人かわいい囲み枠をご紹介しています♡
こちらのページはエレガントなグレースフラワーのピンクバージョンをベースに背景色などのデザイン違いをご紹介しています。同じデザインの色違いはこちら →こちら★
JUNKO
囲み枠は改行は『Enter』のみで大丈夫です♡
他にも可愛いデザインをたくさん用意しています！
デザインを選んで、HTMLコード(グレーの枠内)をコピーする
アメブロの記事作成画面で [HTML表示] に画面を切り替える
①でコピーしたHTMLコードを貼付けます
囲み枠の中を入力する
ご自分のブログでコピペしての使用はOKです！
記事をご紹介いただく際は、出典元として当ブログのリンクをお願いします。
おしゃれなレモン柄のアメブロ囲み枠
シンプルなゴールド枠の囲み枠
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,255,1); padding:10px;”>
<p style=”margin: 0;”>文字を入力</p></div></div><p> </p>
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”> <div style=”background:rgba(255,255,255,1);padding:7px;”><div style=”border:2px solid #CEBB5B; padding:10px; padding-left:10px;”>
<p style=”margin: 0;”>文字を入力</p></div></div></div>
<p> </p>
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,255,1); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p> </p>
シンプルなゴールド枠の囲み枠（透かし）
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,255,0.7); padding:10px;”>
<p style=”margin: 0;”>文字を入力</p></div></div><p> </p>
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”> <div style=”background:rgba(255,255,255,0.7);padding:7px;”><div style=”border:2px solid #CEBB5B; padding:10px; padding-left:10px;”>
<p style=”margin: 0;”>文字を入力</p></div></div></div>
<p> </p>
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,255,0.7); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p> </p>
シンプルなカラー枠の囲み枠
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ; “>
<div style=”background:rgba(255,255,255,1); padding:10px; border:3px solid #4169e1;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p> </p>
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,255,1); padding:10px; border:4px double #4169e1;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p> </p>
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”> <div style=”background:rgba(255,255,255,1);padding:7px;”><div style=”border:2px solid #4169e1; padding:10px; padding-left:10px;”>
<p style=”margin: 0;”>文字を入力</p></div></div></div>
<p> </p>
角が丸いゴールドの囲み枠
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;border-radius:10px;”>
<div style=”background:rgba(255,255,255,0.8); padding:10px;border-radius:8px;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p> </p>
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;border-radius:10px;”>
<div style=”background:rgba(255,255,255,0.8); padding:10px; border:3px solid #CEBB5B; border-radius:5px;”>
<p style=”margin: 1;”>文字を入力</p></div></div>
<p> </p>
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ; border-radius:10px;”>
<div style=”background:rgba(255,255,255,0.8); padding:10px; border:4px double #CEBB5B; border-radius:8px;”>
<p style=”margin: 2;”>文字を入力</p></div></div>
<p> </p>
影付きのゴールド枠の囲み枠
文字を入力
<div style=” box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ; “>
<div style=”background:rgba(255,255,255,0.8); 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://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”> <div style=”background:rgba(255,255,255,0.9);padding:7px;”><div style=”border:2px solid #CEBB5B; padding:10px; padding-left:10px;”>
<p style=”margin: 0;”>文字を入力</p></div></div></div>
<p> </p>
文字を入力
<div style=” box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,255,0.8); padding:10px; border:4px double #CEBB5B;”>
<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://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;border-radius:10px;”>
<div style=”background:rgba(255,255,255,0.8); padding:10px; border:3px solid #CEBB5B;”>
<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://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;border-radius:10px; “> <div style=”background:rgba(255,255,255,0.9);padding:8px;border-radius:5px;”><div style=”border:4px double #CEBB5B; padding:10px; padding-left:10px;border-radius:5px;”>
<p style=”margin: 0;”>文字を入力</p></div></div></div>
<p> </p>
パステルカラーの背景色の囲み枠
ベビーピンク
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,249,255,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p> </p>
ベビーブルー
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(239,247,255,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p> </p>
パステルパープル
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(247,239,255,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p> </p>
パステルグリーン
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(239,255,247,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p> </p>
パステルイエロー
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,239,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p> </p>
くすみカラーの背景色の囲み枠
アイボリー
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(250,247,238,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p> </p>
グレージュ
文字を入力
<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(233,228,224,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p> </p>
JUNKO
囲み枠が上手くできなかったり、ご質問があれば、お気軽にコメント欄から質問してくださいね。
同じデザインの色違いもあるよ！ →こちら★
まとめ・見やすく可愛いブログには囲み枠を使おう
アメブロで長い文章を書くときは文章をボックス(枠)で囲むと読みやすくなります。
ぜひ設定してあなたらしいかわいい”あなただけの”アメブロを完成させましょう！
お役に立てましたら嬉しいです♡
本日も最後までお読みいただき、ありがとうございました♡
