kintoneレコード詳細画面の罫線の修飾

kintoneレコード詳細画面の罫線の修飾

kintone超初心者です。
kintoneレコード詳細画面の罫線に色付けし太くしたいのですが
CSSコードが上手くいきません
アドバイスをお願いします。

.recordlist-gaia .grid-row {
border: 3px solid #FF0000;
}

1 Like

吉田さんこんにちは~

そうですね!多分コードにめちゃくちゃ大きな問題ではないですが、情報が少し少ないので判断しづらいです。

こちらの提案として

①CSSコードにどういうエラーが発生したのか知りたいし、確認したほうがいいと思います。

kintone画面の空白のところに右クリックを押し、「検証」を押していただきたいです。
そこにconsole画面を選んでもらうと、赤いエラー文字ができるはずです。

②あと、ちょうど使えそうな無料プラグインも見つかりましたので、
良ければ参考してみてください!

2 Likes

ありがとうございます。
まだ何が何やら解らない状態です。
早速、やってみます。

ちなみに検証のコンソールにはエラーはありませんでした

2 Likes

吉田さんこんにちは!
フィールドにCSSを反映させたい場合についてお答えします。

例えば、HTMLのクラス名が

<div class="control-label-gaia label-1234567">

だった場合、CSSは

.label-1234567{
    border: 3px solid #FF0000 !important;

}

のように記述すればいいかと思います。
kintone標準のCSS内で元々定義されているため、それを上書きするために「!important 」を付ける必要があります!

3 Likes

ありがとうございます
大いに苦しんでおります
超初心者すぎて、躓きまくりです

罫線のclass の確認方法

JUNさんが記載した方法で検証タブを開きます。
次の画像のように、1の↑をクリックしてから、2にコンソールを当てると、その要素のcalss情報が表示されます。
次の図の場合、クラスは.control-hr-field-gaiaです。

CSSの記載方法

Gabeさんが記載した通りです。
他のCSSの書き方は、ネットで調べたら情報がいっぱい出てきます。

注意点(重要!)

次のページの「 kintone で使われている id や class 属性」に記載している通り、
各要素に付与されている id や class 属性の値は、予告なく変更されます。
id や classを使ったカスタマイズはお勧めしません。
kintone コーディングガイドライン

3 Likes

ありがとうございます。
大変、勉強になりました。

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