Title: 小さな装飾集プラグイン

テキストをボックスで囲んだり、背景を色付けしたり、マーカー線（アンダーライン）を引いたり、バッジやラベルを付けたりして、文章をカラフルに読みやすくするための装飾機能をプラグインとしてパッケージにしました。



インストール



下のリンクをクリックしてプラグインの .zip ファイルをダウンロードします。



サーバー管理者として TeamPage にログインし、サーバーセットアップ > プラグイン ページ下部の [新規プラグインのインストール] で .zip ファイルを選択してアップロードします。

アップロードされると、インストール済みプラグイン一覧に「I18N ERROR: @tinydecorations#plugin_display_name」と表示されます。これは、プラグインの中の日本語ファイルがまだ読み込まれていないために表示されているだけで、TeamPage を再起動して日本語ファイルを読み込むことで解消されます。

[サーバーセットアップ] > [一般] > [サーバー管理] の [TeamPage の再起動] をクリックして TeamPage を再起動させます。TeamPage クラウド環境では再起動が 2 回必要ですので、1 回目の再起動が完了後にもう一度再起動を行ってください。

再起動が完了したら、サーバーセットアップ > プラグイン のインストール済みプラグイン一覧に [小さな装飾集] と表示されることを確認します。

以上でインストールは完了です。

使用できる色



Material Design の 19 色と、Bootstrap に似せた 5 色を使用できます。

Material Design 19色



red, pink, purple, deeppurple, indigo, blue, lightblue, cyan, teal, green, lightgreen, lime, yellow, amber, orange, deeporange, brown, grey, bluegrey

Material Design 19 Colors

Bootstrap っぽい 5 色



primary, info, success, warning (alert), danger



マーカー線（アンダーライン）を引く



テキストに蛍光ペン風のマーカー線（アンダーライン）を引きます。

使い方



二重の半角の角カッコの中に /marker または /underline または /u のコマンド（命令文）を記述し、色名と文章を続けます。

コマンドと色名と文章は半角スペース（空白）で区切ってください。

[[ /marker 色名 ここに文章を記述 ]]
[[ /underline 色名 ここに文章を記述 ]]
[[ /u 色名 ここに文章を記述 ]]


文章内に半角スペースが含まれる場合（特に英文など）は、文章全体を半角のシングルクォーテーション記号またはダブルクォーテーション記号で囲んでください。

色名をシングルクォーテーション記号やダブルクォーテーション記号で囲んでも構いません。

[[ /marker "色名" "ここに文章を記述" ]]
[[ /underline "色名" "ここに文章を記述" ]]
[[ /u "色名" "ここに文章を記述" ]]


色名や文章にパラメーター名を付けて指定することもできます。

[[ /marker color="色名" desc="ここに文章を記述" ]]
[[ /underline color="色名" desc="ここに文章を記述" ]]
[[ /u color="色名" desc="ここに文章を記述" ]]


サンプル



吾輩は[[ /underline "red" "猫である" ]]。[[ /marker "green" "名前" ]]はまだ[[ /u "teal" "無い" ]]。どこで生れたかとんと[[ /u color="orange" desc="見当がつかぬ" ]]。


吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

背景を塗る



テキストの背景に色を付けます。

使い方



二重の半角の角カッコの中に /background または /bg のコマンド（命令文）を記述し、色名と文章を続けます。

コマンドと色名と文章は半角スペース（空白）で区切ってください。

文章内に半角スペースが含まれる場合（特に英文など）は、文章全体を半角のシングルクォーテーション記号またはダブルクォーテーション記号で囲んでください。

色名をシングルクォーテーション記号やダブルクォーテーション記号で囲んでも構いません。

[[ /background "色名" "ここに文章を記述" ]]
[[ /bg "色名" "ここに文章を記述" ]]


色名や文章にパラメーター名を付けて指定することもできます。

[[ /background color="色名" desc="ここに文章を記述" ]]
[[ /bg color="色名" desc="ここに文章を記述" ]]


サンプル



吾輩は[[ /background "green" "猫である" ]]。名前は[[ /bg "yellow" "まだ無い" ]]。どこで生れたかとんと[[ /bg color="pink" desc="見当がつかぬ" ]]。


吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

バッジを表示する



使い方



[[ /badge "色名" "テキスト" ]]
[[ /badge color="色名" desc="テキスト" ]]


サンプル



[[ /badge "red" "123" ]]


123

ラベルを表示する



使い方



[[ /label "色名" "テキスト" ]]
[[ /label color="色名" desc="テキスト" ]]


サンプル



これは[[ /label "pink" "サンプル" ]]です。


これはサンプルです。

ボックスで囲む



第 3 パラメーター（または link= パラメーター）で記事 ID を指定するとリンクとして表示されます。（ただし、お互いがリレーションシップで結び付けられることはありません）

改行をするには「\n」を記入します。二重改行「\n\n」を記入すると、その前後は段落として分かれて表示されます。

普通のボックス (box)



指定された色でボックス内部の背景を塗り、太さが 1 ピクセルの境界線で囲みます。

使い方



[[ /box "色名" "ここに文章を記述" "記事ID,記事ID..." ]]
[[ /box color="色名" desc="ここに文章を記述" link="記事ID,記事ID..." ]]


サンプル



[[ /box lightblue "吾輩わがはいは猫である。名前はまだ無い。\n\nどこで生れたかとんと見当けんとうがつかぬ。" "FAQ900,DocJp68" ]]


吾輩わがはいは猫である。名前はまだ無い。

どこで生れたかとんと見当けんとうがつかぬ。



[[ /box color="lightgreen" desc="坊っちゃん\n\n親譲りの無鉄砲で小供の時から損ばかりしている。" ]]


坊っちゃん

親譲りの無鉄砲で小供の時から損ばかりしている。



境界線を太くしたボックス (fatbox)



指定された色でボックス内部の背景を塗り、太さが 3 ピクセルの境界線で囲みます。

使い方



[[ /fatbox "色名" "ここに文章を記述" "記事ID,記事ID..." ]]
[[ /fatbox color="色名" desc="ここに文章を記述" link="記事ID,記事ID..." ]]


サンプル



[[ /fatbox purple "吾輩わがはいは猫である。名前はまだ無い。\n\nどこで生れたかとんと見当けんとうがつかぬ。" "FAQ900,DocJp68" ]]


吾輩わがはいは猫である。名前はまだ無い。

どこで生れたかとんと見当けんとうがつかぬ。



[[ /fatbox color="brown" desc="坊っちゃん\n\n親譲りの無鉄砲で小供の時から損ばかりしている。" ]]


坊っちゃん

親譲りの無鉄砲で小供の時から損ばかりしている。



境界線だけのボックス (borderbox)



上記の /box の、ボックス内部の背景を塗らないバージョンです。太さが 1 ピクセルの境界線で囲みます。

使い方



[[ /borderbox "色名" "ここに文章を記述" "記事ID,記事ID..." ]]
[[ /borderbox color="色名" desc="ここに文章を記述" link="記事ID,記事ID..." ]]


サンプル



[[ /borderbox "pink" "吾輩わがはいは猫である。名前はまだ無い。\n\nどこで生れたかとんと見当けんとうがつかぬ。" "FAQ900,DocJp68" ]]


吾輩わがはいは猫である。名前はまだ無い。

どこで生れたかとんと見当けんとうがつかぬ。



[[ /borderbox color="deeppurple" desc="坊っちゃん\n\n親譲りの無鉄砲で小供の時から損ばかりしている。" ]]


坊っちゃん

親譲りの無鉄砲で小供の時から損ばかりしている。



太い境界線だけのボックス (fatborderbox)



上記の /fatbox の、ボックス内部の背景を塗らないバージョンです。太さが 3 ピクセルの境界線で囲みます。

使い方



[[ /fatborderbox "色名" "ここに文章を記述" "記事ID,記事ID..." ]]
[[ /fatborderbox color="色名" desc="ここに文章を記述" link="記事ID,記事ID..." ]]


サンプル



[[ /fatborderbox "indigo" "吾輩わがはいは猫である。名前はまだ無い。\n\nどこで生れたかとんと見当けんとうがつかぬ。" "FAQ900,DocJp68" ]]


吾輩わがはいは猫である。名前はまだ無い。

どこで生れたかとんと見当けんとうがつかぬ。



[[ /fatborderbox color="cyan" desc="坊っちゃん\n\n親譲りの無鉄砲で小供の時から損ばかりしている。" ]]


坊っちゃん

親譲りの無鉄砲で小供の時から損ばかりしている。



点線の境界線のボックス (dottedbox)



上記の /fatbox の、境界線を点線にしたバージョンです。

使い方



[[ /dottedbox "色名" "ここに文章を記述" "記事ID,記事ID..." ]]
[[ /dottedbox color="色名" desc="ここに文章を記述" link="記事ID,記事ID..." ]]


サンプル



[[ /dottedbox "lime" "吾輩わがはいは猫である。名前はまだ無い。\n\nどこで生れたかとんと見当けんとうがつかぬ。" "FAQ900,DocJp68" ]]


吾輩わがはいは猫である。名前はまだ無い。

どこで生れたかとんと見当けんとうがつかぬ。



[[ /dottedbox color="amber" desc="坊っちゃん\n\n親譲りの無鉄砲で小供の時から損ばかりしている。" ]]


坊っちゃん

親譲りの無鉄砲で小供の時から損ばかりしている。



破線の境界線のボックス (dashedbox)



上記の /fatbox の、境界線を破線にしたバージョンです。

使い方



[[ /dashedbox "色名" "ここに文章を記述" "記事ID,記事ID..." ]]
[[ /dashedbox color="色名" desc="ここに文章を記述" link="記事ID,記事ID..." ]]


サンプル



[[ /dashedbox "bluegray" "吾輩わがはいは猫である。名前はまだ無い。\n\nどこで生れたかとんと見当けんとうがつかぬ。" "FAQ900,DocJp68" ]]


吾輩わがはいは猫である。名前はまだ無い。

どこで生れたかとんと見当けんとうがつかぬ。



[[ /dashedbox color="deeporange" desc="坊っちゃん\n\n親譲りの無鉄砲で小供の時から損ばかりしている。" ]]


坊っちゃん

親譲りの無鉄砲で小供の時から損ばかりしている。



淡い影付きのボックス (shadowbox)



ボックスの回りにふんわりとした淡い影を落とします。

使い方



[[ /shadowbox "色名" "ここに文章を記述" "記事ID,記事ID..." ]]
[[ /shadowbox color="色名" desc="ここに文章を記述" link="記事ID,記事ID..." ]]


サンプル



[[ /shadowbox "bluegrey" "吾輩わがはいは猫である。名前はまだ無い。\n\nどこで生れたかとんと見当けんとうがつかぬ。" "FAQ900,DocJp68" ]]


吾輩わがはいは猫である。名前はまだ無い。

どこで生れたかとんと見当けんとうがつかぬ。



[[ /shadowbox color="blue" desc="坊っちゃん\n\n親譲りの無鉄砲で小供の時から損ばかりしている。" ]]


坊っちゃん

親譲りの無鉄砲で小供の時から損ばかりしている。



タイトル付きのボックス (titleoutbox)



境界線の上に任意のタイトルを表示します。

Bootstrap 風の色名 (primary, success, info, alert, warning, danger) を指定すると、タイトルの前にアイコンが表示されます。

使い方



[[ /titleoutbox "色名" "タイトル" "ここに文章を記述" "記事ID,記事ID..." ]]
[[ /titleoutbox color="色名" title="タイトル" desc="ここに文章を記述" link="記事ID,記事ID..." ]]


サンプル



[[ /titleoutbox "green" "吾輩は猫である" "吾輩わがはいは猫である。名前はまだ無い。\n\nどこで生れたかとんと見当けんとうがつかぬ。" "FAQ900,DocJp68" ]]


吾輩は猫である

吾輩わがはいは猫である。名前はまだ無い。

どこで生れたかとんと見当けんとうがつかぬ。



[[ /titleoutbox color="danger" title="坊っちゃん" desc="親譲りの無鉄砲で小供の時から損ばかりしている。" ]]


坊っちゃん

親譲りの無鉄砲で小供の時から損ばかりしている。



注意メッセージ表示用のボックス



コマンドとして /primary, /info, /success, /alert, /warning, /dange を指定することで、「メモ」や「注意」などのタイトル付きのメッセージボックスを表示できます。



それぞれの表示されるタイトルは、プラグインの設定で変更できます。

使い方



[[ /primary "ここに文章を記述" "記事ID,記事ID..." ]]
[[ /info "ここに文章を記述" "記事ID,記事ID..." ]]
[[ /success "ここに文章を記述" "記事ID,記事ID..." ]]
[[ /alert "ここに文章を記述" "記事ID,記事ID..." ]]
[[ /warning "ここに文章を記述" "記事ID,記事ID..." ]]
[[ /danger "ここに文章を記述" "記事ID,記事ID..." ]]


サンプル



[[ /primary "あなたにお伝えしたいメッセージがあります。" ]]


重要

あなたにお伝えしたいメッセージがあります。



[[ /info "あなたにお伝えしたいメッセージがあります。" ]]


メモ

あなたにお伝えしたいメッセージがあります。



[[ /success "あなたにお伝えしたいメッセージがあります。" ]]


成功

あなたにお伝えしたいメッセージがあります。



[[ /alert "あなたにお伝えしたいメッセージがあります。" ]]


注意

あなたにお伝えしたいメッセージがあります。



[[ /warning "あなたにお伝えしたいメッセージがあります。" ]]


警告

あなたにお伝えしたいメッセージがあります。



[[ /danger "あなたにお伝えしたいメッセージがあります。" ]]


危険

あなたにお伝えしたいメッセージがあります。



補足情報



TeamPage では、記事の本文欄（リッチテキストエディタ）に特殊な命令文（コマンド）を記述することで様々な機能を呼び出せるようになっています。

命令文は、二重にした半角の角カッコの中に、半角スラッシュに続けて記述します。カッコと命令文との間には半角スペースが必要です。

[[ /命令文 ]]

また、命令文に続けてパラメーターを置くことができます。

[[ /命令文 "パラメーター1" "パラメーター2" "パラメーター3" ... ]]
[[ /命令文 title="タイトル" description="本文ほげほげぴよぴよ" ... ]]

当プラグインの装飾機能を使うには、記事の本文に例えば [[ /underline color="red" desc="本文ほげほげぴよぴよ" ]] と記述するわけですが、これは「『underline』という命令文を、『title』パラメーターと『desc』パラメーター付きで実行しなさい」という意味になります。



Attachments:
color100.png
colors5.png
Article: Download2400 (permalink)
Categories: :DocJp:FAQ
Date: 2020/04/21; 18時18分32秒 JST

Author Name: TeamPage サポート
Author ID: jpbo