---
title: コンテンツ編集画面の表示を変更する
category: コンテンツ管理
---

管理画面のコンテンツ編集画面の表示は、コンテンツ定義の「CSS」を設定することで変更が可能です。  
任意のCSSを記述できるので、非表示にしたり、色を変更したりできます。  
ここでは例としてコンテンツ編集画面の「詳細設定」を消す方法を説明します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/eae282ff4587ec2c07e3eb66c14774e3.jpg)
## 不要な項目を非表示にする
### 1. コンテンツ編集画面にアクセスする
まずは表示を変更したい管理画面のページにアクセスします。  
[コンテンツ定義]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/96fe09be89f3ee84e0dcca1b85ba1680.png)

表示を編集したいコンテンツの[追加]をクリックします。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/e006e378e0ae322af51d8798d117eac8.png)
### 2. 消したい項目のidを確認する
次に消したい項目、ここでは「その他の設定」のidを確認します。  
デベロッパーツールを開くと、下記のように、その他の設定は`id ="section-topics-edit-details"`になっていることがわかります。  
デベロッパーツールは、Google Chromeの場合は[右クリック] -> [検証]で開くことができます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/43bd0119b7f8a7bb08d791bf6073e64e.png)
ちなみにコンテンツ編集画面の各項目は次のidで消すことができます。

|項目   |説明  |
| :--- | :--- |
|詳細設定|section-topics-edit-details|
|タグ|section-topics-edit-tags|
|公開時連携の設定|section-topics-edit-open-tab|
|公開設定|open_date_box|
|GitHub|github_workflow|
|承認ワークフロー|workflow_box|

### 3. コンテンツ定義編集のページにアクセスする 
[コンテンツ定義]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/96fe09be89f3ee84e0dcca1b85ba1680.png)

編集を行うコンテンツの[名前]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/569a46da17374d13357115b63f74212f.png)

コンテンツ定義編集の詳細設定にCSSが確認できます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/bb3d76c1a2e509d88e76f2b28c0b98ce.jpg)

### 4. CSSを入力する
CSSの入力欄ではSmartyを利用しているため、テンプレートのデリミタとして解釈されないよう`{literal} {/literal}`で囲むように記述する必要があります。 
ここでは以下のように入力して、[更新する]をクリックします。

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

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

また、条件分岐も可能です。
例えば、グループIDが**10**のグループのみにCSSを適用したい場合は、以下のように入力できます。

```css
{if '10'|rcms_in_array:$smarty.session.arrGroup_id}
{literal}
#section-topics-edit-details{display:none;}
{/literal}
{/if}
```

## コンテンツ編集画面の表示を確認する
[コンテンツの編集](/ja/docs/management/content-structure-topics/#コンテンツの編集)を参考に記事の編集ページにアクセスすると、下記のように「詳細設定」が非表示になっていることが確認できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a7d648cca06c26710d06f8838b1bbf3e.jpg)

コンテンツ編集画面の表示を変更する方法の説明は以上となります。  

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

## 関連ドキュメント
- [管理画面プラグインを使ってKuroco管理画面に任意のCSSを適用する](/ja/docs/tutorials/apply-css-to-a-kuroco-management-screen-with-the-plugin/)
- [コンテンツ編集画面の表示を変更できますか？](/ja/docs/faq/can-i-modify-the-display-of-the-content-editor-screen/)
- [カスタムテンプレートの使い方を教えてください。](/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/)