TeamPage 6.2.45 のラベルやバッジの装飾

2020/03/30 · · 投稿者 Takashi Okutsu

TeamPage バージョン 6.2.45 から、Bootstrap 風のラベルやバッジの装飾を利用できるようになりましたので、簡単にご紹介します。

背景

ラベルやバッジの例

これまで私が制作してきたプラグインの中には、新着の「New!」アイコン、記事のタグ、コメント数などをラベルやバッジとして表示するものがあります。

しかし、それぞれのプラグインを制作する過程で個別の装飾として組み込んだため、フォントサイズや余白の大きさがまちまちで、統一感がありません。

そこで、すべてのプラグインで共通して利用できる、ラベルやバッジの「雛形」を用意することにしました。

ラベル

ラベルの例

ラベルは、label-sticker というクラス名に primarysuccess などのクラス名か、または redpink などの色のクラス名を組み合わせることで利用できます。

<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 のセキュリティ チェックを通らずにそのままブラウザーの画面に表示されます。ブラウザー クラッシャーなどを埋め込むことも可能ですので、ご注意ください。(社内外の情報共有ツールでそのようなことをするユーザーはいないとは思いますが)

まとめ

以上、ラベルとバッジを簡単にご紹介しました。

今後は、これまで制作したプラグインに順次変更を適用していくとともに、より一層のデザインの向上に努めます。

関連記事

What's New プラグイン (新着投稿に「New!」を表示)

コメント数のバッジ表示プラグイン

近況アップデートのタグ表示プラグイン

Page Top