# 関連レコードのデザインについて

**URL:** <https://community.cybozu.dev/t/topic/2175>\
**Category:** kintone 開発相談\
**Created:** [2015 年 8 月 26 日午前 4:33 UTC](https://community.cybozu.dev/t/topic/2175 "2015-08-26T04:33:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2093](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account2093](https://community.cybozu.dev/u/Legacy_Account2093)\
**Post date:** [2015 年 8 月 26 日午前 4:33 UTC](https://community.cybozu.dev/t/topic/2175/1 "2015-08-26T04:33:46Z")

</div>

関連レコードの背景色や枠線などを変更したいのですが、こちらの変更を行うことは可能なのでしょうか？  
可能ならばその方法をお教え頂きたいです。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2115](https://avatars.discourse-cdn.com/v4/letter/l/e9bcb4/32.png) [@Legacy\_Account2115](https://community.cybozu.dev/u/Legacy_Account2115)\
**Post date:** [2015 年 8 月 26 日午前 4:56 UTC](https://community.cybozu.dev/t/topic/2175/2 "2015-08-26T04:56:02Z")

</div>

山口さん  
cstapの瀧ヶ平です。

レコード詳細画面の中であれば、関連レコードのフィールド要素を取得し、スタイルを変更するという方法で可能です。

```
kintone.events.on('app.record.detail.show', function(event){
  // 関連レコードの背景を赤にする
  kintone.app.record.getFieldElement('関連レコードのフィールドコード').style.backgroundColor = "#FF0000";
});

```

実際には上のようなコードで実装できるかと思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2093](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account2093](https://community.cybozu.dev/u/Legacy_Account2093)\
**Post date:** [2015 年 8 月 26 日午前 7:39 UTC](https://community.cybozu.dev/t/topic/2175/3 "2015-08-26T07:39:00Z")

</div>

瀧ヶ平さん  
早速のご回答ありがとうございます。  
お教え頂いた方法を試してみましたら、上手く背景色を変更できました。  
背景色以外に線や関連レコードの項目名も変更したいのですが、可能でしょうか？

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2115](https://avatars.discourse-cdn.com/v4/letter/l/e9bcb4/32.png) [@Legacy\_Account2115](https://community.cybozu.dev/u/Legacy_Account2115)\
**Post date:** [2015 年 8 月 27 日午前 3:51 UTC](https://community.cybozu.dev/t/topic/2175/4 "2015-08-27T03:51:14Z")

</div>

山口さん

実際に関連レコードの背景色を緑、枠線を赤にするコードを書いてみました。  
参考にしていただければ幸いです。

```
(function(){
  "use strict";
  kintone.events.on('app.record.detail.show', function(event){
    var relation = kintone.app.record.getFieldElement('フィールドコード');
    // 関連レコードの背景色の変更
    relation.style.backgroundColor = "#00ff00";

    // 関連レコードのテーブルの各セルの取得
    var tr = relation.getElementsByTagName("tr");
    var th = relation.getElementsByTagName("th");
    var td = relation.getElementsByTagName("td");

    var changeBorder = function(elm){
      // 要素の境界の色を変更する関数
      elm.style.border = "1px solid #ff0000";
    };

    // テーブルのそれぞれのセルにchangeBorder関数を適用する
    for(var i = 0;i < tr.length; i++){
      changeBorder(tr[i]);
    }
    for(var j = 0; j < th.length; j++){
      changeBorder(th[j]);
    }
    for(var k = 0; k < td.length; k++){
      changeBorder(td[k]);
    }
  });
})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2093](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account2093](https://community.cybozu.dev/u/Legacy_Account2093)\
**Post date:** [2015 年 8 月 28 日午前 8:59 UTC](https://community.cybozu.dev/t/topic/2175/5 "2015-08-28T08:59:19Z")

</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 年 9 月 30 日午前 5:11 UTC](https://community.cybozu.dev/t/topic/2175/6 "2024-09-30T05:11:47Z")

</div>

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