大人気のアメブロで使える囲み枠!!
今日はグラデーションの囲み枠をご紹介させていただきます。
- ちょっと大人っぽく。
- ゴールドとシルバーの枠をつければゴージャスに。
- 自然系のブログにも相性が良いグラデーションも。
そんなイメージの囲み枠です。
[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子@ブログコンサル”]グラデーションの囲み枠は綺麗系のデザインが好きな人に人気!
外枠にゴールドやシルバーの枠線をつけてあげるとジュエリーのような雰囲気になります。
私の大好きな海シリーズのグラデーションも作りました。
コピペして使ってくださいね。[/speech_bubble]
本日はグラデーションのプチゴージャスなアメブロ囲み枠線!24選というテーマでお届けします。
①下記から使いたい囲み枠を選ぶ。
↓
②HTMLタグをコピーする。
↓
③アメブロのブログを書く画面をHTML表示にして貼り付ける。
※報告不要でお使いいただけますが、ご紹介していただけると励みになります♡
※無断転載や、再配布は禁止です!
(この記事のタグをコピペして似たような記事を作ったり、メルマガや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リンクと一緒に「使ったよー!」と一言アメブロに書いていただけると励みになります!
[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]この記事を気に入っていただけたら、はてなブックマークやSNSでシェアしていただけると嬉しいです!![/speech_bubble]
本日はグラデーションのプチゴージャスなアメブロ囲み枠線!24選というテーマでお役立ち情報をお届けさせていただきました。
本日も最後までお読みいただき、ありがとうございました。
コメント
コメント一覧 (5件)
はじめまして。
こんな可愛い、おしゃれな枠を探していました。
嬉しい!!
コピペで使わせていただきます。
ありがとうございます。
>さえ様
さえさん、初めまして!コメントありがとうございます!
喜んでいただけてとても嬉しいです♪
沢山使ってくださいね!!
これからもどうぞよろしくお願いします♪
はじめまして。
可愛くてオシャレな囲み枠を探していると結局いつもこちらに落ち着きます!
HPでぜひ使わせてください(*^^*)♡
ステキな枠がいっぱい。
私も早速、コピペしてブログで使いたいと思います。ありがとうございました。
私も自分で作れるようになりたいな。。
でも、パソコンもiPodもない。。
スマホしかないの。
。え~ん。
とても可愛いです。
使わせて頂きます。
ありがとうございます♡