kintone有効活用。CSSのカスタマイズでテキストフィールドのサイズを変更する

テキストフィールドが小さいときの調整方法
カスタマイズ対象のフィールドのclassを調べる
input-text-cybozuにcssを設定する。

テキストフィールドが小さいときの調整方法

kintoneに配置するフィールドのサイズについて相談がありました。
フィールドが小さく、入力が大変といった内容です。

左右のサイズは標準の機能で調整可能ですが、縦の幅はCSSのカスタマイズが必要になります。
今回、このカスタマイズをご紹介します。

カスタマイズ対象のフィールドのclassを調べる

CSSのカスタマイズをするには対象のフィールドのclassを調べる必要があります。
Google Chromeの場合はF12を押します。

文字列（1行）フィールドのサイズを調整してみましょう。
文字列（1行）フィールドを設置し、公開します。
レコード登録画面でF12を押し、該当のinputタグのclassを調べます。

フィールドのclassを確認

input-text-cybozuというclassがあてられているようです。

input-text-cybozuにcssを設定する。

該当のclassにpaddingを設定します。



.input-text-cybozu {

    padding: 30px 30px !important;

}

任意のテキストファイルに上記テキストを記述して保存し、拡張子をcssに変更、kintoneの設定「JavaScript / CSSでカスタマイズ」からファイルをアップしてください。

フィールドの拡大

フィールドのサイズが大きくなりました。

しかし、テキストのサイズは変わらないので微妙です。テキストのサイズも大きくしましょう。



.input-text-cybozu {

    padding: 30px 30px !important;

    font-size: 24px !important;

}

cssに1行追加し、アップしなおします。

テキストも拡大

テキストも大きくなりました。

cssでのフィールドのサイズ調整をご紹介しました。
こちら2022年4月28日現在動作を確認しておりますが、kintoneのアップデートの際にclassの名称が変更される可能性があります。本カスタマイズを実施される場合はkintoneのアップデートにご注意ください。

ゴートップではkintoneを活用した業務の効率化のご相談を承っております。

現在の業務に課題を抱えている方は是非ゴートップにお問い合わせください。

詳しくは当社kintoneソリューションサービスのページをご覧ください。

さまざまな方や企業の多様なニーズにお応えする「エスコートン」サービスの提供を開始しました。
お悩みに合わせた3つのサービスメニューをご用意しました。