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

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

まとめ

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

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

Attachments:

image1.png
image2.png
image3.png
insert_widget.png

参照している (4)

Public3309: TeamPage 6.2.45 アップデート情報 Product1450: What's New プラグイン (新着投稿に「New!」を表示)Product1449: コメント数のバッジ表示プラグイン Product1003: 近況アップデートのタグ表示プラグイン

Article: Blog1695 (permalink)
Date: 2020年3月30日; 16時32分34秒日本標準時

Author Name: Takashi Okutsu
Author ID: takashi

背景

ラベル

バッジ

記事本文にラベルやバッジを挿入するには

まとめ

関連記事