TeamPage 6.2.45 のラベルやバッジの装飾
TeamPage バージョン 6.2.45 から、Bootstrap 風のラベルやバッジの装飾を利用できるようになりましたので、簡単にご紹介します。
背景
これまで私が制作してきたプラグインの中には、新着の「New!」アイコン、記事のタグ、コメント数などをラベルやバッジとして表示するものがあります。
しかし、それぞれのプラグインを制作する過程で個別の装飾として組み込んだため、フォントサイズや余白の大きさがまちまちで、統一感がありません。
そこで、すべてのプラグインで共通して利用できる、ラベルやバッジの「雛形」を用意することにしました。
ラベル
ラベルは、label-sticker というクラス名に primary や success などのクラス名か、または red や pink などの色のクラス名を組み合わせることで利用できます。
<span class="label-sticker primary">ラベル (1) </span>
<span class="label-sticker red">ラベル (2) </span>
本当は label-sticker ではなくシンプルな label を使いたかったのですが、既に色々な箇所で使われており、意図しない動作になってしまうため、label-sticker を選択しました。
バッジ
バッジは、badge というクラス名に primary や success などのクラス名か、または red や pink などの色のクラス名を組み合わせることで利用できます。
<span class="badge primary">バッジ (1)</span>
<span class="badge red">バッジ (2)</span>
記事本文にラベルやバッジを挿入するには
TeamPage の記事の本文にラベルやバッジを挿入するには、[ウィジェットの挿入/編集] から [コードやコンテンツの埋め込み] を選択し、表示された入力欄に上図のようなコードを記入します。
ここで入力された内容は、TeamPage のセキュリティ チェックを通らずにそのままブラウザーの画面に表示されます。ブラウザー クラッシャーなどを埋め込むことも可能ですので、ご注意ください。（社内外の情報共有ツールでそのようなことをするユーザーはいないとは思いますが）
まとめ
以上、ラベルとバッジを簡単にご紹介しました。
今後は、これまで制作したプラグインに順次変更を適用していくとともに、より一層のデザインの向上に努めます。
I18N ERROR: @tsiskin#footer_RSS_Feed