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

画像は使用せずに、CSSだけでデザインした コピペで使える タイトル(見出し)のデザインサンプルを用意しました。

icon-hand-o-rightタイトル××のサンプルを確認する
のリンクをクリックすると、一覧ページへ移動します。

スマホからでもご利用いただけますので、是非ご活用ください。
 

 

デザインサンプル

 

◆タイトル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>

 
icon-hand-o-right 【タイトル1】の色サンプルを確認する

 
 

◆タイトル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>

 
icon-hand-o-right タイトル2の色サンプルを確認する

 
 

◆タイトル3

 
【タイトル3】のサンプルタグ(↓)

<div style="padding-left: 8px; border-bottom: 4px double #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル3</div>

 
icon-hand-o-right タイトル3の色サンプルを確認する

 
 

◆タイトル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>

 
icon-hand-o-right タイトル4の色サンプルを確認する

 
 

◆タイトル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>

 
icon-hand-o-right タイトル5の色サンプルを確認する

 
 

◆タイトル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>

 
icon-hand-o-right タイトル6のサンプルを確認する

 
 

◆タイトル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>

 
icon-hand-o-right タイトル7のサンプルを確認する

 
 

◆タイトル8

 
【タイトル8】のサンプルタグ(↓)

<div style="padding: 8px; background: #161b1a; font-weight: bold; font-size: 120%;"><span style="color: #ffffff;">◆タイトル8</span></div>

 
icon-hand-o-right タイトル8の色サンプルを確認する

 
 

◆タイトル9

 
【タイトル9】のサンプルタグ(↓)

<div style="padding: 8px; border: 2px solid #161b1a; background: #F2F2F2; font-weight: bold; font-size: 120%;">◆タイトル9</div>

 
icon-hand-o-right タイトル9の色サンプルを確認する

 
 

◆タイトル10

 
【タイトル10】のサンプルタグ(↓)

<div style="padding: 8px; border: dashed 2px #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル10</div>

 
icon-hand-o-right タイトル10の色サンプルを確認する

 

 
 

◆タイトル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>

 
icon-hand-o-right タイトル11の色サンプルを確認する

 
 

◆タイトル12

 
【タイトル12】のサンプルタグ(↓)

<div style="padding: 8px;border: 5px double #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル12</div>

 
icon-hand-o-right タイトル12の色サンプルを確認する

 
 

◆タイトル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>

 
icon-hand-o-right タイトル13の色サンプルを確認する

 
 

◆タイトル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>

 
icon-hand-o-right タイトル14の色サンプルを確認する

 
 

◆タイトル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>

 
icon-hand-o-right タイトル15の色サンプルを確認する

 
 

◆タイトル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>

 
icon-hand-o-right タイトル16の色サンプルを確認する

 
 

◆タイトル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>

 
icon-hand-o-right タイトル17の色サンプルを確認する

 
 

◆サンプル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>

 
icon-hand-o-right タイトル18の色サンプルを確認する

 
 

◆サンプル19

 
【タイトル19】のサンプルタグ(↓)

<div style="padding: 8px;border:3px solid #161b1a; border-radius:15px; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆サンプル19</div>

 
icon-hand-o-right タイトル19の色サンプルを確認する

 
 

◆サンプル20

 
【タイトル20】のサンプルタグ(↓)

<div style="padding: 8px;border-radius: 15px;border: 3px dotted #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆サンプル20</div>

 
icon-hand-o-right タイトル20の色サンプルを確認する

 
 

◆サンプル21

 
【タイトル21】のサンプルタグ(↓)

<div style="padding: 8px;border-radius: 15px;border: 5px double #161b1a; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆サンプル21</div>

 
icon-hand-o-right タイトル21の色サンプルを確認する