search
LoginSignup
32
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

Idobataで使えるスタイル指定

IdobataではHook経由でHTMLをPOSTすることができる。style属性はストリップされてしまうんだけど、class属性を指定することができる。メッセージ中に使用されることを意図しているかどうかはわからないけど、下のようなスタイルが使えて結構便利だ。

Label

角丸のラベルっぽい感じにできる。label-* classを使うことで色を変えることができる。

<span class="label">ラベル</span>
<span class="label label-important">ラベル</span> <!-- 色を変える -->
class サンプル
.label .label
.label.label-important label-important
.label.label-warning .label-warning
.label.label-success .label-success
.label.label-info .label-info
.label.label-inverse .label-inverse

Badge

左右が半円になっているやつになる。数字を表示するときとかに便利。
background属性を上書きしたいけどbackground-color属性が使われてるので色が反映されない。残念。.badge-importantだけ他のブロックで指定されてるのは別の要素に使ってるのが偶然効いてるだけのようにみえる。

<span class="badge">ラベル</span>
<span class="badge badge-important">ラベル</span> <!-- 色を変える -->
<span class="badge badge-warning">ラベル</span> <!-- バグなのか仕様なのか色は変わらない -->
class サンプル
.badge .badge
.badge.badge-important .badge-important
.badge.badge-warning .badge
.badge.badge-success .badge
.badge.badge-info .badge
.badge.badge-inverse .badge

絵文字

Emoji

:smile:とかは変換されないようなので、imgタグを使うことで実現する。

<img class="emoji" alt=":smile:" src="/images/emoji/smile.png" height="20" width="20">

FontAwesome

FontAwesomeの絵文字が使える。

<i class="fa fa-camera-retro">カメラ</i>

その他

commit-id

コミットIDをmonospaceにするためだけに使われている。

<span class="commit-id">ABCDEF</span>

まとめ

お気に入りのclass指定ですばらしいIdobataライフを!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
32
Help us understand the problem. What are the problem?