背景・実現したいこと
各フィールド名とそこに入力する文字の色、太さを変えたい
エラー情報
なし
利用したソースコード
なし
- - - - - - - - - - - - - - - - - - - - - - - - -
KintoneおよびJavaScript初心者です。
すごく初歩的な質問なのかもしれませんが、フォームで表示しているフィールドの文字と、そのフィールドに入力する文字の色、太さを変更する場合どのようにすればよろしいのでしょうか？
全ての項目ではなく、一部重要な項目を分かりやすくしたいため上記のような表記にしたいです。
チュートリアルではフィールド名に関する記載はなく、どのように変更するのか分からずにおります。
ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。
こんにちは！
kintoneの標準機能ではそういった色や文字の太さなどを変更することはできません。
↓のように詳細画面や一覧画面でフィールド要素の取得をしてスタイルの変更をする方法が紹介されていますが、
https://developer.cybozu.io/hc/ja/articles/202341944
レコード追加画面やレコード編集画面ではフィールド要素取得ができないので、
どの要素のスタイルを変えるか特定してCSSやJavaScriptでスタイルを追加するといったカスタマイズになると思います。
↓以下サイトが参考になるかもしれません。
https://www.pazru.net/js/DOM/4.html
https://www.asobou.co.jp/blog/web/css-selectors
※kintoneのアップデートなどで画面の構成（クラス名など）などが変わったりすると使えなくなる可能性もあります。
juridon 様
こんにちは。コメントいただきましてありがとうございます。
いただきました情報を元に試してみたのですが、要素が分からずで実現させることが出来ませんでした。
ソースコードを見たのですが、要素となる箇所が見当たらないのです。
kintoneの標準機能ではそういった色や文字の太さなどを変更することはできません。
KintoneのJavaScriptはアプリを加工するというよりは、真っさらなページをイチから作る、というイメージなのでしょうか。
私にはもっと深入りした学習が必要なのかも知れません。
ご回答いただきまして本当にありがとうございました。
こんにちは。
ご希望のフィールド名やそのフィールド内の文字色、太さはCSSで指定できると思います。
変更する要素の名前の確認方法は、例えばChromeでレコード詳細画面を表示させ、
変更したいフィールドのフィールド名を右クリックして「検証」をクリックします。
そうすると開発者コンソールが開き、<span class=“control-label-text-gaia”>フィールド名</span>にフォーカスされると思います。
その上の行に<div class="control-label-gaia label-〇〇” style>というのがあるので、これをcssで指定してあげるとできます。
〇〇の部分には数字が入りますが、この数字で変更したいフィールドだけを変更できます。
cssにはフィールド名は
control-label-gaia.label-〇〇 {
color:#ff0000;
font-weight: bold;
}
フィールド内（値）は
.control-value-gaia.value-〇〇 {
color:#ff0000;
font-weight: bold;
}
を書いてそのcssファイルをアプリの設定 PC用のCSSファイル でアップロードして適用します。
新井 様
お返事で遅くなりまして大変申し訳ございません。
丁寧に教えていただきましてありがとうございます。
そのcssファイルをアプリの設定 PC用のCSSファイル でアップロードして適用します。
プラグインで設定するものかと思っていましたが、ファイルアップロードで適用させるのですね。
勉強不足で申し訳ございません。
いただきましたソースを元に作成してアップしてみました所、上手く出来ました！
教えていただきまして本当にありがとうございました。助かりました。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。