---
title: 管理画面プラグインを使ってKuroco管理画面に任意のCSSを適用する
category: 
---

[管理画面プラグイン](/ja/docs/management/management-plugin/)では任意のCSSをKurocoの管理画面に適用できます。   
任意のページにCSSを記述できるので、項目を非表示にしたり、色を変更したり、様々な使い方が可能です。  
ここでは例として、フォームの[回答](/ja/docs/management/inquiry-answer/)のページから返信テーブルやボタンを非表示にし、フォームの回答を閲覧専用として利用する方法を紹介します。  

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

## 1. CSSを準備する
まずはページに適用するCSSを作成します。  
ここでは例として下記のように記述したCSSファイルを作成しました。  
Kuroco管理画面のタグのidやクラスはデベロッパーツール等で確認してください。  

```css [nodisplay_reply_items_in_the_form.css]
#table_reply{display:none;}
.buttonbox{display:none;}
h3{display:none;}
```

## 2. CSSをKurocoFilesにアップロードする
次に作成したCSSをKurocoFilesにアップロードします。  

Kurocoの管理画面から[ファイルマネージャー]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/df3ffd66d2969dea2fa1ebb4c8aa244a.png)

KurocoFiles配下にCSSのフォルダを作成し、先ほど作成したCSSファイルをドラッグ&ドロップでアップロードします。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/2aca3607baa01112cee0a7220800637d.png)
アップロードが完了したら、[File Path]のボタンからファイルのPathを確認しておきます。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/72b28dae666a8cfa79af162501fe1376.png)
## 3. 管理画面プラグインを設定する
[環境設定] -> [管理画面プラグイン]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/6cad5f13b5f39854f4fb7f8505d0fc7c.png)

管理画面プラグインのページで[追加する]をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/5ed35fe501b668a6548ced8244bac39e.png)

下記のように入力し、[追加する]をクリックします。

| 設定項目 | 設定 |  |
| :--- | :--- | :--- |
|ステータス|有効||
|プラグイン名|回答を閲覧専用にするプラグイン||
|タイプ|CSS||
|ソース|URL:|/files/user/CSS/nodisplay_reply_items_in_the_form.css|
|対象|ページURI:|/inquiry/inquiry_reply_edit/|
||スロット名:|head|

- SourceのURLにはアップロードしたCSSファイルのPathを入力します。
- TargetのPage UriにはCSSを適用するKuroco管理画面のURLを入力します。<br/>`/management`は省略し、相対URIで指定します。

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

## 4. 表示を確認する
[回答](/ja/docs/management/inquiry-answer/#回答内容の確認と返信)のページを参考にフォームの回答ページにアクセスします。  
下記のようにチュートリアル冒頭のキャプチャの赤枠部分が非表示になっていることが確認できます。  

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

管理画面プラグインを使ってKuroco管理画面に任意のCSSを適用する方法の説明は以上となります。 

## 編集時の注意点
- 管理画面に関しては独自に設定されたCSS/JavaScriptのバージョンアップ後の動作保証はしておりません。
- CSS/JavaScriptでの調整を起因とした不具合に関しての調査は有償対応になります。

## 関連ドキュメント
- [コンテンツ編集画面の表示を変更できますか？](/ja/docs/faq/can-i-modify-the-display-of-the-content-editor-screen/)
- [コンテンツ編集画面の表示を変更する](/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/)
- [管理画面プラグインでCSSを複数ページに適用することはできますか？](/ja/docs/faq/is-it-possible-to-apply-css-to-multiple-pages-using-the-admin-panel-plugin/)