【デザイン】文字付きBOXと吹き出しBOXサンプル集
テンプレートパステルノートで使える、文字付きboxサンプル。
- check文字つきのbox
- point文字つきbox
- 余談文字付きbox
- チャット風(吹き出し)box
を紹介しています。
htmlコードをコピーして使用するだけでデザインは反映されます。
記事はmarkdownかhtmlモードで書いてください。
チャット風は左右対応してます。
続きを読むからどうぞ。
ピン+CHECK文字
ピン留めのサンプルです。
br
で改行するとこんな感じ。
class="pin"
で指定します。
div
で括っているので、中身ははてな記法
やMarkDown記法
ではなく、html
で記入してください。
中身の要素はp
タグで括ってください。
くくらなかった場合、余白がうまくつきません。
<div class="pin"><p>ここに文字を入れる</p></div>
チェックマーク+CHECK文字
チェックマーク付きサンプル。br
で改行するとこんな感じ。
段落(pタグ
)を変えるとこんな感じ
class="check"
で指定します。
div
で括っているので、中身ははてな記法
やMarkDown記法
ではなく、html
で記入してください。<div class="check"><p>ここに文字を入れる</p></div>
吹き出しのなかにPOINT文字
ポイントサンプル。br
で改行するとこんな感じ。
段落(pタグ
)を変えるとこんな感じ
class="point"
で指定します。
div
で括っているので、中身ははてな記法
やMarkDown記法
ではなく、html
で記入してください。<div class="point"><p>ここに文字を入れる</p></div>
余談ver
余談サンプル。br
で改行するとこんな感じ。
段落(pタグ
)を変えるとこんな感じ
class="yodan"
で指定します。
div
で括っているので、中身ははてな記法
やMarkDown記法
ではなく、html
で記入してください。<div class="yodan"><p>ここに文字を入れる</p></div>
チャット風(吹き出し)のBOX
左向き吹き出しのタグ
div
タグにclass="speech_bubble_l"
を指定しています。
<div class="speech_bubble_l"> <div class="face_icon"> <img src="アイコン画像のアドレス"> </div> <div class="chat"> <div class="say"> <p>ここに文字を入れる</p> </div> </div> </div>
右向き吹き出しのタグ
div
タグにclass="speech_bubble_r"
を指定しています。
<div class="speech_bubble_r"> <div class="face_icon"> <img src="アイコン画像のアドレス"> </div> <div class="chat"> <div class="say"> <p>ここに文字を入れる</p> </div> </div> </div>
他のデザイン集
枠のサンプル
リストのサンプル
ラベル付きBOXのサンプル
ラベル付きBOXのサンプルその2
BOX内にいろいろ入れたときののサンプル
いろんな文字装飾のサンプル