アメブロ 囲み枠・可愛い色サンプルたち(10/12更新)

fream

カンタンそうで作ると意外と面倒くさいアメブロの囲み枠。
どうやるのか分からない方も多いようなので、載せておきます!(時々更新しています)

下記に記載されているタグを、アメブロの入力画面「タグ編集エディタ」、新エディタの場合は「HTML表示」にコピペすると、ほら!枠が出来ます。

アメブロ記事の囲み枠サンプル

直線

ココに本文を入れる


使用するタグ

<div style="border: 1px solid#000000; padding: 10px;">ここに文章<br></div><br><br>

バイオレットカラー

ココに本文を入れる


使用するタグ

<div style="border: 1px solid#7f1184; padding: 10px;">ここに文章<br></div><br><br>

ミルクチョコレート

ココに本文を入れる


使用するタグ

<div style="border: 1px solid#e6bfb2; padding: 10px;">ココに本文を入れる<br></div><br><br>

オレンジの直線

ここに本文を入れる


使用するタグ

<div style="background:#fff; padding:10px; border:2px solid #ff8c00;">ここに本文を入れる</div>

ピンクの直線

ここに本文を入れる


使用するタグ

<div style="background:#fff; padding:10px; border:2px solid #FFC0CB;">ここに本文を入れる</div>

山吹色太直線

ココに本文を入れる

使用するタグ
<div style="border: 5px solid #fdd35c; padding: 10px;">ココに本文を入れる<br></div><br><br>

水色の直線と背景

ここに本文を入れる


使用するタグ

<div style="background:#e0ffff; padding:10px; border:2px solid #afeeee;">ここに本文を入れる</div>

ドット

スカイブルー

ココに本文を入れる


使用するタグ

<div style="border: 1px dotted #a0d8ef; padding: 10px;">ココに本文を入れる<br></div>

スカイブルーのドット大

ここに本文を入れる


使用するタグ

<div style="background:#fff; padding:10px; border:2px dotted #0000ff;">ここに本文を入れる</div>

ココに本文を入れる


使用するタグ
<div style="background:#fff; padding:10px; border:2px dotted #000;">ココに本文を入れる</div>

ラベンダー系&背景ピンク

ここに本文を入れる

使用するタグ
<div style="background:#e6e6fa; padding:10px; border:2px dotted #dda0dd;">ここに本文を入れる</div>

角丸

マリンブルードット

ここに文章


使用するタグ

<div style="padding: 10px; border-radius: 10px; border: 2px dotted #4753a2;">ここに文章<br></div>

ペールブルー二重線角丸

ココに本文を入れる


使用するタグ

<div style="padding: 10px; border-radius: 10px; border: 5px double#a1d8e2;">ココに本文を入れる<br></div>

ここに本文を入れる


使用するタグ

<div style="padding: 10px; border: 1px solid #555555; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">ここに本文を入れる</div>

背景付き

ここに文章を入れられます

使用するタグ
<div style="background:#f8f8ff; padding:10px; border:1px solid #b0e0e6; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;">ここに文章を入れる</div>

二重線

ライトピンクの二重線

ここに本文を入れる


使用するタグ

<div style="background:#fff; padding:10px; border:3px double #ffb6c1;">ここに本文を入れる</div>

プラムの二重線

ここに本文を入れる


使用するタグ

<div style="background:#fff; padding:10px; border:3px double #dda0dd;">ここに本文を入れる</div>

ペールターコイズの二重線

ここに本文を入れる


使用するタグ

<div style="background:#fff; padding:10px; border:3px double #afeeee;">ここに本文を入れる</div>

オレンジ

ここに本文を入れる


使用するタグ

<div style="background:#fffaf0; padding:10px; border:3px double #ffa500;">ここに本文を入れる</div>

柔らかいブルー

ここに本文を入れる


使用するタグ

<div style="background:#f8f8ff; padding:10px; border:3px double #6495ed;">ここに本文を入れる</div>

破線

ここに本文を入れる


使用するタグ

<div style="background:#fff; padding:10px; border:1px dashed #000000;">ここに本文を入れる</div>

ダークブルー

ここに本文を入れる


使用するタグ

<div style="background:#fff; padding:10px; border:1px dashed #00008b;">ここに本文を入れる</div>

ターコイズ

ここに本文を入れる


使用するタグ

<div style="background:#fff; padding:10px; border:2px dashed #AFEEEE;">ここに本文を入れる</div>

黄色

ここに本文を入れる


使用するタグ

<div style="background:#fff; padding:10px; border:2px dashed #ffd700;">ここに本文を入れる</div>

見出し付き囲み枠

タイトル
ここに文章を入れられます

使用するタグ
<div style="background: #000; border: 1px solid #a0d8ef; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #000; padding: 10px;">ここに文章を入れられます</div>

ホットピンク

タイトル
ここに文章を入れられます

使用するタグ
<div style="background: #ff1493; border: 1px solid #ff1493; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div>
<div style="border: 1px solid #ff1493; padding: 10px;">ここに本文</div>

スカイブルー

タイトル
ここに文章を入れられます

使用するタグ
<div style="background: #a0d8ef; border: 1px solid #a0d8ef; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #a0d8ef; padding: 10px;">ここに文章を入れられます</div>


タグ解説

<div style="background:#fff; padding:10px; border:2px dashed #AFEEEE;">ここに本文を入れる</div>
backgroundは背景です。
padding…枠と文字の隙間の大きさ
border…線の太さ
dotted…ドット/solid…直線/dashed…破線/double…二重線

#fffなどは色名になります。#808080;←最後[;]で閉じることをお忘れなく。
→色のカラーチャートはこちらからどうぞでも見て参考にして下さい。