アメブロで使える囲み枠線は、目立たせたりするのにとても便利です。
好きな色で自分らしくしたり、かわいい見た目に整えたり、オシャレにしたりすることができます。
最初は色を整えるだけで満足していたかもしれませんが、他の人とは違うオシャレな囲み枠を使いたいと思ったりしませんか?
- 普通の囲み枠に飽きてしまった。
- 他の人とカブるのが嫌だ。
- もっとかわいい囲み枠を使いたい。
そんな時は画像を使った囲み枠がオススメです。
本日はアメブロで使える囲み枠線!かわいい水彩画風イラストというテーマでお役立ち情報をお届けします。
[speech_bubble type=”fb-flat” subtype=”L1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]画像を使った囲み枠でアメブロをもっとオシャレにしましょう!
私が自分で使いたいと思った本当にかわいいものだけ1点1点心を込めて全て手描きで30種類作りました。[/speech_bubble]
①下記から使いたい囲み枠を選ぶ。
↓
②HTMLタグをコピーする。
↓
③アメブロのブログを書く画面をHTML表示にして貼り付ける。
※報告不要でお使いいただけますが、ご紹介していただけると励みになります♡
※無断転載や、再配布は禁止です!
(この記事のタグをコピペして似たような記事を作ったり、メルマガやLINE@で配布する事。)
かわいい花びらの囲み枠線【3種】
◆薄いピンクの花びら(白背景)
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/01/keiko-design/03/b5/j/o0080008014538179013.jpg);border-radius:1px;"> <div style="background:rgba(254,249,251,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆濃いピンクの花びら(白背景)
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/01/keiko-design/a0/88/j/o0080008014538179035.jpg);border-radius:1px;"> <div style="background:rgba(254,249,251,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆濃いピンクの花びら(ピンク背景)
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/01/keiko-design/a4/71/j/o0080008014538179086.jpg);border-radius:1px;"> <div style="background:rgba(254,249,251,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
淡くてかわいい水彩画風の囲み枠線【5種】
◆ピンク
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190815/22/keiko-design/1a/7a/j/o0100010014538024938.jpg);border-radius:1px;"> <div style="background:rgba(254,249,251,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆紫
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190815/22/keiko-design/ba/6c/j/o0100010014538033770.jpg);border-radius:1px;"> <div style="background:rgba(254,249,251,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆黄色
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190815/23/keiko-design/e6/95/j/o0100010014538044050.jpg);border-radius:1px;"> <div style="background:rgba(255,254,252,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆青
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190815/23/keiko-design/76/da/j/o0100010014538043191.jpg);border-radius:1px;"> <div style="background:rgba(255,255,255,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆緑
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190815/23/keiko-design/5e/6c/j/o0100010014538044750.jpg);border-radius:1px;"> <div style="background:rgba(255,254,252,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
ハート模様のかわいい囲み枠線【8種】
◆手書きハート(白背景)
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190815/22/keiko-design/d9/d5/j/o0100010014538023607.jpg);border-radius:1px;"> <div style="background:rgba(254,249,251,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆手書きハート(ピンク背景)
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190815/23/keiko-design/d4/9e/j/o0100010014538056981.jpg);border-radius:1px;"> <div style="background:rgba(254,249,251,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆舞い上がるハート(白背景)
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/01/keiko-design/df/a9/j/o0080008014538192798.jpg);border-radius:1px;"> <div style="background:rgba(254,249,251,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆舞い上がるハート(ピンク背景)
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/01/keiko-design/8c/97/j/o0080008014538217453.jpg);border-radius:1px;"> <div style="background:rgba(254,249,251,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆ハート(青みピンクぼかし)
改行はshift+エンター。
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190814/15/keiko-design/45/6f/j/o0100010014535589579.jpg);border-radius:1px;"> <div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター。</span></div></div></div>
◆ハート(赤ぼかし)
改行はshift+エンター。
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190814/15/keiko-design/3c/f5/j/o0100010014535607495.jpg);border-radius:1px;"> <div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター。</span></div></div></div>
◆ハート(ピンク背景ぼかし)
改行はshift+エンター。
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190814/16/keiko-design/4b/5e/j/o0100010014535614047.jpg);border-radius:1px;"> <div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター。</span></div></div></div>
◆ハート(黄色背景ぼかし)
改行はshift+エンター。
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190814/16/keiko-design/75/6a/j/o0100010014535621021.jpg);border-radius:1px;"> <div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター。</span></div></div></div>
水玉のかわいい囲み枠線【全9色】
◆濃いピンクの水玉
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/00/keiko-design/72/13/j/o0080008014538129877.jpg);border-radius:1px;"> <div style="background:rgba(255,254,252,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆ピンクの水玉
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/00/keiko-design/38/a2/j/o0080008014538132008.jpg);border-radius:1px;"> <div style="background:rgba(255,254,252,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆くすみピンクの水玉
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/00/keiko-design/a8/6a/j/o0080008014538158764.jpg);border-radius:1px;"> <div style="background:rgba(255,254,252,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆ピンクブラウンの水玉
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/00/keiko-design/06/99/j/o0080008014538156750.jpg);border-radius:1px;"> <div style="background:rgba(255,254,252,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆グレージュの水玉
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/00/keiko-design/3c/9a/j/o0080008014538151878.jpg);border-radius:1px;"> <div style="background:rgba(255,254,252,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆明るめブラウンの水玉
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/00/keiko-design/64/1f/j/o0080008014538148690.jpg);border-radius:1px;"> <div style="background:rgba(255,254,252,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆ブラウンの水玉
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/00/keiko-design/a9/a7/j/o0080008014538148821.jpg);border-radius:1px;"> <div style="background:rgba(255,254,252,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆グレーの水玉
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/00/keiko-design/2b/b3/j/o0080008014538148333.jpg);border-radius:1px;"> <div style="background:rgba(255,254,252,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆ブラックの水玉
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/00/keiko-design/52/7c/j/o0080008014538163912.jpg);border-radius:1px;"> <div style="background:rgba(255,254,252,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
モコモコのツイード風の囲み枠線【2種】
◆赤×白のツイード風
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/01/keiko-design/e5/27/j/o0080008014538210314.jpg);border-radius:1px;"> <div style="background:rgba(254,249,251,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆赤×ピンクのツイード風
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/01/keiko-design/f1/42/j/o0080008014538204033.jpg);border-radius:1px;"> <div style="background:rgba(254,249,251,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
ふんわりチェックの囲み枠線【3種】
◆黒×白チェック
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/01/keiko-design/8b/34/j/o0080008014538210347.jpg);border-radius:1px;"> <div style="background:rgba(255,255,255,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆黒×グレーチェック
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/01/keiko-design/55/08/j/o0080008014538210382.jpg);border-radius:1px;"> <div style="background:rgba(255,255,255,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
◆黒×ピンクチェック
改行はshift+エンター
<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/01/keiko-design/10/01/j/o0080008014538210364.jpg);border-radius:1px;"> <div style="background:rgba(255,255,255,0.9);padding:5px;border-radius:1px;"> <div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br> 改行はshift+エンター</span></div></div></div>
まとめ|かわいいブログにするには統一感がポイント
起業女性に人気の大人かわいいテイストの囲み枠をコピペですぐに使えるように作らせていただきました。
かわいくておしゃれなアメブロを目指す時は、統一感を意識して囲み枠を選んでみてください。
それぞれはかわいいデザインでもテイストがバラバラだとオシャレにはなりません!
洋服を例に考えてみると分かりやすいですよね!
モダンなデザインと、ガーリーなデザイン。
どちらも女性に人気のテイストですが、それぞれ異なるテイストの2つを同時に合わせるとおしゃれではないかな・・・。(笑)
[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]この記事を気に入っていただけたら、はてなブックマークやSNSでシェアしていただけると嬉しいです!![/speech_bubble]
本日はアメブロで使える囲み枠線!かわいい水彩画風イラストというテーマでお役立ち情報をお届けさせていただきました。
本日も最後までお読みいただき、ありがとうございました。
コメント
コメント一覧 (22件)
こんにちは。かわいい枠を探していたら、こちらに着きました♫
早速使わせていただきますね!
出会えてよかったです!
>ひのきりつこ様
こんにちは。
いつもありがとうございます。
沢山使っていただけますと嬉しいです!
これからもどうぞよろしくお願いいたします。
こんにちは。
可愛すぎるぐらい可愛い囲み系を発見してしまい、
早速使わせていただいています。
連絡遅くなりすみませんでした。
また他のにもチョコチョコ変えて
遊んでみるかもしれませんが、
どうぞよろしくお願いします。
お世話になります。
文字数に応じて囲み枠の幅を変えるのは
どうしたらよいですか?
幅一杯枠がなってしまうので
文字数と同じ幅にしたいのです。
囲み枠の検索で発見しました!
素敵なのばかり。早速利用させて頂きます!
ありがとうございます。
すごく可愛いです!!
さっそく使わせていただきました。
ブログがオシャレに変身しました✨
ありがとうございます。
使わせて頂いています。
とても可愛いです。
ありがとうございます。
めちゃくちゃかわいい罫線だったので、速攻使わせていただきました♪
ありがとうございます!!
使わせていただきます!
かわいいですね!
ありがとうございます!
とても可愛いので使わせて頂きます
ありがとうございます
可愛い枠線を探していたらたどり着きました。
使わせていただきました!ありがとうございます。
可愛い囲み枠を探していたら、ここを見つけました!
早速使わせて頂きます(´ε` )♥
ありがとうございます!
とっても可愛いくて一目惚れでした♡
早速使わせていただきます!
ありがとうございます!
全部がとても可愛いくて、迷いましたw
早速、使わせていただきたいと思います。
ありがとうございます♪
可愛い囲み枠を見かけて、探していたらこちらにたどり着きました。
早速、使わさせていただきます!
ありがとうございます。
最近、ステキブログにすべくいろいろな枠を調べていました
すごくかわいい枠線ですね☆
ありがたく使わせていただきます
早速、いろいろと、使わせて頂いています。
可愛いです☆
ありがとうございます。
感謝☆
とても素敵でかわいい罫線ばかりで感動です。
さっそく使わせていただきました。
ありがとうございます
初めまして!
かわいいデザインの囲み枠を探していて、こちらにたどり着きました。
どの枠もかわいいですが、水彩画風のを使用させていただきました♡
素敵な枠を作っていただきありがとうございます!
とってもかわいいです❤️
アメブロで使わせていただきました、ありがとうございます。
使用させていただきましたと、アドレス載せました。
また使用させていただきますね
アメブロで可愛いデザインを探していました。
とても素敵なデザインですね!
早速 使わせていただきますm(_ _)m
可愛いですね
使わせて頂きたく思いますね
可愛いですね
非常に気に入りましたね