コンテンツ編集画面の表示を変更できますか？

コンテンツ定義ごとに、コンテンツ定義編集の詳細設定にある「CSS」や「JavaScript」を利用して、編集画面の表示を調整できます。

CSS

設定例：詳細設定の項目を非表示にする

{literal}
#section-topics-edit-details{display:none;}
{/literal}

ヒント

詳細な設定方法は、コンテンツ編集画面の表示を変更する をご参照ください。

JavaScript

設定例：ext_1のチェック状態に基づいて、ext_2,ext_3の表示/非表示を切り替える

{literal}
window.addEventListener('load', function() {
    // チェックボックスの状態に基づいて input 要素の表示を制御する関数
    function toggleInputVisibility() {
        // id="ext_1__1" のチェックボックスを取得
        var checkbox1 = document.getElementById('ext_1__1');
        // input[name="ext_2"] 要素を取得
        var inputText2 = document.querySelector('input[name="ext_2"]');
        if (inputText2) {
            // id="ext_1__1" のチェックボックスがチェックされているか確認
            inputText2.style.display = checkbox1.checked ? '' : 'none'; // チェックされていれば表示、そうでなければ非表示
        }

        // id="ext_1__2" のチェックボックスを取得
        var checkbox2 = document.getElementById('ext_1__2');
        // input[name="ext_3"] 要素を取得
        var inputText3 = document.querySelector('input[name="ext_3"]');
        if (inputText3) {
            // id="ext_1__2" のチェックボックスがチェックされているか確認
            inputText3.style.display = checkbox2.checked ? '' : 'none'; // チェックされていれば表示、そうでなければ非表示
        }
    }

    // ページ読み込み時に一度実行して初期状態を設定
    toggleInputVisibility();

    // チェックボックスの状態変更にも反応するようにイベントリスナーを設定
    document.body.addEventListener('change', function(event) {
        // 変更された要素が id="ext_1__1" または id="ext_1__2" のチェックボックスであるか確認
        if (event.target.id === 'ext_1__1' || event.target.id === 'ext_1__2') {
            toggleInputVisibility();
        }
    });
});
{/literal}

編集時の注意点

• Smartyが有効になっているので、{ }を使用する場合は、{literal} {/literal}で囲むように記述してください。
• 管理画面に関しては独自に設定されたCSS/JavaScriptのバージョンアップ後の動作保証はしておりません。
• CSS/JavaScriptでの調整を起因とした不具合に関しての調査は有償対応になります。

関連ドキュメント

• 管理画面プラグインを使ってKuroco管理画面に任意のCSSを適用する
• コンテンツ編集画面の表示を変更する
• カスタムテンプレートの使い方を教えてください。