コンテンツにスキップ

「テンプレート:折り畳みボックス」の版間の差分

提供:信号機Wiki
WikiPediaで使用されている折り畳み式ボックスのテンプレートを自前で作成(テスト)
 
マージン削除
 
(同じ利用者による、間の9版が非表示)
1行目: 1行目:
<!-- 折り畳み式テンプレート -->
<!-- 折り畳み式テンプレート -->
<div class="custom-template-expandable-box">
<div class="custom-template-expandable-box" style="border: 1px solid gray;"  data-opened="{{{opened|False}}}">
    <div class="custom-template-expandable-box-header">
<div class="custom-template-expandable-box-header" style="background-color: {{{header_color|white}}}; display: flex; justify-content: space-between;">
        <p>{{{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"></p>
<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">
<div class="custom-template-expandable-box-contents" style="padding: 0rem; background-color: #fcfcfc; ">
        {{{contents}}}
{{{contents}}}
    </div>
</div>
</div>
</div>
<!-- ここまで -->
<!-- ここまで -->
 
<noinclude>
{{documentation}}
</noinclude>
<noinclude>
<noinclude>
<templatedata>
<templatedata>
45行目: 47行目:
"type": "boolean",
"type": "boolean",
"default": "False"
"default": "False"
},
"header_color": {
"aliases": [
"ヘッダーカラー"
],
"label": "ヘッダーの色",
"description": "ヘッダーの色を16進数カラーコードで記載します。CSSに埋め込まれるので認識できればカラーコードじゃなくても構いません。",
"example": "#000000 / gray / rgb(255, 128, 0) など",
"default": "silver"
}
}
},
},
"description": "WikiPediaで使用されているガジェットの表示・非表示を切り替えられるテンプレートを再現しました。100%ではないですがテンプレートとして配置することができます。",
"description": "WikiPediaで使用されているガジェットの表示・非表示を切り替えられるテンプレートを再現しました。再現率は100%ではないですがテンプレートとして配置することができます。",
"format": "block"
"format": "block"
}
}
</templatedata>
</templatedata>
</noinclude>
</noinclude>

2025年12月13日 (土) 05:05時点における最新版

{{{title}}}

{{{contents}}}

テンプレートの解説[表示] [編集] [履歴] [キャッシュを破棄]

使い方

このテンプレートはそのまま使用することもできますが、他のテンプレートのためのメタテンプレートとして作成しています。そのため子テンプレートがある場合はそちらを使用していただくことを強くお勧めしています。

必須パラメーターは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=見出しのタイトル}}

見出しのタイトル

{{{contents}}}


最小限(実用的)

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です。

既定
False
True
ブール値省略可能
ヘッダーの色header_color ヘッダーカラー

ヘッダーの色を16進数カラーコードで記載します。CSSに埋め込まれるので認識できればカラーコードじゃなくても構いません。

既定
silver
#000000 / gray / rgb(255, 128, 0) など
不明省略可能