テンプレート:MessageBox/doc

解説

{{MessageBox}} (メッセージボックス、Mbox) は、お知らせ用のテンプレートを作成するためのテンプレート（メタテンプレート）です。

クラス、インラインスタイル、および特定のCSSセレクタを指定することで、お好みに合わせて変更することができます。画像や、左側の線、右側に配置できる(ショートカットなどの) テキストを指定・変更することもできます。

このテンプレートはLua言語でプログラムされています。詳細はグローバルLuaモジュールのページ (英語)からご覧いただけます。初期デザインはモジュールの基本CSSを元に変更を加えた簡易版です。簡易版を使わず、このモジュールのデザイン等を変更する場合は、Module:Mboxの該当する部分を削除してください。

必要なファイル

• モジュール:Mbox
• モジュール:Mbox/data
• テンプレート:Mbox (リダイレクトページ)

引数 (パラメーター)

引数を使った例については#使用例をご覧ください。

引数名	説明	必須/任意	初期値
class	.mboxルート要素 (ボックス全体) にクラスを追加します。	任意	—
bordercolor	左端のラインの色を指定します。	任意	CSS準拠
type	CSS変数として定義されたmboxのtypeを呼び出します。左端のラインの色を指定できます。#typeの利用もご覧ください。	任意	—
bgcolor	ボックスの背景色を指定します。	任意	CSS準拠
style	.mboxルート要素にインラインCSSを追加します。	任意	—
image	テキストの左側に表示する画像を指定します。	任意	—
imagewidth	画像の幅を指定します (高さは自動調整されます)。	任意	60px
imagelink	画像のリンク先を指定します (関連するメンテナンス用カテゴリへのリンクなどに使用できます)。指定がない場合は、どこにもリンクされません。	任意	—
header	見出し (上部の太字テキスト) を指定します。概要を端的に示したい場合に使用します。mboxを折り畳み可能とした場合も常に表示されます。	任意	—
text	見出しの下に表示されるメインテキストを指定します。説明や詳細を示すのに使われます。折り畳み可能なmboxでは、折り畳んだときは隠されます。	任意	—
comment	メインテキストの下に表示されるテキスト (下部の小さい文字のテキスト) を指定します。関連するリンクや留意点などを示すのに使われます。折り畳み可能なmboxを折り畳んだときは非表示になります。	任意	—
aside	右側に表示されるテキスト等を指定します。この要素は、淡い灰色の縦線で左側の要素と分けて表示されます。主に、メインテキストで言及されているページへのショートカットを示すのに使われます (コミュニティの方針をまとめたページなど)。折り畳み可能なmboxを折り畳んだときは非表示になります。	任意	—
id	mboxの名前を指定します (例: "Template:Cleanup" に |id=cleanup を加える)。 初期値では、一度「閉じる」ボタンを押すとページの全てのmboxが折り畳まれます。しかし、この値を変更してmboxに名前を付けることで、その調整ができるようになります。	任意	—
collapsed	初期値では、mboxは折り畳まれず、全ての内容が表示されます。この値を変更することで、mboxが折り畳まれた状態で表示されるように設定できます。 (例: |collapsed=true を加えると、mboxは折り畳まれた状態で表示されます。)	任意	—

デザイン

mboxのデザインを変更する場合は、下のCSSコードのひな型をご利用ください。

.mbox {
    /* the background of the entire box */;
    background-color: ;

    /* the border color of the entire box */
    border-color: ;

    /* the border thickness of the entire box */
    border-width: ;

    /* the default thick left border color; note this can be changed from within the template implementations using the "color" parameter */
    border-left-color: ;

    /* the rounded-ness of the corners */;
    border-radius: ;

    /* the baseline font-size of the mbox */
    font-size: ;
}

.mbox__content {
    /* the padding inside the mbox */
    padding: ;
}

.mbox__content__image {
    /* the minimum width of the mbox's image (if bigger, use the "imagewidth" parameter in the template) */
    width: ;

    /* the spacing to the left of the text (i.e., the right of the image) */
    padding-right: ;
}

.mbox__content__text__comment {
    /* the size of the text in the "comment" parameter */
    font-size: ;
}

.mbox__content__aside {
    /* any particular modifications to the "aside" area can go here */

    /* the maximum width of the aside area */
    width: ;
}

.mbox__close {
    /* the appearance of the close symbol here */
}

.mbox__close:after {
    /* overwrite "content" here if you do not wish for the close symbol to be × */
    content: '';
}

.mw-collapsed + .mbox__close {
   /* modifications to the close symbol when the box is closed */
}

.mw-collapsed + .mbox__close:after {
   /* overwrite "content" here if you do not wish for the close symbol to be + when the box is closed */
   content: '';
}

技術情報

• テンプレートの style 引数から、インラインスタイルで.mbox ルート要素にCSSを追加することもできます。

使用例

基本のメッセージボックス

{{MessageBox
|header      = 見出し
|text        = メインテキスト
|id          = test1
}}

は次のようになります…

見出し

メインテキスト

typeの利用

typeを利用する場合は、以下のようにCSS変数を追記してください。

:root {
    --type-important: rgba(200, 0, 0, 0.8);
    --type-moderate: rgba(233, 124, 47, 0.8);
    --type-minor: rgba(241, 197, 37, 0.8);
}

上の例を追加した場合：

{{MessageBox
|header = 見出し
|type   = important
|text   = メインテキスト
|id     = test2
}}

は次のようになります…

見出し

メインテキスト

ご覧のWikiのCSS設定によっては、１つ目の例と同様に表示されることがあります。

画像付きボックス

{{MessageBox
|header     = 見出し
|text       = メインテキスト
|image      = Wiki.png
|imagelink  = :File:Wiki.png
|imagewidth = 50px
|id         = test3
}}

は次のようになります…

見出し

メインテキスト

脇テキスト付き

{{MessageBox
|header = 見出し
|type   = important
|text   = メインテキスト
|aside  = 脇テキスト
|id     = test4
}}

は次のようになります…

見出し

メインテキスト

脇テキスト

スタンダード/初期値スタイル

{{MessageBox
|header  = 見出し
|text    = メインテキスト
|comment = コメント
|image   = Wiki.png
|aside   = 脇テキスト
|id      = standard
}}

は次のようになります…

見出し

メインテキスト

コメント

脇テキスト

ラインの色を指定した例

簡易版では色が変わりません。デザイン変更の際は簡易版についてを確認してください。

{{MessageBox
|header      = 見出し
|text        = メインテキスト
|bordercolor = red
|id          = test1
}}

は次のようになります…

見出し

メインテキスト

関連項目

• w:c:ja.templates:Template:Ambox - ウィキテキストによるメッセージボックステンプレート

脚注

テンプレートWikiの記事

• w:c:ja.templates:テンプレート:MessageBox