MENU
  1. ホーム
  2. アメブロ
  3. 囲み枠
  4. グラデーションの綺麗かわいいアメブロ囲み枠線!24選

グラデーションの綺麗かわいいアメブロ囲み枠線!24選

アメブロ 囲み枠
2020年2月3日

大人気のアメブロで使える囲み枠!!
今日はグラデーションの囲み枠をご紹介させていただきます。

  • ちょっと大人っぽく。
  • ゴールドとシルバーの枠をつければゴージャスに。
  • 自然系のブログにも相性が良いグラデーションも。

そんなイメージの囲み枠です。

櫻井圭子@ブログコンサル
グラデーションの囲み枠は綺麗系のデザインが好きな人に人気!
外枠にゴールドやシルバーの枠線をつけてあげるとジュエリーのような雰囲気になります。
私の大好きな海シリーズのグラデーションも作りました。
コピペして使ってくださいね。

 

本日はグラデーションのプチゴージャスなアメブロ囲み枠線!24選というテーマでお届けします。

 

[wp-svg-icons icon=”point-right” wrap=”span”] 囲み枠線の使い方

①下記から使いたい囲み枠を選ぶ。
　↓
②HTMLタグをコピーする。
　↓
③アメブロのブログを書く画面をHTML表示にして貼り付ける。

 
 
 
[wp-svg-icons icon=”file-2″ wrap=”span”] 線の種類や色を変えたい時は、こちらの記事を読んでくださいね。

[wp-svg-icons icon=”link” wrap=”span”] おしゃれでかわいい囲み枠をアメブロ記事内で作る方法

 

[wp-svg-icons icon=”point-right” wrap=”span”] ご利用にあたって注意ポイント

※ご自分のブログでコピペして使っていただいて大丈夫です！
※報告不要でお使いいただけますが、ご紹介していただけると励みになります♡
※無断転載や、再配布は禁止です！
（この記事のタグをコピペして似たような記事を作ったり、メルマガやLINE＠で配布する事。）

 

 

目次

基本のグラデーション

ピンクグラデーション

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#F9DDE9,#FBF2F6,#F9DDE9);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: none; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

ピンクグラデーション２

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#F5E2DB,#F9F3F3,#F5E2DB);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: none; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

ピンクラベンダー

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(17deg,#FFE9F1,#F0E7FB);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px none; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

パステルグラデーション

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#FFDEE9,#FBF8F9,#E3FFFE);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: none; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

パステルグラデーション２

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#fff0f5,#ffe4b5);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: none; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

パステルグラデーション3

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#e6e6fa,#ffe4e1);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: none; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

ブルー紫

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(62deg,#8EC5FC,#E0C3FC);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: none; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

フレッシュビタミンカラー

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#FBEA89,#FB99B7);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: none; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

海の青

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#8EFCE3,#17CAFF);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: none; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

空の青

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#8EEEFC,#17A1FF);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: none; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

 

枠線付き<ゴールド枠>

ピンクラベンダー

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(17deg,#FFE9F1,#F0E7FB);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #E0CA82;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

ピンクグラデーション

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#F9DDE9,#FBF2F6,#F9DDE9);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #E0CA82;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

ピンクグラデーション２

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#F5E2DB,#F9F3F3,#F5E2DB);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #E0CA82;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

ラベンダーグラデーション

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#F0E7FB,#FBF2F6,#F0E7FB);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #E0CA82;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

クリームグラデーション

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#F5EFE0,#FDFBF6,#F5EFE0);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #E0CA82;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

グリーングラデーション

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#E0F3F5,#F6FDFC,#E0F3F5);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #E0CA82;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

ブルーグラデーション

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#E0ECF5,#F6FAFD,#E0ECF5);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #E0CA82;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

 

枠線付き<シルバー枠>

ピンクラベンダー

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(17deg,#FFE9F1,#F0E7FB);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #DCDDDD;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

ピンクグラデーション

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#F9DDE9,#FBF2F6,#F9DDE9);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #DCDDDD;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

ピンクグラデーション２

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#F5E2DB,#F9F3F3,#F5E2DB);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #DCDDDD;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

ラベンダーグラデーション

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#F0E7FB,#FBF2F6,#F0E7FB);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #DCDDDD;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

クリームグラデーション

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#F5EFE0,#FDFBF6,#F5EFE0);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #DCDDDD;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

グリーングラデーション

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#E0F3F5,#F6FDFC,#E0F3F5);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #DCDDDD;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

ブルーグラデーション

ここに本文を入力する。
改行はShift+Enter
 
<div style="background-image:linear-gradient(#E0ECF5,#F6FAFD,#E0ECF5);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #DCDDDD;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

 

まとめ｜グラデーションの囲み枠は綺麗系のデザインと相性Good

かわいい囲み枠シリーズ!

今回はグラデーションの囲み枠をコピペですぐに使えるように作らせていただきました。

グラデーションの囲み枠のシリーズは、綺麗系のデザインと相性が良いです。

  • 枠線なし・・・綺麗系、自然系にも。
  • ゴールド枠・・・ジュエリーの様な美しさ。姫かわいい。流行感。
  • シルバー枠・・・涼しげなジュエリー感。寒色系のグラデーションと相性が良い。

 

ご自分のブログのテイストに合わせて色を変えて、アメブロの記事内で沢山使ってくださいね。

この記事のurlリンクと一緒に「使ったよー!」と一言アメブロに書いていただけると励みになります!

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

 

本日はグラデーションのプチゴージャスなアメブロ囲み枠線!24選というテーマでお役立ち情報をお届けさせていただきました。

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

アメブロ 囲み枠

この記事が気に入ったら
いいね または フォローしてね！

Follow Me
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

櫻井圭子のアバター 櫻井圭子

世界観を目に見える形にする、伝える、届ける！
起業家、フリーランスのためのブランディングとWEB集客。
【デザイン】と【SEO対策に強いブログの書き方】の両方をカバー出来ることが強みです。

女性らしい綺麗でかわいい世界観作り、ブランディング設計、デザインに特化！

ブランディング／デザイン／WEB集客／SEO

関連記事

コメント

コメント一覧 （5件）

  • はじめまして。
    こんな可愛い、おしゃれな枠を探していました。
    嬉しい!!
    コピペで使わせていただきます。
    ありがとうございます。

    返信

  • はじめまして。
    可愛くてオシャレな囲み枠を探していると結局いつもこちらに落ち着きます！
    HPでぜひ使わせてください(*^^*)♡

    返信

  • ステキな枠がいっぱい。
    私も早速、コピペしてブログで使いたいと思います。ありがとうございました。

    私も自分で作れるようになりたいな。。
    でも、パソコンもiPodもない。。
    スマホしかないの。
    。え～ん。

    返信

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

目次