画面での背景色の変更

Kintone レコード追加・変更画面において、フィールドと画面の背景色が似通った色(フィールド:白色、画面の背景色:薄いグレー)であるため入力すべきフィールドの場所が解りにくい状態となっています。

フィールド以外の部分の背景色を変更する方法はありますか?

よろしくお願いします。

後藤 耕一さん

 

以下をCSSファイルとしてアプリに適用することで、背景色を変えることができます。

※id、classを指定しているのでkintoneのデザインが変更になった場合の影響を受ける可能性があります。

#record-gaia {
background-color: #effadc;
}
#record-gaia .control-label-gaia {
color: #FFF;
border-left: solid 2px #effadc;
background-color: #85b83d;
}

 

 

カキ氷様

 

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

背景色を変更することができました。

 

詳細な部分の確認をさせていただきたいのですが、

record-gaia ← Kintoneの画面全体のID

record-gaia .control-label-gaia ← Kintone各フィールドのフィールド名表示部分のID(共通?)

と考えて良いのでしょうか?

 

よろしくお願いします。

 

後藤 耕一さん

 

record-gaia は詳細、編集画面のレコード情報表示領域

record-gaia .control-label-gaia はレコード情報表示領域の中のラベル部分になります。

 

他にもCSSのセレクタを使うことで特定箇所の色変更が可能です。

http://weboook.blog22.fc2.com/blog-entry-268.html

カキ氷様

 

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

 

ご存じであれば下記についてもご教授ください。

record-gaia など、Kintoneにてあらかじめ用意されているID(要素名)はどこかに開示されているのでしょうか?

今回は画面周りでしたが、一覧などでも同様に背景色を変えたいという要望があり、

IDが解れば設定できると考えた次第です。

 

よろしくお願いします。

後藤さん

 

>record-gaia など、Kintoneにてあらかじめ用意されているID(要素名)はどこかに開示されているのでしょうか?

公式では公開されていないので、私はgoogle chromeのデバッグツールを使いHTMLを読んでCSSを適用しています。

デバックツールの使い方はこちらを参考にしてみてください。

https://cybozudev.zendesk.com/hc/ja/articles/207613916

 

 

 

カキ氷様

ご回答ありがとうございました。

 

ご提示いただいたデバックツールにて確認してみます。

 

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