コピペするだけ！超使えるかわいいアメブロ囲み枠【２５３種】

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

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

 

 

まとめ

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

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

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

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

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

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

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

 

 

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

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

 

制作実例はこちら

　詳細はこちら