【受付中】ブログコンサル

囲み枠 アメブロ

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

2019年8月16日

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

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

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

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

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

櫻井圭子
@ブログコンサル
画像を使った囲み枠でアメブロをもっとオシャレにしましょう!
私が自分で使いたいと思った本当にかわいいものだけ30種類作りました。
コピペで簡単に使えます!

 

「Canva」と「コピペテンプレ」で簡単アメブロカスタマイズ講座
アメブロカスタマイズ講座

 

 

◆囲み枠線の使い方
①下記から使いたい囲み枠を選ぶ。

②HTMLタグをコピーする。

③アメブロのブログを書く画面をHTML表示にして貼り付ける。


※ご自分のブログでコピペして使っていただいて大丈夫です!
改変、無断転載、再配布は禁止です!ご自分の運営しているサイトでこちらの囲み枠のタグをご紹介していただける場合は、必ず引用元のご記入とリンクをお願いいたします。


◆その他の囲み枠はこちら。
おしゃれでかわいい囲み枠をアメブロ記事内で作る方法

 

 

かわいい花びらの囲み枠線【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でシェアしていただけると嬉しいです!!

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

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

ブログコンサル受付中

 難しい言葉を使わない優しい説明が初心者にもわかりやすいと大好評!
ブログを24時間働く営業マンにするセミナーの特性レジュメ付き。

ブログコンサル詳細はこちら

  • この記事を書いた人
  • 最新記事

オススメ

1

こんにちは。ブログコンサルタントの櫻井圭子です。 起業してアメブロを始めると気になってくるのがヘッダーなどのデザイン面ですよね。 記事の中身が重要と分かってはいても、どうしても外見もかわいく整えたい! ...

2

こんにちは。ブログコンサルタントの櫻井圭子です。 読みやすい、見やすい、かわいいアメブロと、そうでないアメブロの違いは何でしょう? お金をかけてプロのデザイナーさんにお願いすればそれは勿論かわいくなり ...

3

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

4

大人気のアメブロで使える囲み枠!! 今日はふんわりぼかしの囲み枠をご紹介させていただきます。 ふんわりとぼかしてかわいく。 暖かいイメージにしたい。 わたあめみたいに柔らかく。 そんなイメージの囲み枠 ...

5

大人気のアメブロで使える囲み枠!! 今日はグラデーションの囲み枠をご紹介させていただきます。 ちょっと大人っぽく。 ゴールドとシルバーの枠をつければゴージャスに。 自然系のブログにも相性が良いグラデー ...

-囲み枠, アメブロ

Copyright© ブロッサムデザイン , 2020 All Rights Reserved.