---
title: コンテンツ編集画面の表示を変更できますか？
description: コンテンツ定義ごとに、[コンテンツ定義編集]の「CSS」や「JavaScript」を利用して、編集画面の表示を調整できます。  
category: howto
---

import StructuredDataFaqs from '@site/src/components/StructuredDataFaqs';

<StructuredDataFaqs faqs={[
    { question: "コンテンツ編集画面の表示を変更できますか？", answer: "コンテンツ定義ごとに、[コンテンツ定義編集]の「CSS」や「JavaScript」を利用して、編集画面の表示を調整できます。" }
]} />

コンテンツ定義ごとに、[コンテンツ定義編集の詳細設定](/ja/docs/management/content-structure-topics-group/#詳細設定)にある「CSS」や「JavaScript」を利用して、編集画面の表示を調整できます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/493d680651753679294c658971fd05a0.png)

## CSS

設定例：詳細設定の項目を非表示にする
```css
{literal}
#section-topics-edit-details{display:none;}
{/literal}
```

:::tip
詳細な設定方法は、[コンテンツ編集画面の表示を変更する](/ja/docs/tutorials/change-the-display-of-the-content-editing-page/) をご参照ください。
:::

## JavaScript

設定例：ext_1のチェック状態に基づいて、ext_2,ext_3の表示/非表示を切り替える
```js
{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を適用する](/ja/docs/tutorials/apply-css-to-a-kuroco-management-screen-with-the-plugin/)
- [コンテンツ編集画面の表示を変更する](/ja/docs/tutorials/change-the-display-of-the-content-editing-page/)
- [カスタムテンプレートの使い方を教えてください。](/ja/docs/faq/can-i-customize-the-display-of-tables-on-the-conten-editing-screen/)
- [コンテンツ編集画面に公開URLを開くボタンを追加できますか？](/ja/docs/faq/can-i-add-a-button-to-open-the-public-url-from-the-content-edit-screen/)