リファレンス: トグルボタン

Wiki内で使用されているリファレンスページです。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。著者による編集ならばサイトスタッフの許可を必要としません。

クレジット

タイトル: リファレンス: トグルボタン
著者: takion00
作成年: 2026

- _
off on無効有効

このコンポーネントは現在有効です。

1.0.0

これは何?

これはトグルボタンを表現するためのコンポーネントです。

例

- _
off on無効有効

- _
off on無効有効

そしてテキスト

使い方

全てのオプションは小文字の半角英数字で入力してください。全角や漢字、大文字では使用できません。使用しないパラメータは省略可能です。

まず以下のコードをページの上部に1回だけ挿入して下さい:

[[include :scp-jp:user-component:toggle-button-common-css
| dark= /* 任意ダークテーマの時は*と入力 */
]]

以下のコードを使用したい部分に挿入してください:

[[include :scp-jp:user-component:toggle-button
| on= /* 必須有効時のテキスト */
| off= /* 必須無効時のテキスト */
| state= /* 任意デフォルトを有効にするにはfalseと入力 */
]]

トグルスイッチの間に何かを入れたい場合は以下のコードを挿入してください:

[[include :scp-jp:user-component:toggle-button-start
| on= /* 必須有効時のテキスト */
| off= /* 必須無効時のテキスト */
| state= /* 任意デフォルトを有効にするにはfalseと入力 */
]]

[[include :scp-jp:user-component:toggle-button-end]]

カスタマイズ

以下のようにしてカスタマイズすることができます。

:root {
--toggle-button-color: █0, 120, 21540, 160, 255;/* トグルボタンの色 */
--toggle-button-unselect-content: '\F5D5';/* トグルボタンが有効の時の表示(Bootstrap Icons) */
--toggle-button-select-content: '\F5D6';/* トグルボタンが無効の時の表示(Bootstrap Icons) */
}

また、ちょっと頑張れば…

- _
off onこんなことも出来ちゃいます!

▷ コードを開く ▲ 閉じる ▲

FTML

[[div class="theme-changer"]]
[[include :scp-jp:user-component:toggle-button
| on= 出来ちゃいます!
| off= こんなことも
]]
[[/div]]

CSS

:root:has(.theme-changer .unfolded) {
    /* Fix Toggle Button Color */
    --toggle-button-color: 40, 160, 255;
 
    /* Forked from Sigma-10 Dark Mode By stormbreath */
    /* SCP Sigma-9 Dark */
    /* Based on a theme by anqyxr and MechaLynx, readjusted by stormbreath */
 
    /* -------------- OVERALL -------------- */
 
    background: #191919;
 
    body {
        background: #191919 url("https://scp-jp-storage.wdfiles.com/local--files/file%3A9466112-129-6ucw/bodydark.png") repeat;
        color: #aaa9a9;
    }
 
    a {
        color: #F54242;
    }
 
    a:visited {
        color: #D65C85;
    }
 
    .hovertip {
        background: #191919 !important;
        border: 1px solid #808080 !important;
    }
 
    /* -------------- HEADER -------------- */
    div#container-wrap {
        background-image: url("https://scp-jp-storage.wikidot.com/local--files/file%3A9466112-130-3d1n/headerdark.png");
    }
 
    #account-options {
        background: #191919;
    }
 
    #login-status ul a {
        color: #F43434;
    }
 
    #account-options li a:hover {
        color: #aaa9a9;
    }
 
    #search-top-box-form input[type=submit] {
        background-image: linear-gradient(to bottom, #610101, #633, #300);
    }
 
    #search-top-box-form input[type=submit]:focus,
    #search-top-box-form input[type=submit]:hover {
        background-image: linear-gradient(to bottom,#110e0e,#533636,#6c2828);
    }
 
    /* -------------- TOP-BAR -------------- */
    #top-bar a {
        color: #bbb;
        background: transparent;
    }
 
    #top-bar ul li.sfhover a,
    #top-bar ul li:hover a {
        background: #191919;
        color: #A8A8A8;
    }
 
    #top-bar ul li.sfhover ul li a,
    #top-bar ul li:hover ul li a {
        border-top: 1px solid #191919;
    }
 
    #top-bar ul li.sfhover a:hover,
    #top-bar ul li:hover a:hover {
        background: #3d3d3d;
    }
 
    #top-bar ul li ul a,
    #top-bar a:hover {
        color: #A8A8A8;
    }
 
    /* -------------- SIDE-BAR -------------- */
    #side-bar a,
    #side-bar a:visited,
    #side-bar a.newpage,
    #interwiki a,
    #interwiki a:visited,
    #interwiki a.newpage {
        color: #D25B5B;
    }
 
    #side-bar .side-block,
    #side-bar .side-block.media,
    #side-bar .side-block.resources,
    #interwiki .side-block {
        background: #191919;
        border-color: #808080;
        box-shadow: none;
    }
 
    #side-bar .heading,
    #interwiki .heading {
        border-bottom: solid 1px #858585;
        color: #858585;
    }
 
    #interwiki {
        background: transparent;
    }
 
    #interwiki body {
    background-image: unset;
    }
 
    #top-bar .open-menu a {
        background: #161616;
    }
 
    @media (max-width: 767px) {
        #side-bar{
            background-color: #332733;
        }
    }
 
    /* -------------- PAGE ELEMENTS -------------- */
    /* -- Rate Module -- */
    div.page-rate-widget-box .rate-points {
        background-color: #191919 !important;
        border-color: #aaa9a9;
        color: #aaa9a9 !important;
    }
 
    div.page-rate-widget-box .rateup,
    div.page-rate-widget-box .ratedown {
        background-color: #aaa9a9;
        border-top-color: #aaa9a9;
        border-bottom-color: #aaa9a9;
    }
 
    div.page-rate-widget-box .rateup a,
    div.page-rate-widget-box .ratedown a {
        color: #191919;
    }
 
    div.page-rate-widget-box .rateup a:hover,
    div.page-rate-widget-box .ratedown a:hover {
        background: #191919;
        color: #aaa9a9;
    }
 
    div.page-rate-widget-box .cancel {
        background-color: #191919;
        border-color: #aaa9a9;
    }
 
    div.page-rate-widget-box .cancel a {
        color: #aaa9a9;
    }
 
    div.page-rate-widget-box .cancel a:hover {
        background: #aaa9a9;
        color: #191919;
    }
 
    /* -- Info Module -- */
    #page-content .rate-box-with-credit-button {
        background-color: #191919;
        border-color: #aaa9a9;
        border-radius: 5px;
        box-shadow: 1px 1px 3px rgba(0,0,0,.5);
    }
 
    #page-content .creditButton p a {
        border-left-color: #aaa9a9;
    }
 
    .rate-box-with-credit-button .cancel {
    border-radius: 0;
    }
 
    #page-content .creditButton p a:hover {
        color: #F54242;
    }
 
    div.modalbox {
        background: linear-gradient(#0e0e0e 51px, #191919 51px, #191919);
    }
 
    /* -- Other Page Elements -- */
    #page-title,
    .meta-title,
    h1 {
        color: #C03535;
    }
 
    .scp-image-block .scp-image-caption {
        background-color: #191919;
        color: #808080;
    }
 
    blockquote,
    div.blockquote,
    .code,
    .wiki-content-table tr th,
    #lock-info {
        background: #0e0e0e;
        border-color: #aaa9a9;
    }
 
    .yui-navset .yui-content {
        background-color: #0e0e0e;
    }
 
    .yui-navset .yui-nav a,
    .yui-navset .yui-navset-top .yui-nav a {
        background: #373636;
        color: #aaa9a9;
    }
 
    .yui-navset .yui-nav .selected a,
    .yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
    .yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
        background: #6d0000;
    }
    .yui-navset .yui-nav a:hover,
    .yui-navset .yui-nav a:focus {
        background: #4c1717;
    }
 
    /* code highlighter stuff */
    .hl-identifier,
    .hl-code,
    .hl-brackets {
        color: #aaa9a9;
    }
 
    .hl-var {
        color: #b02c7d;
    }
 
    .hl-special,
    .hl-quotes {
        color: #f4750b;
    }
 
    .hl-number,
    .hl-string {
        color: #ff0020;
    }
 
    /* Page Revisions Readability */
    del,
    ins {
        color: #333;
    }
 
    /* -------------- FUNCTIONAL ELEMENTS -------------- */
    .pager span a {
        border: 1px solid #808080;
    }
 
    div.buttons input,
    input.button,
    button,
    file,
    a.button,
    .owindow .button-bar a {
        background-color: #373636;
        color: #aaa9a9;
    }
 
    .owindow {
        background: #1a1a1a;
        border-color: #111111;
    }
 
    .owindow .content img {
        background: transparent !important;
    }
 
    .owindow .title {
        background: #000;
    }
 
    textarea,
    input.text {
        background-color: #1f1f1f;
        color: #aaa9a9;
    }
 
    .change-textarea-size a {
        color: #aaa9a9;
    }
 
    /* -------------- FOOTER  -------------- */
    #license-area {
        color: #aaa9a9;
    }
 
    /* -------------- CREDIT MODULE  -------------- */
    div.rateBox div.rate-box-with-credit-button > div.creditButton > a {
        background: #191919 !important;
        border: 1px solid #aaa9a9 !important;
        padding: 8px;
        border-radius: 5px;
        color: #FFF;
    }
    .rate-box-with-credit-button .creditButton a:hover {
        color: #F54242 !important;
    }
    .rate-box-with-credit-button .creditButton {
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
 
    a.cc.cc-by-sa {
        color: #aaa9a9 !important;
    }
 
    div#u-credit-view div.modalcontainer div.modalbox div.modalbox-title,
    div#u-credit-view div.modalcontainer div.modalbox div.modalbox-title h2 {
        background: linear-gradient(#0e0e0e 51px, #191919 51px, #191919);
        color: #F54242;
    }
}

▼閉じる▼

クレジット

以下の素材およびコンポーネントを使用/参考にしています。

使用素材/コンポーネント

タイトル: Bootstrap Icon
著作権者: Bootstrapチーム
ライセンス: MITライセンス

タイトル: Colmod
著作権者: Boyu12氏
ライセンス: CC 表示 - 継承 3.0 非移植ライセンス

参考コンポーネント

タイトル: チェックボックス
著作権者: R74氏
ライセンス: CC 表示 - 継承 3.0 非移植ライセンス

jp リファレンス

ページリビジョン: 35, 最終更新: 07 Sep 2026 06:36

編集評価 (0) タグディスカッション履歴ファイル印刷サイトツール + オプション

好き放題!!

自主的強制執筆を決意

クレジット

これは何?

例

使い方

カスタマイズ

クレジット

使用素材/コンポーネント

参考コンポーネント