yuwa design

シンプル囲み枠｜ミルクラベンダー

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

文字の長さに合わせた囲み枠

実　線：solid

<div style="display:inline-block; border:2px solid #B9A7C9; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; border:4px double #B9A7C9; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; border:2px dotted #B9A7C9; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

文字の長さに合わせた角丸囲み枠

実　線：solid

<div style="display:inline-block; border:2px solid #B9A7C9; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; border:4px double #B9A7C9; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; border:2px dotted #B9A7C9; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

アメブロ囲み枠｜種類別・カラー別リンク集

アメブロで使える囲み枠をまとめています。
お好きなデザインからお選びください。

種類別に探す

シンプル囲み枠 › 背景色つき囲み枠 › 見出し囲み枠 › タイトルボックス囲み枠 ›

カラー別に探す

●ピンク系 › ● イエロー・ベージュ系 › ●グリーン系 › ●ブルー系 › ●パープル系 ›

タイトルボックス囲み枠｜ミルクティー

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

ここにタイトル

タイトルボックス付き囲み枠

<div style="padding:10px 18px; background:#DFC69B;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #DFC69B; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルボックス付き囲み枠

<div style="padding:10px 18px; background:#DFC69B; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #DFC69B; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルボックス付き角丸囲み枠

<div style="padding:10px 18px; background:#DFC69B; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #DFC69B; padding:15px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

タイトルラベル付き囲み枠

<div style="display:inline-block; padding:10px 18px; background:#DFC69B;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #DFC69B; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルラベル付き囲み枠

<div style="display:inline-block; padding:10px 18px; background:#DFC69B; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #DFC69B; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルラベル付き角丸囲み枠

<div style="display:inline-block; padding:10px 18px; background:#DFC69B; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #DFC69B; padding:15px; border-top-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

見出し囲み枠｜ミルクティー

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

吹き出し

<div style="padding:10px; background:#DFC69B; margin-bottom:0; border-radius:5px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div><div style="width:0; height:0; border-style:solid; border-width:10px 10px 0 10px; border-color:#DFC69B transparent transparent transparent; margin-left:30px; margin-bottom:20px;"> </div>

左ライン

<div style="border-left:8px solid #DFC69B; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

左と下ライン

<div style="border-left:12px solid #DFC69B; border-bottom:2px solid #DFC69B; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

付箋風

<div style="border:2px solid #DFC69B; border-left:10px solid #DFC69B; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

両端ライン

<div style="border:2px solid #DFC69B; border-left:10px solid #DFC69B; border-right:10px solid #DFC69B; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

上下ライン

<div style="border-top:2px solid #DFC69B; border-bottom:2px solid #DFC69B; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

背景色つき囲み枠｜ミルクティー

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

文字の長さに合わせた囲み枠

実　線：solid

<div style="display:inline-block; background:#F8F1E6; border:2px solid #DFC69B; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; background:#F8F1E6; border:4px double #DFC69B; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; background:#F8F1E6; border:2px dotted #DFC69B; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

文字の長さに合わせた角丸囲み枠

実　線：solid

<div style="display:inline-block; background:#F8F1E6; border:2px solid #DFC69B; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; background:#F8F1E6; border:4px double #DFC69B; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; background:#F8F1E6; border:2px dotted #DFC69B; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

シンプル囲み枠｜ミルクティー

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

文字の長さに合わせた囲み枠

実　線：solid

<div style="display:inline-block; border:2px solid #DFC69B; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; border:4px double #DFC69B; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; border:2px dotted #DFC69B; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

文字の長さに合わせた角丸囲み枠

実　線：solid

<div style="display:inline-block; border:2px solid #DFC69B; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; border:4px double #DFC69B; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; border:2px dotted #DFC69B; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

タイトルボックス囲み枠｜ローズベリー

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

ここにタイトル

タイトルボックス付き囲み枠

<div style="padding:10px 18px; background:#E37994;"><p style="margin:0; font-weight:bold; color:#ffffff;">ここにタイトル</p></div><div style="border:2px solid #E37994; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルボックス付き囲み枠

<div style="padding:10px 18px; background:#E37994; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold; color:#ffffff;">ここにタイトル</p></div><div style="border:2px solid #E37994; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルボックス付き角丸囲み枠

<div style="padding:10px 18px; background:#E37994; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold; color:#ffffff;">ここにタイトル</p></div><div style="border:2px solid #E37994; padding:15px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

タイトルラベル付き囲み枠

<div style="display:inline-block; padding:10px 18px; background:#E37994;"><p style="margin:0; font-weight:bold; color:#ffffff;">ここにタイトル</p></div><div style="border:2px solid #E37994; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルラベル付き囲み枠

<div style="display:inline-block; padding:10px 18px; background:#E37994; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold; color:#ffffff;">ここにタイトル</p></div><div style="border:2px solid #E37994; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルラベル付き角丸囲み枠

<div style="display:inline-block; padding:10px 18px; background:#E37994; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold; color:#ffffff;">ここにタイトル</p></div><div style="border:2px solid #E37994; padding:15px; border-top-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

見出し囲み枠｜ローズベリー

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

吹き出し

<div style="padding:10px; background:#E37994; margin-bottom:0; border-radius:5px; font-weight:bold; color:#ffffff;"><p style="margin:0;">ここに見出し</p></div><div style="width:0; height:0; border-style:solid; border-width:10px 10px 0 10px; border-color:#E37994 transparent transparent transparent; margin-left:30px; margin-bottom:20px;"> </div>

左ライン

<div style="border-left:8px solid #E37994; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

左と下ライン

<div style="border-left:12px solid #E37994; border-bottom:2px solid #E37994; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

付箋風

<div style="border:2px solid #E37994; border-left:10px solid #E37994; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

両端ライン

<div style="border:2px solid #E37994; border-left:10px solid #E37994; border-right:10px solid #E37994; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

上下ライン

<div style="border-top:2px solid #E37994; border-bottom:2px solid #E37994; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

背景色つき囲み枠｜ローズベリー

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

文字の長さに合わせた囲み枠

実　線：solid

<div style="display:inline-block; background:#FFF0F5; border:2px solid #E37994; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; background:#FFF0F5; border:4px double #E37994; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; background:#FFF0F5; border:2px dotted #E37994; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

文字の長さに合わせた角丸囲み枠

実　線：solid

<div style="display:inline-block; background:#FFF0F5; border:2px solid #E37994; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; background:#FFF0F5; border:4px double #E37994; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; background:#FFF0F5; border:2px dotted #E37994; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

シンプル囲み枠｜ローズベリー

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

文字の長さに合わせた囲み枠

実　線：solid

<div style="display:inline-block; border:2px solid #E37994; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; border:4px double #E37994; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; border:2px dotted #E37994; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

文字の長さに合わせた角丸囲み枠

実　線：solid

<div style="display:inline-block; border:2px solid #E37994; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; border:4px double #E37994; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; border:2px dotted #E37994; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>