レコード詳細画面の文字色と背景色の変更

kintone カスタマイズ
1

レコード詳細画面の特定の文字に色をつけたいです。

下記サイトを見て、
https://developer.cybozu.io/hc/ja/articles/202341944-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E3%81%A8%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2%E3%81%A7%E6%9D%A1%E4%BB%B6%E6%9B%B8%E5%BC%8F%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B
「チェックボックス」の文字の色は変更できたのですが、
「文字列（１行）」の文字の色変更ができません。

***************************************************************************************
「文字列（１行）」で色変更できず
***************************************************************************************
    // レコード詳細画面の表示時にフィールド値に応じて文字色を変更する

    (function() {
        ‘use strict’;
              kintone.events.on(‘app.record.detail.show’, function(event) {
                  var elUrgent = kintone.app.record.getFieldElement(‘Urgent1’);
                  if (event.record[‘Urgent1’][‘value’][0] === “赤字にしたい”) {
                      elUrgent.style.color = ‘#ff0000’;
                      elUrgent.style.fontWeight = ‘bold’;
                    }})
    })();
***************************************************************************************

***************************************************************************************
「チェックボックス」の文字の色は２つ試して変更できました
***************************************************************************************
    (function() {
        ‘use strict’;
              kintone.events.on(‘app.record.detail.show’, function(event) {
                  var elUrgent = kintone.app.record.getFieldElement(‘Urgent2’);
                  if (event.record[‘Urgent2’][‘value’][0] === “青字にしたい”) {
                      elUrgent.style.color = ‘#0000ff’;
                      elUrgent.style.fontWeight = ‘bold’;
                    }})
    })();

    (function() {
        ‘use strict’;
              kintone.events.on(‘app.record.detail.show’, function(event) {
                  var elUrgent = kintone.app.record.getFieldElement(‘Urgent3’);
                  if (event.record[‘Urgent3’][‘value’][0] === “緑字にしたい”) {
                      elUrgent.style.color = ‘#008000’;
                      elUrgent.style.fontWeight = ‘bold’;
                    }})
    })();
***************************************************************************************

また、ボックス内の背景も黄色などに変更したいです。下記サイトを見て出来そうな気がしたのですが…
https://developer.cybozu.io/hc/ja/community/posts/360040458632-%E5%85%A5%E5%8A%9B%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AB%E8%89%B2%E3%82%92%E3%81%A4%E3%81%91%E3%81%9F%E3%81%84

「var parent = document.getElementById(“record-gaia”);」
の「record-gaia」の変更は、
F12でcopy elementすると…、
**********************************************************************
<div class=“control-gaia control-single_line_text-field-gaia field-6384723 control-show-gaia” style=“box-sizing: border-box; width: 193px; height: auto;”><div class=“control-value-gaia value-6384723”><span class=“control-value-content-gaia”>赤字にしたい</span></div><div class=“control-design-gaia”></div></div>
**********************************************************************
と出てきて、どこを抜き出すのか分かりません。。。

「var nodes = parent.childNodes[0].childNodes[0].childNodes[0].childNodes[1].childNodes[0].childNodes[0];」
は0か1を変えればいいとのことですが、どこをどう変えてよいのか、理解できず。。。

 

2

Ichiro Saitoさん

こんにちは。

 

文字列1行の場合は[‘value’]までの指定です。

背景色も同じようにstyleで指定できます。

kintone.events.on('app.record.detail.show', function(event) {
  var elUrgent = kintone.app.record.getFieldElement('Urgent1');
  if (event.record['Urgent1']['value'] === "赤字にしたい") {
        elUrgent.style.color = '#ff0000';
        elUrgent.style.fontWeight = 'bold';
      elUrgent.style.backgroundColor = '#0000ff'; // 背景色
    }
});
3

koichiさま

 

できました！

[0]が要らなかったんですね。一人では辿り着けませんでした！！

 

ありがとうございました！！！

4

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