【デザイン】定型文用サンプル

定型文に登録して、簡単に呼び出せるようにする。 デザインのサンプル。

その１ピン留め枠

ピン留めのサンプルです。
brで改行するとこんな感じ。

class="pin"で指定します。
divで括っているので、中身ははてな記法やMarkDown記法ではなく、htmlで記入してください。

中身の要素はpタグで括ってください。
くくらなかった場合、余白がうまくつきません。

<h6></h6>でもピン留めになりますが、見出し以外で使いたい時に。

<div class="pin"><p>ここに文字を入れる</p></div>

その２チェックマーク枠

チェックマーク付きサンプル。
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="yodant"で指定します。

divで括っているので、中身ははてな記法やMarkDown記法ではなく、htmlで記入してください。

<div class="yodan"><p>ここに文字を入れる</p></div>

その４吹き出し

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

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

レスポンシブに対応しています。スマホで見ても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>

参考

saruwakakun.com