コピペで使える、役立つ!アメブロで使える囲み枠をまとめました!

画像は使用せずに、CSSだけでデザインした コピペで使える タイトル(見出し)のデザインサンプルを用意しました。
[タイトル××のサンプルを確認する]
のリンクをクリックすると、一覧ページへ移動します。
スマホからでもご利用いただけますので、是非ご活用ください。
デザインサンプル
◆タイトル1
【タイトル1】のサンプルタグ(↓)
<div style="padding-left: 8px; border-color: #161b1a; border-width: 0 0 1px 0; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル1</div>
◆タイトル2
【タイトル2】のサンプルタグ(↓)
<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%;">◆タイトル2</div>
◆タイトル3
【タイトル3】のサンプルタグ(↓)
<div style="padding-left: 8px; border-bottom: 4px double #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル3</div>
◆タイトル4
【タイトル4】のサンプルタグ(↓)
<div style="padding: 8px; border-bottom: 2px solid #161b1a; border-top: 2px solid #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル4</div>
◆タイトル5
【タイトル5】のサンプルタグ(↓)
<div style="padding: 8px; border-color: #161b1a; border-width: 0 0 2px 0; border-style: solid; background: #F2F2F2; font-weight: bold; font-size: 120%;">◆タイトル5</div>
◆タイトル6
【タイトル6】のサンプルタグ(↓)
<div style="padding: 8px; border-color: #161b1a; border-width: 2px 0 0 0; border-style: solid; background: #F2F2F2; font-weight: bold; font-size: 120%;">◆タイトル6</div>
◆タイトル7
【タイトル7】のサンプルタグ(↓)
<div style="padding: 8px; border-bottom: 4px double #161b1a; border-top: 4px double #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル7</div>
◆タイトル8
【タイトル8】のサンプルタグ(↓)
<div style="padding: 8px; background: #161b1a; font-weight: bold; font-size: 120%;"><span style="color: #ffffff;">◆タイトル8</span></div>
◆タイトル9
【タイトル9】のサンプルタグ(↓)
<div style="padding: 8px; border: 2px solid #161b1a; background: #F2F2F2; font-weight: bold; font-size: 120%;">◆タイトル9</div>
◆タイトル10
【タイトル10】のサンプルタグ(↓)
<div style="padding: 8px; border: dashed 2px #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル10</div>
◆タイトル11
【タイトル11】のサンプルタグ(↓)
<div style="padding: 8px; border-color: #161b1a; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル11</div>
◆タイトル12
【タイトル12】のサンプルタグ(↓)
<div style="padding: 8px;border: 5px double #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル12</div>
◆タイトル13
【タイトル13】のサンプルタグ(↓)
<div style="padding: 8px; border-color: #161b1a; border-width: 0 0 0 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル13</div>
◆タイトル14
【タイトル14】のサンプルタグ(↓)
<div style="padding: 8px; border-left: 10px double #161b1a; border-width: 0 0 0 15px; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル14</div>
◆タイトル15
【タイトル15】のサンプルタグ(↓)
<div style="padding: 8px; border-color: #161b1a; border-width: 0 0 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル15</div>
◆タイトル16
【タイトル16】のサンプルタグ(↓)
<div style="padding: 8px; border-left: 10px solid #161b1a; border-bottom: 4px double #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル16</div>
◆タイトル17
【タイトル17】のサンプルタグ(↓)
<div style="padding: 8px; border-left: 10px double #161b1aE; border-bottom: 4px double #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル17</div>
◆サンプル18
【タイトル18】のサンプルタグ(↓)
<div style="padding: 8px; border:3px solid #161b1a;border-radius:15px; background:#161b1a; color: #FFFFFF; font-weight: bold; font-size: 120%;">◆サンプル18</div>
◆サンプル19
【タイトル19】のサンプルタグ(↓)
<div style="padding: 8px;border:3px solid #161b1a; border-radius:15px; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆サンプル19</div>
◆サンプル20
【タイトル20】のサンプルタグ(↓)
<div style="padding: 8px;border-radius: 15px;border: 3px dotted #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆サンプル20</div>
◆サンプル21
【タイトル21】のサンプルタグ(↓)
<div style="padding: 8px;border-radius: 15px;border: 5px double #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆サンプル21</div>