【タイトル2】アメブロで使えるコピペ囲み枠

CSSでデザインした コピペで使える タイトル(見出し)のデザインサンプルです。
サンプルタグをコピーして、HTML編集画面に貼り付けてご利用してください。
他の囲み枠デザインはこちら
デザインサンプル
※お好みのカラータイトルをクリックするとサンプルタグへ移動します。(↓)
タイトル 1 | タイトル 5 | タイトル 9 | タイトル13 |
タイトル 2 | タイトル 6 | タイトル10 | タイトル14 |
タイトル 3 | タイトル 7 | タイトル11 | タイトル15 |
タイトル 4 | タイトル 8 | タイトル12 | タイトル16 |
◆タイトル1
【タイトル1】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #161b1a; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル1</div>
◆タイトル2
【タイトル2】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #313d42; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル2</div>
◆タイトル3
【タイトル3】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #52646c; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル3</div>
◆タイトル4
【タイトル4】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #dbe0e3; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル4</div>
◆タイトル5
【タイトル5】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #990000; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル5</div>
◆タイトル6
【タイトル6】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #dc143c; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル6</div>
◆タイトル7
【タイトル7】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #40e0d0; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル7</div>
◆タイトル8
【タイトル8】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #ffff0f; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル8</div>
◆タイトル9
【タイトル9】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #e0ffff; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル9</div>
◆タイトル10
【タイトル10】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #02a4f5; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル10</div>
◆タイトル11
【タイトル11】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #40e0d0; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル11</div>
◆タイトル12
【タイトル12】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #00008b; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル12</div>
◆タイトル13
【タイトル13】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #ff4500; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル13</div>
◆タイトル14
【タイトル14】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #ff6347; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル14</div>
◆タイトル15
【タイトル15】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #ffac63; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル15</div>
◆タイトル16
【タイトル16】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #eee8aa; border-width: 0 0 1px 0; border-style: dotted; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル16</div>