アメブロで使える囲み枠と囲み枠の使い方、カスタマイズの仕方

女性の集客専門アドバイザー・増田恵美です。

今日はアメブロで使える囲み枠と囲み枠の使い方です。

やっと作った！

作っていたら楽しくなって作り過ぎ、途中で減らしました(笑)

アメブロをビジネスユースしている人を想定しています。

後半に使い方、カスタマイズについても書いておきました。

ご遠慮なくお好きなものをコピペして持っていってくださいね＾＾

アメブロで使える見出しタグが入る見出し飾りもあります！

アメブロにコピペで使える囲み枠

ピンクの囲み枠

ピンク実線囲み枠（5px）

<div style="background: #ffffff; border: 5px solid #ff9ece; padding: 10px; border-radius: 0px;">ピンク実線囲み枠（5px）</div>

ピンク実線囲み枠（角丸）

<div style="background: #ffffff; border: 5px solid #ff9ece; padding: 10px; border-radius: 15px;">ピンク実線囲み枠（角丸）</div>

ピンク実線囲み枠（3px）

<div style="background: #ffffff; border: 3px solid #ff9ece; padding: 10px; border-radius: 0px;">ピンク実線囲み枠（3px）</div>

ピンク二重囲み枠

<div style="background: #ffffff; border: 4px double #ff9ece; padding: 10px; border-radius: 0px;">ピンク二重囲み枠</div>

ピンクドット囲み枠

<div style="background: #ffffff; border: 3px dotted #ff9ece; padding: 10px; border-radius: 0px;">ピンクドット囲み枠</div>

ピンク大きなドット囲み枠

<div style="background: #ffffff; border: 5px dotted #ff9ece; padding: 10px; border-radius: 0px;">ピンク大きなドット囲み枠</div>

ピンク大きなドット角丸囲み枠

<div style="background: #ffffff; border: 5px dotted #ff9ece; padding: 10px; border-radius: 10px;">ピンク大きなドット角丸囲み枠</div>

水色の囲み枠

水色実線囲み枠（5px）

<div style="background: #ffffff; border: 5px solid #87ceeb; padding: 10px; border-radius: 0px;">水色実線囲み枠（5px）</div>

水色実線囲み枠（角丸）

<div style="background: #ffffff; border: 5px solid #87ceeb; padding: 10px; border-radius: 15px;">水色実線囲み枠（角丸）</div>

水色実線囲み枠（3px）

<div style="background: #ffffff; border: 3px solid #87ceeb; padding: 10px; border-radius: 0px;">水色実線囲み枠（3px）</div>

水色二重囲み枠

<div style="background: #ffffff; border: 4px double #87ceeb; padding: 10px; border-radius: 0px;">水色二重囲み枠</div>

水色ドット囲み枠

<div style="background: #ffffff; border: 3px dotted #87ceeb; padding: 10px; border-radius: 0px;">水色ドット囲み枠</div>

水色大きなドット囲み枠

<div style="background: #ffffff; border: 5px dotted #87ceeb; padding: 10px; border-radius: 0px;">水色大きなドット囲み枠</div>

水色大きなドット角丸囲み枠

<div style="background: #ffffff; border: 5px dotted #87ceeb; padding: 10px; border-radius: 10px;">水色大きなドット角丸囲み枠</div>

ラベンダーの囲み枠

ラベンダー実線囲み枠（5px）

<div style="background: #ffffff; border: 5px solid #a8a8ff; padding: 10px; border-radius: 0px;">ラベンダー実線囲み枠（5px）</div>

ラベンダー実線囲み枠（角丸）

<div style="background: #ffffff; border: 5px solid #a8a8ff; padding: 10px; border-radius: 15px;">ラベンダー実線囲み枠（角丸）</div>

ラベンダー実線囲み枠（3px）

<div style="background: #ffffff;border: 3px solid #a8a8ff; padding: 10px; border-radius: 0px;">ラベンダー実線囲み枠（3px）</div>

ラベンダー二重囲み枠

<div style="background: #ffffff; border: 4px double #a8a8ff; padding: 10px; border-radius: 0px;">ラベンダー二重囲み枠</div>

ラベンダードット囲み枠

<div style="background: #ffffff; border: 3px dotted #a8a8ff; padding: 10px; border-radius: 0px;">ラベンダードット囲み枠</div>

ラベンダー大きなドット囲み枠

<div style="background: #ffffff; border: 5px dotted #a8a8ff; padding: 10px; border-radius: 0px;">ラベンダー大きなドット囲み枠</div>

ラベンダー大きなドット角丸囲み枠

<div style="background: #ffffff; border: 5px dotted #a8a8ff; padding: 10px; border-radius: 10px;">ラベンダー大きなドット角丸囲み枠</div>

ゴールド

ゴールド実線囲み枠（5px）

<div style="background: #ffffff; border: 5px solid #d7c447; padding: 10px; border-radius: 0px;">ゴールド実線囲み枠（5px）</div>

ゴールド実線囲み枠（角丸）

<div style="background: #ffffff; border: 3px solid #d7c447; padding: 10px; border-radius: 15px;">ゴールド実線囲み枠（3px）</div>

ゴールド実線囲み枠（3px）

<div style="background: #ffffff; border: 3px solid #d7c447; padding: 10px; border-radius: 0px;">ゴールド実線囲み枠（3px）</div>

ゴールド二重囲み枠

<div style="background: #ffffff; border: 4px double #d7c447; padding: 10px; border-radius: 0px;">ゴールド二重囲み枠</div>

ゴールドドット囲み枠

<div style="background: #ffffff; border: 3px dotted #d7c447; padding: 10px; border-radius: 0px;">ゴールドドット囲み枠</div>

ゴールド大きなドット囲み枠

<div style="background: ##fffff; border: 5px dotted #d7c447; padding: 10px; border-radius: 0px;">ゴールド大きなドット囲み枠</div>

ゴールド大きなドット角丸囲み枠

<div style="background: #ffffff; border: 5px dotted #d7c447; padding: 10px; border-radius: 10px;">ゴールド大きなドット角丸囲み枠</div>

ネイビー

ネイビー実線囲み枠（5px）

<div style="background: #ffffff; border: 5px solid #000080; padding: 10px; border-radius: 0px;">ネイビー実線囲み枠（5px）</div>

ネイビー実線囲み枠（角丸）

<div style="background: #ffffff; border: 5px solid #000080; padding: 10px; border-radius: 15px;">ネイビー実線囲み枠（角丸）</div>

ネイビー実線囲み枠（3px）

<div style="background: #ffffff; border: 3px solid #000080; padding: 10px; border-radius: 0px;">ネイビー実線囲み枠（3px）</div>

ネイビー二重囲み枠

<div style="background: #ffffff; border: 4px double #000080; padding: 10px; border-radius: 0px;">ネイビー二重囲み枠</div>

ネイビードット囲み枠

<div style="background: #ffffff; border: 3px dotted #000080; padding: 10px; border-radius: 0px;">ネイビードット囲み枠</div>

ネイビー大きなドット囲み枠

<div style="background: #ffffff; border: 5px dotted #000080; padding: 10px; border-radius: 0px;">ネイビー大きなドット囲み枠</div>

ネイビー大きなドット角丸囲み枠

<div style="background: #ffffff; border: 5px dotted #000080; padding: 10px; border-radius: 10px;">ネイビー大きなドット囲み枠</div>

見出し付き囲み枠

◆タイトル◆

タイトル付きピンクの囲み枠

<div style="background: #ff9ece; padding: 5px 10px; color: #ffffff;"><span style="font-weight:bold;">◆タイトル◆</span></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #ff9ece;">タイトル付きピンクの囲み枠</div>

◆タイトル◆

タイトル付きピンクの囲み枠角丸

<div style="background: #ff9ece; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>◆タイトル◆</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #ff9ece; border-radius: 0 0 10px 10px;">タイトル付きピンクの囲み枠角丸</div>

◆タイトル◆

タイトル付き水色の囲み枠

<div style="background: #87ceeb; padding: 5px 10px; color: #ffffff;"><span style="font-weight:bold;">◆タイトル◆</span></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #87ceeb;">タイトル付き水色の囲み枠</div>

◆タイトル◆

タイトル付き水色の囲み枠角丸

<div style="background: #87ceeb; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>◆タイトル◆</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #87ceeb; border-radius: 0 0 10px 10px;">タイトル付き水色の囲み枠角丸</div>

◆タイトル◆

タイトル付きラベンダーの囲み枠

<div style="background: #a8a8ff; padding: 5px 10px; color: #ffffff;"><span style="font-weight:bold;">◆タイトル◆</span></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #a8a8ff;">タイトル付きラベンダーの囲み枠</div>

◆タイトル◆

タイトル付きラベンダーの囲み枠角丸

<div style="background: #a8a8ff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>◆タイトル◆</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #a8a8ff; border-radius: 0 0 10px 10px;">タイトル付きラベンダーの囲み枠角丸</div>

◆タイトル◆

タイトル付きゴールドの囲み枠

<div style="background: #d7c447; padding: 5px 10px; color: #ffffff;"><span style="font-weight:bold;">◆タイトル◆</span></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #d7c447;">タイトル付きゴールドの囲み枠</div>

◆タイトル◆

タイトル付きゴールドの囲み枠角丸

<div style="background: #d7c447; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>◆タイトル◆</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #d7c447; border-radius: 0 0 10px 10px;">タイトル付きゴールドの囲み枠角丸</div>

◆タイトル◆

タイトル付きネイビーの囲み枠

<div style="background: #000080; padding: 5px 10px; color: #ffffff;"><span style="font-weight:bold;">◆タイトル◆</span></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #000080;">タイトル付きネイビーの囲み枠</div>

◆タイトル◆

タイトル付きネイビーの囲み枠角丸

<div style="background: #000080; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>◆タイトル◆</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #000080; border-radius: 0 0 10px 10px;">タイトル付きネイビーの囲み枠角丸</div>

凹凸に見える囲み枠

凸に見えるピンクの囲み枠

<div style="background: #ffffff; border: 10px ridge #ff89c4; padding: 10px; border-radius: 0px;">凸に見えるピンクの囲み枠</div>

凸に見える紫の囲み枠

<div style="background: #ffffff; border: 10px ridge #8989ff; padding: 10px; border-radius: 0px;">凸に見える紫の囲み枠</div>

凸に見えるゴールドの囲み枠

<div style="background: #ffffff; border: 10px ridge #d7c447; padding: 10px; border-radius: 0px;">凸に見えるゴールドの囲み枠</div>

凹んで見えるピンクの囲み枠

<div style="background: #ffffff; border: 10px groove #ff89c4; padding: 10px; border-radius: 0px;">凸んで見えるピンクの囲み枠</div>

凹んで見える紫の囲み枠

<div style="background: #ffffff; border: 10px groove #8989ff; padding: 10px; border-radius: 0px;">凹んで見える紫の囲み枠</div>

凹んで見えるゴールドの囲み枠

<div style="background: #ffffff; border: 10px groove #d7c447; padding: 10px; border-radius: 0px;">凹んで見えるゴールドの囲み枠</div>

アメブロエディタ囲み枠の使い方

１、ブログを書くでアメブロエディタを開きます

２、この記事で使いたい囲み枠を選びます

3、囲み枠の下にあるタグを全てコピーします

4、HTML表示にします

5、コピーしたタグをペーストします

6、通常表示に戻してみましょう

7、選んだ囲み枠が入りました！

8、囲み枠の中に文章を入力してください

普通にエンターキーを押して改行をするとブログが囲み枠だらけになってしまうので、改行はshiftキーを押しながらエンターキーを押すようにしてくださいね。

この記事をアメブロでブックマークしておくと直ぐにアクセスできますよ＾＾

囲み枠のカスタマイズ

こんな色が欲しい、この囲み枠の角が丸かったらいいのに…

自分でカスタマイズできますよ！

ダメだったら戻るボタンで戻ればいいので色々試してみてください。

<div style="background: #ffffff; border: 5px solid #ff9ece; padding: 10px; border-radius: 0px;">ピンク実線囲み枠（5px）</div>

・背景色　background　色番号を変更
・枠と文字の間の余白　padding　px前の数字を変更
・線の太さ　border　px前の数字を変更（数字を大きくすると線が太くなる）
・角の丸み　border-radius　px前の数字を変更（数字が大きくなると丸みが大きくなる）
・実線　solid　下記のドット、破線、二重線などに変更
・ドット　border: dotted

・破線　dashed

・ニ重　border: double
・凹凸　border: ridge
　　　　border: groove
・テキストに合わせる　display:inline-block;　←これを追加すると文章の長さに合わせて小さな枠になります

ピンク囲み枠（テキストに合わせる）

<div style="background: #ffffff; border: 5px solid #ff9ece; display:inline-block; padding: 10px; border-radius: 0px;">ピンク実線囲み枠（5px）</div>

色番号はこちらでお好きな色を選んで色番号を変更してください。

アメブロで使える見出しタグが入る見出し飾りはこちら！

アメブロ囲み枠や見出し飾りをブログの色に合わせる方法はこちら！