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

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