【アメブロ用の囲み枠】便利なタイトル付き

アメブロでコピペで使える
シンプルな囲み枠のページです

女性の心を掴む♡
女性向けサイトにぴったりな
大人可愛いカラー

ジュジュ

アメブロ・インスタの世界観づくりについて発信しています♬ はじめましての方は▶︎こちら

目次

1. タイトル付枠線
2. タイトル付枠線（ダブルライン）
3. タイトル付枠線（タイトル塗りつぶし）
4. タイトル付枠線（角丸・タイトル塗りつぶし）
5. タブ付タイトル囲み枠
6. 上部タイトル付囲み枠
7. タイトル付背景カラー囲み枠（影付）
8. 上部タイトル背景付囲み枠

アメブロ用のタイトル付き囲み枠

タイトル付囲み枠

1. タイトル付枠線

ここにタイトルここに本文を記入

<fieldset style="border:2px solid #D4C6BD; padding:10px;"><legend><span style="font-size:1em; font-weight:bold;"> ここにタイトル </span></legend>ここに本文を記入</fieldset>

2. タイトル付枠線（ダブルライン）

ここにタイトルここに本文を記入

<fieldset style="border:5px double #D4C6BD; padding:10px;"><legend><span style="font-size:1em; font-weight:bold;"> ここにタイトル </span></legend>ここに本文を記入</fieldset>

3. タイトル付枠線（タイトル塗りつぶし）

ここにタイトルここに本文を記入

<fieldset style="border:2px solid #D4C6BD; padding-top:15px;"><legend><span style="font-size:1em; font-weight:bold; background-color:#D4C6BD; padding:10px; "> ここにタイトル </span></legend>ここに本文を記入</fieldset>
<p> </p>

4. タイトル付枠線（角丸・タイトル塗りつぶし）

ここにタイトルここに本文を記入

<fieldset style="border:2px solid #D4C6BD; padding:15px 10px 10px 10px; border-radius: 7px;"><legend><span style="font-size:1em; font-weight:bold; background-color:#D4C6BD; padding:10px; "> ここにタイトル </span></legend>ここに本文を記入</fieldset>
<p> </p>

5. タブ付タイトル囲み枠

ここにタイトル

ここに本文を記入

<div style="background:#E6EAE6; padding:5px; padding-left:10px;display: inline-block; padding: 3px 20px 1px 15px; margin-bottom:0;"><b>ここにタイトル</b></div>
<div style="background:#fff; padding:10px; border:2px solid #E6EAE6;">ここに本文を記入</div>
<p> </p>

6. 上部タイトル付囲み枠

ここにタイトル

ここに本文を記入

<div style="background:#EFCCCA; padding:5px; padding-left:10px;"><font style="color:#ffffff; font-weight:bold; font-size:1.18em;">ここにタイトル</font></div>
<div style="background:#fff; padding:10px; border:2px solid #EFCCCA;">ここに本文を記入</div>
<p> </p>

7. タイトル付背景カラー囲み枠（影付）

ここにタイトル

ここに本文を記入

<div style="background: #D4C6BD; padding: 10px; border: medium; border-image: none; color: #7f7f7f; font-size: 0.9em; margin-bottom: 0px; margin-left: 0px; box-shadow:3px 3px 3px #999;"><font style="color:#ffffff; font-weight:bold; font-size:1.18em;">ここにタイトル</font></div>
<div style="background:#eee9e6; padding:5px; padding-left:10px;padding-top:10px; box-shadow:3px 3px 3px #999;">
<p>ここに本文を記入</p></div>
<p> </p>

8. 上部タイトル背景付囲み枠

ここにタイトル

ここに本文を記入

<div style="background:#fff; padding:10px; border:3px solid #eee9e6">
<p style="background: #eee9e6; padding: 10px; border: medium; border-image: none; color: #7f7f7f; font-size: 0.9em; margin-bottom: 0px; margin-left: 0px; text-align: center;"><font style="font-weight:bold; font-size:1.18em;">ここにタイトル</font></p>
<p>ここに本文を記入</p></div>
<p> </p>

POINT