Blog

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

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

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

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

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

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

 

 

「グラデーションの囲み枠線!綺麗系!ゴージャスなデザインにもGOOD」

 

 

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

②HTMLタグをコピーする。

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


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


◆線の種類や色を変えたい時は、こちらの記事を読んでくださいね。
▶︎おしゃれでかわいい囲み枠をアメブロ記事内で作る方法

 

基本のグラデーション

ピンクグラデーション

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

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

The following two tabs change content below.
櫻井圭子@ブログコンサルタント
ときめくブログの作り方。 夢は必ず叶う!ブログを書いて世界と繋がろう!

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP