アメブロお役立ち

コピペするだけ!超使えるかわいいアメブロ囲み枠【253種】

アメブロで使えるかわいい囲み枠

コピペするだけで使える、アメブロ用のかわいい囲み枠のまとめです。毎回タグ打つのはめんどいし、自分用にメモしてたものを公開。

色を変えたい時に色コードを調べてその都度変えるのもめんどいんだよな〜〜〜と思ったので、色ごとに全部タグを載せました。使いたい色の、使いたい囲み枠のタグをもうそのまんまコピペするだけで使えます♡やーん、楽チンで嬉しい!(私がw)

使うときは、使いたい囲み枠の下にあるタグを選択しコピーして使ってね。

 

囲み枠の設置の仕方・詳しい使用方法はこちらをどーぞ↓

アメブロ囲み枠の設置方法
スマホでも超簡単!アメブロ囲み枠の設置方法【図説あり】この記事では、アメブロの囲み枠の設置方法をわかりやすくまとめています。 これを囲み枠とかボックスデザインとか呼...

 

色ごとに分かれていますので、使いたい色をメニューから選び、クリックしてご覧ください。↓

色のリクエストはこちらまでー!気が向いたら増やすかもしれません。

 

 

テキスト
<div style="border: 1px solid #ff0000; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #ff0000; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #ff0000; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #ff0000; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px dotted #ff0000; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dotted #ff0000; padding: 20px; border-radius: 10px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #ff0000; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #ff0000; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px double #ff0000; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 5px double #ff0000; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #ec6d71; color: #fff; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #ec6d71; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 8px double #fff; background-color: #ec6d71; color: #fff; padding: 20px; ">テキスト</div>

 

テキスト
<div style="border: 7px double #fff; background-color: #ec6d71; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #ff0000; background-color: #fffafa; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #ff0000; background-color: #fffafa; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #ff0000; border-left: 10px solid #ff0000; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="border: 1px solid #ec6d71; background: #ec6d71; padding: 10px 20px;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #ec6d71; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="border: 1px solid #ec6d71; background: #ec6d71; padding: 10px 20px; border-radius: 10px 10px 0 0;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #ec6d71; padding: 20px; border-radius: 0 0 10px 10px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #ec6d71; padding: 10px 20px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #ec6d71; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #ec6d71; padding: 10px 20px; color: #fff; font-weight: bold; border-radius: 10px 10px 0px 0px;">タイトル</span></div>
<div style="border: 2px solid #ec6d71; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #ec6d71; padding: 10px 15px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #ec6d71; padding: 33px 20px 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #ec6d71; padding: 10px 15px; color: #fff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #ec6d71; padding: 33px 20px 20px; border-radius: 5px;">テキスト</div> 

 

 

ディープピンク

 

テキスト
<div style="border: 1px solid #ff1493; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #ff1493; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #ff1493; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #ff1493; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px dotted #ff1493; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dotted #ff1493; padding: 20px; border-radius: 10px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #ff1493; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #ff1493; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px double #ff1493; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 5px double #ff1493; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #ff1493; color: #fff; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #ff1493; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 8px double #fff; background-color: #ff1493; color: #fff; padding: 20px; ">テキスト</div>

 

テキスト
<div style="border: 7px double #fff; background-color: #ff1493; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #ff1493; background-color: #fff9fc; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #ff1493; background-color: #fff9fc; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #ff1493; border-left: 10px solid #ff1493; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="border: 1px solid #ff1493; background: #ff1493; padding: 10px 20px;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #ff1493; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="border: 1px solid #ff1493; background: #ff1493; padding: 10px 20px; border-radius: 10px 10px 0 0;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #ff1493; padding: 20px; border-radius: 0 0 10px 10px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #ff1493; padding: 10px 20px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #ff1493; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #ff1493; padding: 10px 20px; color: #fff; font-weight: bold; border-radius: 10px 10px 0px 0px;">タイトル</span></div>
<div style="border: 2px solid #ff1493; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #ff1493; padding: 10px 15px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #ff1493; padding: 33px 20px 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #ff1493; padding: 10px 15px; color: #fff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #ff1493; padding: 33px 20px 20px; border-radius: 5px;">テキスト</div> 

 

 

 

ライトピンク

 

テキスト
<div style="border: 1px solid #ffb6c1; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #ffb6c1; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #ffb6c1; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #ffb6c1; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px dotted #ffb6c1; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dotted #ffb6c1; padding: 20px; border-radius: 10px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #ffb6c1; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #ffb6c1; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px double #ffb6c1; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 5px double #ffb6c1; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #ffb6c1; color: #fff; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #ffb6c1; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 8px double #fff; background-color: #ffb6c1; color: #fff; padding: 20px; ">テキスト</div>

 

テキスト
<div style="border: 7px double #fff; background-color: #ffb6c1; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #ffb6c1; background-color: #fef9fb; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #ffb6c1; background-color: #fef9fb; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #ffb6c1; border-left: 10px solid #ffb6c1; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="border: 1px solid #ffb6c1; background: #ffb6c1; padding: 10px 20px;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #ffb6c1; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="border: 1px solid #ffb6c1; background: #ffb6c1; padding: 10px 20px; border-radius: 10px 10px 0 0;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #ffb6c1; padding: 20px; border-radius: 0 0 10px 10px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #ffb6c1; padding: 10px 20px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #ffb6c1; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #ffb6c1; padding: 10px 20px; color: #fff; font-weight: bold; border-radius: 10px 10px 0px 0px;">タイトル</span></div>
<div style="border: 2px solid #ffb6c1; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #ffb6c1; padding: 10px 15px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #ffb6c1; padding: 33px 20px 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #ffb6c1; padding: 10px 15px; color: #fff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #ffb6c1; padding: 33px 20px 20px; border-radius: 5px;">テキスト</div> 

 

 

オレンジ

 

テキスト
<div style="border: 1px solid #f8b500; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #f8b500; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #f8b500; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #f8b500; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px dotted #f8b500; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dotted #f8b500; padding: 20px; border-radius: 10px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #f8b500; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #f8b500; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px double #f8b500; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 5px double #f8b500; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #f8b500; color: #fff; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #f8b500; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 8px double #fff; background-color: #f8b500; color: #fff; padding: 20px; ">テキスト</div>

 

テキスト
<div style="border: 7px double #fff; background-color: #f8b500; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #f8b500; background-color: #fffaf0; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #f8b500; background-color: #fffaf0; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #f8b500; border-left: 10px solid #f8b500; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="border: 1px solid #f8b500; background: #f8b500; padding: 10px 20px;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #f8b500; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="border: 1px solid #f8b500; background: #f8b500; padding: 10px 20px; border-radius: 10px 10px 0 0;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #f8b500; padding: 20px; border-radius: 0 0 10px 10px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #f8b500; padding: 10px 20px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #f8b500; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #f8b500; padding: 10px 20px; color: #fff; font-weight: bold; border-radius: 10px 10px 0px 0px;">タイトル</span></div>
<div style="border: 2px solid #f8b500; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #f8b500; padding: 10px 15px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #f8b500; padding: 33px 20px 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #f8b500; padding: 10px 15px; color: #fff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #f8b500; padding: 33px 20px 20px; border-radius: 5px;">テキスト</div> 

 

 

黄色

 

テキスト
<div style="border: 1px solid #ffec47; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #ffec47; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #ffec47; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #ffec47; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px dotted #ffec47; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dotted #ffec47; padding: 20px; border-radius: 10px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #ffec47; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #ffec47; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px double #ffec47; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 5px double #ffec47; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #ffec47; color: #333333; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #ffec47; color: #333333; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 8px double #fff; background-color: #ffec47; color: #333333; padding: 20px; ">テキスト</div>

 

テキスト
<div style="border: 7px double #fff; background-color: #ffec47; color: #333333; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #ffec47; background-color: #fffff0; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #ffec47; background-color: #fffff0; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #ffec47; border-left: 10px solid #ffec47; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="border: 1px solid #ffec47; background: #ffec47; padding: 10px 20px;"><span style="color: #333333; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #ffec47; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="border: 1px solid #ffec47; background: #ffec47; padding: 10px 20px; border-radius: 10px 10px 0 0;"><span style="color: #333333; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #ffec47; padding: 20px; border-radius: 0 0 10px 10px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #ffec47; padding: 10px 20px; color: #333333; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #ffec47; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #ffec47; padding: 10px 20px; color: #333333; font-weight: bold; border-radius: 10px 10px 0px 0px;">タイトル</span></div>
<div style="border: 2px solid #ffec47; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #ffec47; padding: 10px 15px; color: #333333; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #ffec47; padding: 33px 20px 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #ffec47; padding: 10px 15px; color: #333333; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #ffec47; padding: 33px 20px 20px; border-radius: 5px;">テキスト</div> 

 

 

ライトグリーン

 

テキスト
<div style="border: 1px solid #90ee90; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #90ee90; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #90ee90; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #90ee90; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px dotted #90ee90; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dotted #90ee90; padding: 20px; border-radius: 10px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #90ee90; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #90ee90; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px double #90ee90; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 5px double #90ee90; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #90ee90; color: #fff; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #90ee90; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 8px double #fff; background-color: #90ee90; color: #fff; padding: 20px; ">テキスト</div>

 

テキスト
<div style="border: 7px double #fff; background-color: #90ee90; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #90ee90; background-color: #effff7; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #90ee90; background-color: #effff7; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #90ee90; border-left: 10px solid #90ee90; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="border: 1px solid #90ee90; background: #90ee90; padding: 10px 20px;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #90ee90; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="border: 1px solid #90ee90; background: #90ee90; padding: 10px 20px; border-radius: 10px 10px 0 0;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #90ee90; padding: 20px; border-radius: 0 0 10px 10px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #90ee90; padding: 10px 20px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #90ee90; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #90ee90; padding: 10px 20px; color: #fff; font-weight: bold; border-radius: 10px 10px 0px 0px;">タイトル</span></div>
<div style="border: 2px solid #90ee90; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #90ee90; padding: 10px 15px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #90ee90 ; padding: 33px 20px 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #90ee90; padding: 10px 15px; color: #fff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #90ee90; padding: 33px 20px 20px; border-radius: 5px;">テキスト</div> 

 

 

ターコイズ

 

テキスト
<div style="border: 1px solid #afeeee; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #afeeee; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #afeeee; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #afeeee; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px dotted #afeeee; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dotted #afeeee; padding: 20px; border-radius: 10px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #afeeee; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #afeeee; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px double #afeeee; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 5px double #afeeee; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #afeeee; color: #fff; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #afeeee; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 8px double #fff; background-color: #afeeee; color: #fff; padding: 20px; ">テキスト</div>

 

テキスト
<div style="border: 7px double #fff; background-color: #afeeee; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #afeeee; background-color: #f0ffff; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #afeeee; background-color: #f0ffff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #afeeee; border-left: 10px solid #afeeee; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="border: 1px solid #afeeee; background: #afeeee; padding: 10px 20px;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #afeeee; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="border: 1px solid #afeeee; background: #afeeee; padding: 10px 20px; border-radius: 10px 10px 0 0;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #afeeee; padding: 20px; border-radius: 0 0 10px 10px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #afeeee; padding: 10px 20px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #afeeee; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #afeeee; padding: 10px 20px; color: #fff; font-weight: bold; border-radius: 10px 10px 0px 0px;">タイトル</span></div>
<div style="border: 2px solid #afeeee; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #afeeee; padding: 10px 15px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #afeeee; padding: 33px 20px 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #afeeee; padding: 10px 15px; color: #fff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #afeeee; padding: 33px 20px 20px; border-radius: 5px;">テキスト</div> 

 

 

ロイヤルブルー

 

テキスト
<div style="border: 1px solid #191970; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #191970; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #191970; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #191970; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px dotted #191970; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dotted #191970; padding: 20px; border-radius: 10px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #191970; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #191970; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px double #191970; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 5px double #191970; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #191970; color: #fff; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #191970; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 8px double #fff; background-color: #191970; color: #fff; padding: 20px; ">テキスト</div>

 

テキスト
<div style="border: 7px double #fff; background-color: #191970; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #191970; background-color: #f4f4ff; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #191970; background-color: #f4f4ff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #191970; border-left: 10px solid #191970; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="border: 1px solid #191970; background: #191970; padding: 10px 20px;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #191970; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="border: 1px solid #191970; background: #191970; padding: 10px 20px; border-radius: 10px 10px 0 0;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #191970; padding: 20px; border-radius: 0 0 10px 10px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #191970; padding: 10px 20px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #191970; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #191970; padding: 10px 20px; color: #fff; font-weight: bold; border-radius: 10px 10px 0px 0px;">タイトル</span></div>
<div style="border: 2px solid #191970; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #191970; padding: 10px 15px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #191970; padding: 33px 20px 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #191970; padding: 10px 15px; color: #fff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #191970; padding: 33px 20px 20px; border-radius: 5px;">テキスト</div> 

 

 

ラベンダー

 

テキスト
<div style="border: 1px solid #e6e6fa; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #e6e6fa; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #e6e6fa; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #e6e6fa; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px dotted #e6e6fa; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dotted #e6e6fa; padding: 20px; border-radius: 10px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #e6e6fa; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #e6e6fa; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px double #e6e6fa; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 5px double #e6e6fa; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #e6e6fa; color: #333333; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #e6e6fa; color: #333333; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 8px double #fff; background-color: #e6e6fa; color: #333333; padding: 20px; ">テキスト</div>

 

テキスト
<div style="border: 7px double #fff; background-color: #e6e6fa; color: #333333; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #e6e6fa; background-color: #fcf9ff; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #e6e6fa; background-color: #fcf9ff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #e6e6fa; border-left: 10px solid #e6e6fa; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="border: 1px solid #e6e6fa; background: #e6e6fa; padding: 10px 20px;"><span style="color: #333333; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #e6e6fa; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="border: 1px solid #e6e6fa; background: #e6e6fa; padding: 10px 20px; border-radius: 10px 10px 0 0;"><span style="color: #333333; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #e6e6fa; padding: 20px; border-radius: 0 0 10px 10px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #e6e6fa; padding: 10px 20px; color: #333333; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #e6e6fa; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #e6e6fa; padding: 10px 20px; color: #333333; font-weight: bold; border-radius: 10px 10px 0px 0px;">タイトル</span></div>
<div style="border: 2px solid #e6e6fa; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #e6e6fa; padding: 10px 15px; color: #333333; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #e6e6fa; padding: 33px 20px 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #e6e6fa; padding: 10px 15px; color: #333333; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #e6e6fa; padding: 33px 20px 20px; border-radius: 5px;">テキスト</div> 

 

 

グレー

 

テキスト
<div style="border: 1px solid #d3d3d3; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #d3d3d3; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #d3d3d3; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #d3d3d3; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px dotted #d3d3d3; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dotted #d3d3d3; padding: 20px; border-radius: 10px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #d3d3d3; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #d3d3d3; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px double #d3d3d3; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 5px double #d3d3d3; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #d3d3d3; color: #fff; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #d3d3d3; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 8px double #fff; background-color: #d3d3d3; color: #fff; padding: 20px; ">テキスト</div>

 

テキスト
<div style="border: 7px double #fff; background-color: #d3d3d3; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #d3d3d3; background-color: #fcfcfc; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px dashed #d3d3d3; background-color: #fcfcfc; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #d3d3d3; border-left: 10px solid #d3d3d3; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="border: 1px solid #d3d3d3; background: #d3d3d3; padding: 10px 20px;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #d3d3d3; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="border: 1px solid #d3d3d3; background: #d3d3d3; padding: 10px 20px; border-radius: 10px 10px 0 0;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #d3d3d3; padding: 20px; border-radius: 0 0 10px 10px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #d3d3d3; padding: 10px 20px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #d3d3d3; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #d3d3d3; padding: 10px 20px; color: #fff; font-weight: bold; border-radius: 10px 10px 0px 0px;">タイトル</span></div>
<div style="border: 2px solid #d3d3d3; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #d3d3d3; padding: 10px 15px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #d3d3d3; padding: 33px 20px 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #d3d3d3; padding: 10px 15px; color: #fff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #d3d3d3; padding: 33px 20px 20px; border-radius: 5px;">テキスト</div> 

 

 

ゴールド

 

テキスト
<div style="border: 1px solid #e6b422; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #e6b422; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #e6b422; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 3px solid #e6b422; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px dotted #e6b422; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dotted #e6b422; padding: 20px; border-radius: 10px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #e6b422; padding: 20px;">テキスト</div> 

 

テキスト
<div style="border: 3px dashed #e6b422; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 3px double #e6b422; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 5px double #e6b422; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #e6b422; color: #fff; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: none; background-color: #e6b422; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 8px double #fff; background-color: #e6b422; color: #fff; padding: 20px; ">テキスト</div>

 

テキスト
<div style="border: 7px double #fff; background-color: #e6b422; color: #fff; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 2px dashed #e6b422; background-color: #f8f4e6; padding: 20px;">テキスト</div>

 

テキスト
<div style="border: 2px dashed #e6b422; background-color: #f8f4e6; padding: 20px; border-radius: 10px;">テキスト</div>

 

テキスト
<div style="border: 1px solid #e6b422; border-left: 10px solid #e6b422; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="border: 1px solid #e6b422; background: #e6b422; padding: 10px 20px;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #e6b422; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="border: 1px solid #e6b422; background: #e6b422; padding: 10px 20px; border-radius: 10px 10px 0 0;"><span style="color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #e6b422; padding: 20px; border-radius: 0 0 10px 10px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #e6b422; padding: 10px 20px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #e6b422; padding: 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 30px;"><span style="background: #e6b422; padding: 10px 20px; color: #fff; font-weight: bold; border-radius: 10px 10px 0px 0px;">タイトル</span></div>
<div style="border: 2px solid #e6b422; padding: 20px;">テキスト</div>

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #e6b422; padding: 10px 15px; color: #fff; font-weight: bold;">タイトル</span></div>
<div style="border: 2px solid #e6b422; padding: 33px 20px 20px;">テキスト</div> 

 

タイトル
テキスト
<div style="height: 12px;"><span style="margin-left: 10px; background: #e6b422; padding: 10px 15px; color: #fff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #e6b422; padding: 33px 20px 20px; border-radius: 5px;">テキスト</div> 

 

 

まとめ

いかがでしたでしょうか♡

囲み枠のタグを載せてるサイトやブログはたくさんあるけど、欲しい色を変えるのがめんどいんだよなー!と思ってたので、

色を変えたりサイズを変えたりする手間を省いて、出来るだけコピペだけで使えるよう、たくさんの色と形をそのまんま用意してみました!

使いたい時は、このページをブックマークなどしてご活用ください〜〜〜〜

お役に立てた場合は、シェアも大歓迎╰(*´︶`*)╯♡↓下のボタンからポチッとできます

また、すべてのタグの動作確認は行ってますが、表示されてるのと色が違うよー!とか、誤字脱字があったよー!などのご連絡はこちらからお願いします。

ではでは、お互いブログライフを楽しみましょう〜〜♡

 

アメブロカスタマイズ告知

アメブロをカスタマイズすることで、売上アップや読者数アップ、自分のやる気アップテンションアップをはかり、ブログライフをより楽しみたい個人・自分ビジネス向けの楽チンパッケージプランをお届けしています。

一緒に、アメブロをもっと楽しみませんか♡