# レコード一覧 背景色変更

**URL:** <https://community.cybozu.dev/t/topic/1121>\
**Category:** kintone 開発相談\
**Created:** [2022 年 11 月 7 日午前 3:52 UTC](https://community.cybozu.dev/t/topic/1121 "2022-11-07T03:52:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2843](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@Legacy\_Account2843](https://community.cybozu.dev/u/Legacy_Account2843)\
**Post date:** [2022 年 11 月 7 日午前 3:52 UTC](https://community.cybozu.dev/t/topic/1121/1 "2022-11-07T03:52:07Z")

</div>

レコード一覧の背景色を指定したいと考えております。 そこで下記の設定を行ったのですが色を変更することができなかったので、アドバイス等お願いいたします。

&nbsp;

&nbsp; &nbsp; kintone.events.on(‘app.record.index.show’, event =\> {  
&nbsp; &nbsp; &nbsp; &nbsp; const elements= kintone.app.getFieldElements(‘test’);  
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; elements.forEach((el)=\> {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.style.backgroundcolor = ‘#ff0000’; &nbsp;&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; });

&nbsp; &nbsp; &nbsp; &nbsp; return event;  
&nbsp; &nbsp; });

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1177](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@Legacy\_Account1177](https://community.cybozu.dev/u/Legacy_Account1177)\
**Post date:** [2022 年 11 月 7 日午前 4:41 UTC](https://community.cybozu.dev/t/topic/1121/2 "2022-11-07T04:41:06Z")

</div>

2点ほど確認です。

①即時関数形式になっていますか？  
投稿されたコード（私が先日投稿したコード）はkintone.events.on(…)以下のみを記載したものなので、全文は

```
(() => {
'use strict';

kintone.events.on(...)
})();

```

である必要があります。

②フィールドコードは「test」ですか？

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2843](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@Legacy\_Account2843](https://community.cybozu.dev/u/Legacy_Account2843)\
**Post date:** [2022 年 11 月 7 日午前 5:36 UTC](https://community.cybozu.dev/t/topic/1121/3 "2022-11-07T05:36:13Z")

</div>

mls-hashimoto様

先日はご親切にご対応いただきありがとうございます。

先日の疑問点（文字色を指定）を理解したので、背景色も同様に利用したら可能なのか調べて行ってみたのですが

反映することができませんでした。今回もご教示くださいますようお願いいたします。

質問の回答を下記にて記載いたします。

■質問回答

> ①即時関数形式になっていますか？

＞＞即時回数形式で記載しております。

下記がその詳細です。

→詳細を記載せず申し訳ございません。

(()=\> {  
&nbsp; ‘use strict’;  
&nbsp; &nbsp; kintone.events.on(‘app.record.index.show’, event =\> {  
&nbsp; &nbsp; &nbsp; &nbsp; const elements= kintone.app.getFieldElements(‘test’);  
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; elements.forEach((el)=\> {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.style.backgroundcolor = ‘#ff0000’; &nbsp;&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; });

&nbsp; &nbsp; &nbsp; &nbsp; return event;  
&nbsp; &nbsp; });  
})();

> ②フィールドコードは「test」ですか？

＞＞testで設定しております。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1177](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@Legacy\_Account1177](https://community.cybozu.dev/u/Legacy_Account1177)\
**Post date:** [2022 年 11 月 7 日午前 5:38 UTC](https://community.cybozu.dev/t/topic/1121/4 "2022-11-07T05:38:37Z")

</div>

akashi さま

見落としておりました。Cを大文字にする必要があります。

```
backgroundcolor

```

↓

```
backgroundColor

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2843](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@Legacy\_Account2843](https://community.cybozu.dev/u/Legacy_Account2843)\
**Post date:** [2022 年 11 月 7 日午前 5:46 UTC](https://community.cybozu.dev/t/topic/1121/5 "2022-11-07T05:46:48Z")

</div>

mls-hashimoto様

本日も早急なご対応ありがとうございます。

無事反映することができました。

初歩的な間違いでお手数おかけし申し訳ございません。

今後もご対応していただく機会がありましたら、何卒よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2843](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@Legacy\_Account2843](https://community.cybozu.dev/u/Legacy_Account2843)\
**Post date:** [2022 年 11 月 7 日午前 5:52 UTC](https://community.cybozu.dev/t/topic/1121/6 "2022-11-07T05:52:47Z")

</div>

追記で申し訳ないのですが、お時間がありましたらご回答いただけると幸いです。

■質問内容

・一覧画面で「test」と書いてあるフィールド名を文字色変更や背景色変更が可能なのでしょうか。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1177](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@Legacy\_Account1177](https://community.cybozu.dev/u/Legacy_Account1177)\
**Post date:** [2022 年 11 月 7 日午前 6:14 UTC](https://community.cybozu.dev/t/topic/1121/7 "2022-11-07T06:14:05Z")

</div>

akashi さま

ラベルの部分ということでしょうか？kintoneのクラス名を取得したDOM操作（アップデートにより動かなくなる可能性あり）になりますが可能です。「xxxxxxx」にはデベロッパーツール等から確認できる、フィールドに割り振られている番号を入力して下さい（Chromeであれば調べたいラベルの上で右クリック→検証を選択すれば「label-xxxxxxx」と記載されています）。

```
(()=> {
  'use strict';

kintone.events.on('app.record.index.show', event => {
document.getElementsByClassName('label-xxxxxxx')[0].style.backgroundColor = '#FF0000';

  return event;
});
})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2843](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@Legacy\_Account2843](https://community.cybozu.dev/u/Legacy_Account2843)\
**Post date:** [2022 年 11 月 7 日午前 6:37 UTC](https://community.cybozu.dev/t/topic/1121/8 "2022-11-07T06:37:08Z")

</div>

ご回答いただきありがとうございます。

私も調べてみたのですが、「アップデートにより動かなくなる可能性あり」とあり、設定上はできるが

推奨はされていないということが分かりました。

この設定は行わず、他の設定でアプリを作成していきたいと思います。

今後もご対応していただく機会がありましたら、何卒よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 6 月 3 日午前 4:37 UTC](https://community.cybozu.dev/t/topic/1121/9 "2024-06-03T04:37:58Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。
