みっちぇの節約レポ

20代主婦がケチケチ生活の中で美容やコスメを楽しむブログ

【デザイン】文字付きBOXと吹き出しBOXサンプル集

f:id:michiru521:20210321211351j:plain

テンプレートパステルノートで使える、文字付き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

チャット風。左向きの吹き出しです。好きな文字を入れられます。

段落をつけるとこんな感じ。
改行するとこんな感じ。

レスポンシブに対応しています。スマホで見てもOK!

チャット風。右向きの吹き出しです。好きな文字を入れられます。

段落をつけるとこんな感じ。
改行するとこんな感じ。

レスポンシブに対応しています。スマホで見てもOK!

左向き吹き出しのタグ

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>

他のデザイン集

枠のサンプル

michhecosume.hateblo.jp

リストのサンプル

michhecosume.hateblo.jp

ラベル付きBOXのサンプル

michhecosume.hateblo.jp

ラベル付きBOXのサンプルその2

michhecosume.hateblo.jp

BOX内にいろいろ入れたときののサンプル

michhecosume.hateblo.jp

いろんな文字装飾のサンプル

michhecosume.hateblo.jp

参考

saruwakakun.com