アメブロで使える大人かわいい囲み枠をご紹介しています♡
こちらのページはエレガントな白い大理石柄をベースに背景色などのデザイン違いをご紹介しています。
他のデザイン一覧ページはこちら →こちら★
私が作成してご紹介する囲み枠は『Enter』のみで改行できます♡
アメブロ囲み枠の使い方
- デザインを選んで、HTMLコード(グレーの枠内)をコピーする
- アメブロの記事作成画面で [HTML表示] に画面を切り替える
- ①でコピーしたHTMLコードを貼付けます
- 囲み枠の中を入力する
- 無断転載・パクリ・二次利用などは禁止です！
- ご自分のブログでコピペしての使用はOKです！
- 記事をご紹介いただく際は、出典元として当ブログのリンクをお願いします。ご自分のブログでコピペしての使用はOKです！
Contents
エレガントな白い大理石のアメブロ囲み枠
シンプル・ゴールド枠
文字を入力
<div style="background-image:url(https://joujounet.com/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(255,255,255,0.7); padding:10px;"> <p style="margin: 0;">文字を入力</p></div></div><p> </p> <p> </p>
文字を入力
<div style="background-image:url(https://joujounet.com/wp-content/uploads/stone1.jpg); padding: 15px ; "> <div style="background:rgba(255,255,255,0.7); padding:10px; border:3px solid #CEBB5B;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
文字を入力
<div style="background-image:url(https://joujounet.com/wp-content/uploads/stone1.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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(255,255,255,0.7);padding:12px;"><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/wp-content/uploads/stone1.jpg); padding: 15px ; "> <div style="background:rgba(255,255,255,0.7);padding:8px;"><div style="border:4px double #CEBB5B; padding:12px; padding-left:10px;"> <p style="margin: 0;">文字を入力</p></div></div></div> <p> </p>
ブラック枠の囲み枠
文字を入力
<div style="background-image:url(https://joujounet.com/wp-content/uploads/stone1.jpg); padding: 15px ; "> <div style="background:rgba(255,255,255,0.7); padding:10px; border:2px solid #817881;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
文字を入力
<div style="background-image:url(https://joujounet.com/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(255,255,255,0.7); padding:10px; border:4px double #817881;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
文字を入力
<div style="background-image:url(https://joujounet.com/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(255,255,255,0.7);padding:12px;"><div style="border:2px solid #817881; padding:10px; padding-left:10px;"> <p style="margin: 0;">文字を入力</p></div></div></div> <p> </p>
文字を入力
<div style="background-image:url(https://joujounet.com/wp-content/uploads/stone1.jpg); padding: 15px ; "> <div style="background:rgba(255,255,255,0.7);padding:8px;"><div style="border:4px double #817881; padding:12px; padding-left:10px;"> <p style="margin: 0;">文字を入力</p></div></div></div> <p> </p>
角丸・ゴールド枠
文字を入力
<div style="background-image:url(https://joujounet.com/wp-content/uploads/stone1.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/wp-content/uploads/stone1.jpg); padding: 15px ;border-radius:10px;"> <div style="background:rgba(255,255,255,0.8); padding:10px; border:3px solid #CEBB5B; border-radius:8px;"> <p style="margin: 1;">文字を入力</p></div></div> <p> </p>
文字を入力
<div style="background-image:url(https://joujounet.com/wp-content/uploads/stone1.jpg); padding: 15px ; "> <div style="background:rgba(255,255,255,0.7);padding:8px;"><div style="border:4px double #817881; padding:12px; 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/wp-content/uploads/stone1.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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <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/wp-content/uploads/stone1.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="background-image:url(https://joujounet.com/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(255,249,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(239,247,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(247,239,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(239,255,247,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(255,255,239,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(247,246,245,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(250,247,238,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(243,243,243,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(233,228,224,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(234,216,216,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(234,216,227,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(224,211,230,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(216,221,234,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(216,232,234,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/wp-content/uploads/stone1.jpg); padding: 15px ;"> <div style="background:rgba(214,230,211,0.7); padding:10px; border:4px double #CEBB5B;"> <p style="margin: 0;">文字を入力</p></div></div> <p> </p>
他のデザイン一覧ページはこちら →こちら★
まとめ・見やすく可愛いブログには囲み枠を使おう
アメブロで長い文章を書くときは文章をボックス(枠)で囲むと読みやすくなります。
ぜひ設定してあなたらしいかわいい”あなただけの”アメブロを完成させましょう！
お役に立てましたら嬉しいです♡
本日も最後までお読みいただき、ありがとうございました♡
自分で簡単にアメブロのヘッダーをカスタマイズ★アメブロでカスタマイズ と聞くと難しそうなイメージがありますが
ヘッダーと背景のデザインだけ変えられる
簡単、且つシンプルなカスタマイズ...
