文字に色を付けたい

kintone カスタマイズ
1

お世話になっております。

ジャバを用いて表示している文字に色を付けて目立つようにしてほしいと言われ有識者の方にご教示をお願いしたいと思い投稿しました。

 

（したいこと）

文字の背景に色をつけたい（目立つようにしたい）

 

（イメージ画像）

（使用しているコード）

(function() {
  "use strict";
  var getRecords = function(app, tmpRecords) {
    var limit = 500;
    var tmpRecords = tmpRecords || [];
    return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
      app: app,
      query: kintone.app.getQueryCondition()                   //クエリ文字列取得
      +'limit ' + limit +' offset ' + tmpRecords.length
    }).then(function(response){
      tmpRecords = tmpRecords.concat(response.records);
      return response.records.length === limit ? getRecords(app, tmpRecords) : tmpRecords;
    });
  };
  kintone.events.on('app.record.index.show', function(event){
    getRecords(kintone.app.getId()).then(function(records) {
      var total = records.reduce(function(previousValue, record) {
          return previousValue + Number(record.契約面積合計１.value);      
      }, 0);
      
      var total1= records.reduce(function(previousValue, record) {
   return previousValue + Number(record.賃料合計１.value);
   }, 0);
   
   var total2= records.reduce(function(previousValue, record) {
   return previousValue + Number(record.管理共益費合計１.value);
   }, 0);
   
   var total3= records.reduce(function(previousValue, record) {
   return previousValue + Number(record.看板料等他１.value);
   }, 0);

       var html= '<div class="header-box">'+
                   "契約面積合計: "+ total.toLocaleString() + '㎡  </span>' +       //toLocaleString()は桁区切り
                   "賃料合計: " + total1.toLocaleString() +' 円  </span>' +   
                   "管理/共益費合計合計: " + total2.toLocaleString() +' 円  </span>' +
                   "看板料等他合計: " + total3.toLocaleString() +' 円  </span>' +
                  '</div>';                            
      kintone.app.getHeaderSpaceElement().innerHTML = html;            //メニュー右側の空白部分の要素を取得
    });
  });
})();
2

nekoko 様

こんにちは。

いくつか方法があるのですけど、取り急ぎ簡単な方法をお伝えします。

CSSで調整する方法です。

.header-box {
text-align: center;
padding: 5px 0 10px 0;
background-color: chartreuse;
}

あくまで例ですので、ご自身の希望のデザインとは異なるかと思います。

細かな調整は、HTML&CSS入門：イチからWebデザインを習得する講座 (saruwakakun.com) この辺りが分かりやすいかと思います。

ご確認して頂けますと幸いでございます。

3

新屋 育男様

こんにちは。

 

こちらの方でもご教示して頂きありがとうございます。

CSS実装したところ多少左側が広くなっていましたが範囲を入れなおすことで思っていた通りのデザインになりました。