# スペースフィールドの文字・背景設定を出力時にも反映したい

**URL:** <https://community.cybozu.dev/t/topic/1482>\
**Category:** kintone 開発相談\
**Created:** [2023 年 3 月 29 日午前 7:35 UTC](https://community.cybozu.dev/t/topic/1482 "2023-03-29T07:35:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account140](https://avatars.discourse-cdn.com/v4/letter/l/f08c70/32.png) [@Legacy\_Account140](https://community.cybozu.dev/u/Legacy_Account140)\
**Post date:** [2023 年 3 月 29 日午前 7:35 UTC](https://community.cybozu.dev/t/topic/1482/1 "2023-03-29T07:35:13Z")

</div>

現在、見積書アプリを作成しており、

出力した際に見栄えが良くなるようにカスタマイズを行っています。

具体的には、以下のJavaScriptを投入し、スペースフィールドに文字を挿入。

文字色や背景色を指定して「見積書」という表題をいれました。

「レコードを印刷」へ進み印刷用画面になると上記画像のようになるのですが、  
そこから「印刷する」を押すと文字色や背景色が反映されず、  
下記画像のようになってしまいます。

JavaScriptは下記のように挿入しております。

もし分かる方がいらっしゃいましたら教えていただけると幸いです。

よろしくお願いいたします。

```
    kintone.events.on(['app.record.create.show','app.record.edit.show','app.record.detail.show','app.record.print.show'],function(event){
        var memo = kintone.app.record.getSpaceElement('memo');
            memo.innerText = "御見積書";
            memo.style.backgroundColor = '#0066CC';
            memo.style.fontSize = '40px';
            memo.style.color = '#FFFFFF';
            memo.style.textAlign = "center";
            memo.style.fontWeight = "bold";

        return event;
  });

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1018](https://avatars.discourse-cdn.com/v4/letter/l/e56c9b/32.png) [@Legacy\_Account1018](https://community.cybozu.dev/u/Legacy_Account1018)\
**Post date:** [2023 年 3 月 30 日午前 8:04 UTC](https://community.cybozu.dev/t/topic/1482/2 "2023-03-30T08:04:22Z")

</div>

恐らく[**こちら**](https://hayakute.kantan-sakusaku.com/?p=2722)に記載されているのと同じ、ブラウザの設定によるものではないでしょうか？

但し、この通りの操作を行うと、背景色のグレーまで反映されてしまいますが…

---

<div class="post-metadata">

**Author:** ![Legacy\_Account140](https://avatars.discourse-cdn.com/v4/letter/l/f08c70/32.png) [@Legacy\_Account140](https://community.cybozu.dev/u/Legacy_Account140)\
**Post date:** [2023 年 3 月 30 日午前 10:46 UTC](https://community.cybozu.dev/t/topic/1482/3 "2023-03-30T10:46:39Z")

</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:** [2023 年 10 月 23 日午前 4:45 UTC](https://community.cybozu.dev/t/topic/1482/4 "2023-10-23T04:45:59Z")

</div>

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