kViewerのリストの幅を変更するには？

Cybozu社製の【kintone】というアプリケーションはご存知でしょうか？
今回は、こちらのkintoneと連携できるアプリケーションサービスのkViewerというものについて、実際に使っている方を対象に説明したいと思います。

なので、kViewerを使用していないという方には、まずは、下記サイトでどういうものかという説明がありますので、こちらをご覧ください。

参考

kViewer – kintone（キントーン）連携サービス

kv.kintoneapp.com

では、さっそく解説いたします。

kViewerでは、リスト型で作成すると、kintoneのDBタイトルの文字数や項目数によりますが、下図のような状態で、ウェブサイトの表示画面からはみ出てしまうことがあります。

上図のデータはダミーデータなので、架空のデータとなります。
ちなみに、ダミーデータは、下記サイトより作成しています。

参考

TM – WebTools

tm-webtools.com

こちらの状態の際に、幅を変更したいときに、トヨクモさんでは、下記サイトのヘルプで幅変更に関して解説しております。

参考

メインコンテンツの各フィールドの横幅は変更できますか？ – トヨクモ株式会社

kintoneapp.zendesk.com

ただ、こちらの注意事項として上記サイトでは、「フィールド名は改行せず1行で表示する」というのを優先するとして、実際に幅を変更することができないケースがあります。

そこで、今回は、CSSカスタマイズを使って、項目の幅調整を可能とできることを確認しましたので、そちらをシェアしたいと思います。

いかがだったでしょうか？

現在、弊社では、kintoneを使ったサービスをいくつか展開しておりますので、ご興味がございましたらお気軽にお問い合わせください。