はてなブログカスタマイズを0から学ぶ

無料版はてなブログのカスタマイズを学んでいくブログ

みだしに使える囲み枠 付箋風

 

今回は見出しにも使える囲み枠を使ってみたいと思います。

参考にした記事はこちら!

www.moca-memo.com

 

 

ふせん風囲み枠

 

<div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 100%;"> ここに本文を入れます♪</div>

 
このコードをHTML編集画面に貼り付けるとこうなります。↓
ここに本文を入れます♪

 

文章幅に合わせたいときはdisplay:inline-block;を追加。

 

<div style="display:inline-block; border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 100%;">ここに本文を入れます♪</div>

 
このコードをHTML編集画面に貼り付けるとこうなります。↓
ここに本文を入れます♪

 

みだしっぽく上下の余白をへらしてみます。

<div style="display:inline-block; border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 10px; background: #fff; font-size: 100%;">ここに本文を入れます♪</div>

 
そうするとこんな感じ。↓
ここに本文を入れます♪

 

いくつか色を変えてバリエーションを作ってみます。

 

ピンク系

<div style="display:inline-block; border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 10px; background: #efefef; font-size: 100%;">ここに本文を入れます♪</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

ここに本文を入れます♪

 

 

黄色系

<div style="display:inline-block; border: #e9bc00 solid 1px; border-left: #e9bc00 solid 10px; padding: 10px; background: #efefef; font-size: 100%;">ここに本文を入れます♪</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

ここに本文を入れます♪

 

 

緑系

<div style="display:inline-block; border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 10px; background: #efefef; font-size: 100%;">ここに本文を入れます♪</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

ここに本文を入れます♪

 

 

紫系

<div style="display:inline-block; border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 10px; background: #efefef; font-size: 100%;">ここに本文を入れます♪</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

ここに本文を入れます♪

 

 

水色系

<div style="display:inline-block; border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 10px; background: #efefef; font-size: 100%;">ここに本文を入れます♪</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

ここに本文を入れます♪

 

メモ

背景を白にしたい場合はbackground:#fffにする