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

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