MENU
カテゴリー

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

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

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

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

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

 

本日はグラデーションのプチゴージャスなアメブロ囲み枠線!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>
 

ピンクグラデーション2

ここに本文を入力する。
改行は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>
 

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

ここに本文を入力する。
改行は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>
 

ピンクグラデーション2

ここに本文を入力する。
改行は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>
 

ピンクグラデーション2

ここに本文を入力する。
改行は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選というテーマでお役立ち情報をお届けさせていただきました。

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

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

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

この記事を書いた人

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

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

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

コメント

コメント一覧 (5件)

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

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

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

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

櫻井圭子@ブログコンサルタント へ返信する コメントをキャンセル

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

目次