ブログ見出しデザインテンプレまとめ

コピペすればデザイン化されるHTML一覧

便利なのでまとめてみた。

※順次更新予定

枠付き見出しはこちら

<p style="border:solid 3px #fe9ba0; border-radius: 8px; padding:10px;">サンプルテキスト</p>

枠付き見出しはこちら

<p style="border:solid 3px #ff8c00; border-radius: 8px; padding:10px;">サンプルテキスト</p>

背景色付角見出し

<p style="background:#fe9ba0; border-radius: 8px;padding:10px;">背景色見出し</p>

背景色丸角見出し

<p style="background:#ff8c00; border-radius: 8px;padding:10px;">背景色見出し</p>

色違いはこちら

付箋見出しはこちら

<p style="background:#efefef; border-left:solid 8px #fe9ba0; padding:10px;">付箋見出し</p>

読者になるボタン

 <iframe src="https://blog.hatena.ne.jp/booochang/booochang.hatenablog.com/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>

<p>サンプルテキスト<spanstyle="background:linear-gradient(transparent 50%, #FFFF00 0%);">ここにマーカー</span></p>

マーカーを引く場合は上記をコピペ

色を変える場合はこちら

白色

#ffffff
 
黄色
#ffff00
 
灰色
#808080
 
青色
#0000ff
 
赤色
#ff0000
 
橙色
#ff8c00