アメブロ記事のタイトル(見出し)を枠で囲む

ブログ記事の タイトルを枠で囲む 方法を解説します。
 
 

 

1.HTMLを表示する

①【HTML表示】をクリックしてください。

 

2.タグをコピーする

② 下記の HTMLタグ をコピーしてください。

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

 

3.タグをペーストする

③ コピーしたタグを本文内にペースト(貼り付け)してください。

 

4.囲み枠の完成

④【通常表示】をクリックしてください。
タイトル枠の完成です。

 

 
 

カスタマイズ方法

 
囲み枠の色や背景、文字の大きさをカスタマイズする方法を解説します。

数値やカラーコードを変更するだけでの簡単な作業ですので、ぜひお試しください。
 
 
icon-pencil 文字の大きさを変更する方法

以下のサンプルタグ内の
font-size: 120%; の数値を変更すると文字の大きさが変わります。


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

 
【変更後】
<div style=" padding: 8px; border:3px solid #161b1a; border-radius:15px; background:#FFFFFF; font-weight: bold; font-size: 150%;">◆タイトル1</div>

 


icon-pencil 枠線の太さを変更する方法

サンプルタグ内の
border: 3px; の数値を変更すると枠線の太さが変わります。


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

 
【変更後】
<div style=" padding: 8px; border: 1px solid #161b1a; border-radius:15px; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル1</div>

 


icon-pencil 枠線の色を変更する方法

サンプルタグ内の
border: 3px solid #161b1a; のカラーコードを変更すると枠線の色が変わります。


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

 
【変更後】
<div style=" padding: 8px; border: 3px solid #dc143c; border-radius:15px; background:#FFFFFF; font-weight: bold; font-size: 120%;">◆タイトル1</div>

 カラーコードの見本はこちら

 


icon-pencil 背景の色を変更する方法

サンプルタグ内の
background: #FFFFFF; のカラーコードを変更すると背景が変わります。


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

 
【変更後】
<div style=" padding: 8px; border: 3px solid #161b1a; border-radius:15px; background: #FBEFFB; font-weight: bold; font-size: 120%;">◆タイトル1</div>

 カラーコードの見本はこちら

 
 
タイトル枠は作れましたか?

お気づきだとは思いますが
タグ内の【◆タイトル】を修正することでタイトルの変更ができます。

 

 

※コピペで使えるサンプルタグをまとめました。
スマホでもご利用いただけます。(↓)