「テンプレート:折り畳みボックス」の版間の差分
細編集の要約なし |
細 マージン削除 |
||
| (同じ利用者による、間の2版が非表示) | |||
| 1行目: | 1行目: | ||
<!-- 折り畳み式テンプレート --> | <!-- 折り畳み式テンプレート --> | ||
<div class="custom-template-expandable-box" style="border: 1px solid gray | <div class="custom-template-expandable-box" style="border: 1px solid gray;" data-opened="{{{opened|False}}}"> | ||
<div class="custom-template-expandable-box-header" style="background-color: {{{header_color|white}}}; display: flex; justify-content: space-between;"> | <div class="custom-template-expandable-box-header" style="background-color: {{{header_color|white}}}; display: flex; justify-content: space-between;"> | ||
<p style="text-align: center; width: 100%; font-size: 120%; font-weight: bold; margin: 0;">{{{title}}}</p> | <p style="text-align: center; width: 100%; font-size: 120%; font-weight: bold; margin: 0;">{{{title}}}</p> | ||
<p class="custom-template-expandable-box-toggle-label" style="flex-shrink: 0; padding: 0 | <p class="custom-template-expandable-box-toggle-label" style="flex-shrink: 0; padding: 0; margin: 0; color: blue; text-decoration: underline; cursor: pointer; width: 4rem; text-align: right;"></p> | ||
</div> | </div> | ||
<div class="custom-template-expandable-box-contents" style="padding: | <div class="custom-template-expandable-box-contents" style="padding: 0rem; background-color: #fcfcfc; "> | ||
{{{contents}}} | {{{contents}}} | ||
</div> | </div> | ||
</div> | </div> | ||
<!-- ここまで --> | <!-- ここまで --> | ||
<noinclude> | <noinclude> | ||
{{documentation}} | {{documentation}} | ||
</noinclude> | </noinclude> | ||
<noinclude> | <noinclude> | ||
<templatedata> | <templatedata> | ||
2025年12月13日 (土) 05:05時点における最新版
使い方
このテンプレートはそのまま使用することもできますが、他のテンプレートのためのメタテンプレートとして作成しています。そのため子テンプレートがある場合はそちらを使用していただくことを強くお勧めしています。
必須パラメーターはtitleのみで、それ以外は任意となっています。
パラメーター一覧
title(必須)
ボックスの見出しに表示するタイトルを指定します。わかりやすい見出しをつけることをお勧めします。
contents(推奨)
この中に実際の本文を格納します。子テンプレートではこの中身を指定できるようになっていることが多いです。改行はそのままでは認識されない可能性もありますので、<br>タグなどで補填いただければ。 この中身はなくても動作はしますが、まったくもって意味がないので中身を含めるようにしてください。
opened(任意)
デフォルトではFalseとなっており、最初から折りたたまれた状態で表示されます。これをTrueに設定すると、デフォルトで開かれた状態となります。なお、技術的な制約上大文字小文字含めて「True」か「False」に一致している必要がありますのでご注意ください。
header_color(任意)
デフォルトではwhiteとなっており、見出しを含むヘッダーの色を変えることができます。CSSとして有効なものであれば何でも入力できます。
- rgb(255, 255, 255) → RGBの値指定も認められます。
- #ff0000 → カラーコードも認められます。
- linear-gradient(90deg, white, red) → おそらくCSSとしては有効なのでグラデーションが付くと思いますが、未検証です。ユーザービリティに欠けるので非推奨です。
- lime → 色の名称もCSSにあれば認められます。ただし細かな色の調整ができないので非推奨です。
使用例
最低限
titleさえあれば動くので最悪これでも動きます。
{{折り畳みボックス|title=見出しのタイトル}}
最小限(実用的)
titleとcontentsを挿入することでいい感じになります。
{{折り畳みボックス|title=信号灯器一覧|contents=[[角型灯器]] | [[初期丸型灯器]] | [[鉄板灯器]] | [[アルミ灯器]] | [[低コスト灯器]]}}
※注意:「|」はパラメーターの区切りを指すため使用できません。代わりに&124;と入力します(&と124の間に#を挿入してください)。
ヘッダーの色を変える
ヘッダーの色を変えることで、目立たせたりすることができるようになります。ただし、原色などを使用するのはできるだけ避けてください。この色が優先されてしまうため、おそらくほかのテーマに変えたときに違和感が発生します。
{{折り畳みボックス|title=見出しのタイトル|contents=非常にみにくいのでこういうのは避けましょう|header_color=#ff0000}}
あらかじめ開かれた状態にする
あまりユースケースが思いつきませんが、どうしても中身を見せたい(デフォルトでは)、でも中身が多すぎて記事を読むには邪魔といったようなケースでは、openedにTrueをつけることであらかじめ開かれた状態にできます。
{{折り畳みボックス|title=これは開かれた状態になるはずです|contents=あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ|opened=True}}
大文字小文字を区別するので、「true」としてしまうと多分開きません。(未検証)
{{折り畳みボックス|title=多分デフォルトで開かれません|contents=あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ|opened=true}}
その他
このテンプレートはWikiPediaで用いられているものを再現したものとなります。WikiPediaではおそらくガジェットで実装しているものと思われますが、こちらはなるべく動作を再現する形でスクラッチ実装したものとなります。
折り畳みボックスに関する不具合が発生した場合はサーバー管理者までお問い合わせください。
WikiPediaで使用されているガジェットの表示・非表示を切り替えられるテンプレートを再現しました。再現率は100%ではないですがテンプレートとして配置することができます。
| パラメーター | 説明 | 型 | 状態 | |
|---|---|---|---|---|
| タイトル | title タイトル | 折り畳みボックスのタイトルを指定します。常時表示されます。
| 文字列 | 必須 |
| 内容 | contents 内容 コンテンツ | 折り畳みボックスに格納するコンテンツを入力します。技術的な制約から、ビジュアルエディターで挿入する場合でもソースコードからコピーして入力してください。中身がなくても作れますが意味がないので入れてください。 | 文字列 | 推奨 |
| デフォルトの開閉 | opened フラグ 開く | Trueに設定すると、デフォルトでこの折り畳みBOXは開いた状態になります。既定値はFalseです。
| ブール値 | 省略可能 |
| ヘッダーの色 | header_color ヘッダーカラー | ヘッダーの色を16進数カラーコードで記載します。CSSに埋め込まれるので認識できればカラーコードじゃなくても構いません。
| 不明 | 省略可能 |