アメブロ 可愛い囲み線 シンプル囲み線 で囲む方法です
キレイデザイン学・パソコンインストラクターのかなわひろみです
キレイデザイン学のカラーを使った枠線作ってみました。
洗練された寒色系のカラー
グラデーションの枠線をまとめてみました。
グラデーション効果は、視覚にうったえます。
シャープなイメージのブログ向けグラデーションです
アメブロで使うことができる枠線について
【アメブロ編】
作り方は最後にあります
最後までみてください
様々な色のデザインをご用意しています。
グラデーション枠
①
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #00bfff; box-shadow: 2px 2px 4px #00bfff;">ここに本文を入力する。<br>改行はShift+Enter</div>
②
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #00bfff; box-shadow: 2px 2px 4px #00bfff;">ここに本文を入力する。<br>改行はShift+Enter</div>
③
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #00bfff; box-shadow: 2px 2px 4px #00bfff;">ここに本文を入力する。<br>改行はShift+Enter</div>
④
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #f5f5f5; box-shadow: 2px 2px 4px #f5f5f5,">ここに本文を入力する。<br>改行はShift+Enter</div>
⑤
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #f5f5f5; box-shadow: 2px 2px 4px #f5f5f5,">ここに本文を入力する。<br>改行はShift+Enter</div>
⑥
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #f5f5f5; box-shadow: 2px 2px 4px #f5f5f5,">ここに本文を入力する。<br>改行はShift+Enter</div>
⑦
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #00bfff; box-shadow: 2px 2px 4px #00bfff;">ここに本文を入力する。<br>改行はShift+Enter</div>
⑧
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #00bfff; box-shadow: 2px 2px 4px #00bfff;">ここに本文を入力する。<br>改行はShift+Enter</div>
⑨
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #00bfff; box-shadow: 2px 2px 4px #00bfff;">ここに本文を入力する。<br>改行はShift+Enter</div>
⑩
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #00bfff; box-shadow: 2px 2px 4px #00bfff;">ここに本文を入力する。<br>改行はShift+Enter</div>
⑪
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(to top, #96fbc4 0%, #f9f586 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #f5f5f5; box-shadow: 2px 2px 4px #f5f5f5,">ここに本文を入力する。<br>改行はShift+Enter</div>
⑫
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #00bfff; box-shadow: 2px 2px 4px #00bfff;">ここに本文を入力する。<br>改行はShift+Enter</div>
⑬
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #f5f5f5; box-shadow: 2px 2px 4px #f5f5f5;">ここに本文を入力する。<br>改行はShift+Enter</div>
⑭
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #f5f5f5; box-shadow: 2px 2px 4px #f5f5f5;">ここに本文を入力する。<br>改行はShift+Enter</div>
⑮
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #00bfff; box-shadow: 2px 2px 4px #00bfff;">ここに本文を入力する。<br>改行はShift+Enter</div>
⑯
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #00bfff; box-shadow: 2px 2px 4px #00bfff;">ここに本文を入力する。<br>改行はShift+Enter</div>
⑰
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #f5f5f5; box-shadow: 2px 2px 4px #f5f5f5;">ここに本文を入力する。<br>改行はShift+Enter</div>
⑱
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #f5f5f5; box-shadow: 2px 2px 4px #f5f5f5;">ここに本文を入力する。<br>改行はShift+Enter</div>
⑲
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #f5f5f5; box-shadow: 2px 2px 4px #f5f5f5;">ここに本文を入力する。<br>改行はShift+Enter</div>
⑳
改行はShift+Enter
タグ
（コピペして使用してください）
↓
<div style="background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #f5f5f5; box-shadow: 2px 2px 4px #f5f5f5;">ここに本文を入力する。<br>改行はShift+Enter</div>
①HTML表示にしましょう
②ソースを入れましょう
③通常表示に戻しましょう
④出来上がり（必ず、表示が正しいか確認してください）
メリハリ有るブログって素敵!！
可愛く作ってくださいね(*^_^*)
ジャンプしない場合は、こちらからどうぞ
https://www.reservestock.jp/subscribe/94628
◇お問い合わせがございましたら、ご連絡ください。
（カラー診断の受付・お問い合わせも行います
）