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

CSSでデザインした コピペで使える タイトル(見出し)のデザインサンプルです。

サンプルタグをコピーして、HTML編集画面に貼り付けてご利用してください。
 
icon-clipboard 他の囲み枠デザインはこちら
 

 

デザインサンプル

※お好みのカラータイトルをクリックするとサンプルタグへ移動します。(↓)

タイトル 1 タイトル 5 タイトル 9 タイトル13
タイトル 2 タイトル 6 タイトル10 タイトル14
タイトル 3 タイトル 7 タイトル11 タイトル15
タイトル 4 タイトル 8 タイトル12 タイトル16

 


 
 

◆タイトル1

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

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


 
 

◆タイトル2

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

<div style="padding: 8px; border-color: #313d42; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル2</div>


 
 

◆タイトル3

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

<div style="padding: 8px; border-color: #52646c; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル3</div>


 
 

◆タイトル4

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

<div style="padding: 8px; border-color: #dbe0e3; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル4</div>


 
 

◆タイトル5

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

<div style="padding: 8px; border-color: #990000; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル5</div>


 
 

◆タイトル6

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

<div style="padding: 8px; border-color: #dc143c; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル6</div>


 
 

◆タイトル7

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

<div style="padding: 8px; border-color: #ffa3d1; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル7</div>

&
 
 

◆タイトル8

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

<div style="padding: 8px; border-color: #F8E0F1; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル8</div>


 
 

◆タイトル9

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

<div style="padding: 8px; border-color: #e0ffff; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル9</div>


 
 

◆タイトル10

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

<div style="padding: 8px; border-color: #02a4f5; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル10</div>

 


 
 

◆タイトル11

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

<div style="padding: 8px; border-color: #40e0d0; 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-color: #00008b; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル12</div>


 
 

◆タイトル13

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

<div style="padding: 8px; border-color: #ff4500; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル13</div>


 
 

◆タイトル14

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

<div style="padding: 8px; border-color: #ff6347; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル14</div>


 
 

◆タイトル15

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

<div style="padding: 8px; border-color: #ffac63; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル15</div>


 
 

◆タイトル16

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

<div style="padding: 8px; border-color: #eee8aa; border-width: 2px 2px 2px 15px; border-style: solid; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル16</div>