アメブロで使える囲み枠線!かわいい水彩画風30選

アメブロで使える囲み枠線は、目立たせたりするのにとても便利です。
好きな色で自分らしくしたり、かわいい見た目に整えたり、オシャレにしたりすることができます。

最初は色を整えるだけで満足していたかもしれませんが、他の人とは違うオシャレな囲み枠を使いたいと思ったりしませんか?

  • 普通の囲み枠に飽きてしまった。
  • 他の人とカブるのが嫌だ。
  • もっとかわいい囲み枠を使いたい。

 

そんな時は画像を使った囲み枠がオススメです。

本日はアメブロで使える囲み枠線!かわいい水彩画風イラストというテーマでお役立ち情報をお届けします。

櫻井圭子
画像を使った囲み枠でアメブロをもっとオシャレにしましょう!
私が自分で使いたいと思った本当にかわいいものだけ1点1点心を込めて全て手描きで30種類作りました。

 

 
 
 囲み枠線の使い方

①下記から使いたい囲み枠を選ぶ。
 ↓
②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つを同時に合わせるとおしゃれではないかな・・・。(笑)

櫻井圭子
この記事を気に入っていただけたら、はてなブックマークやSNSでシェアしていただけると嬉しいです!!

 

本日はアメブロで使える囲み枠線!かわいい水彩画風イラストというテーマでお役立ち情報をお届けさせていただきました。

本日も最後までお読みいただき、ありがとうございました。

関連記事

コメント

  1. こんにちは。かわいい枠を探していたら、こちらに着きました♫
    早速使わせていただきますね!
    出会えてよかったです!

  2. こんにちは。
    可愛すぎるぐらい可愛い囲み系を発見してしまい、
    早速使わせていただいています。
    連絡遅くなりすみませんでした。
    また他のにもチョコチョコ変えて
    遊んでみるかもしれませんが、
    どうぞよろしくお願いします。

  3. お世話になります。

    文字数に応じて囲み枠の幅を変えるのは
    どうしたらよいですか?
    幅一杯枠がなってしまうので
    文字数と同じ幅にしたいのです。

  4. 囲み枠の検索で発見しました!
    素敵なのばかり。早速利用させて頂きます!
    ありがとうございます。

PAGE TOP