罫線デザイン変更プラグイン
![アイキャッチ](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/04215728/cbd91f4b31b9a04321b4bbc8dbfb972d-1024x474.png)
ありそうでなかった、kintoneの罫線の見た目を変更できるプラグインです。使い方次第でアプリをもっと使いやすくすることができます。
概要
詳細画面で表示する「罫線」のデザインを一括で変更できます。
特定の罫線だけを変更することはできませんので、ご注意ください。
設定は、プラグインの設定画面で簡単にできます。
画像のように大幅に表示を変えることもできるので、設定や配置場所次第では、通常の罫線の枠を超えたような使い方もできるかもしれません。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/07/25094723/image-2-1024x260.png)
機能
以下三種類の設定が可能です。
- 罫線の色
- 罫線の太さ
- 罫線のデザイン(ドット・ダッシュ・一本線・二重線)
プレビュー機能があるので、どのような罫線になるか確認しながら設定できます!
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/08095724/image-35.png)
利用シーン
- 詳細画面の罫線を見やすくする
- 入力してほしい箇所を色付きの線で区切ってわかりやすくする
- 自分の趣味に合った画面にする
こちらの記事に利用例がありますので、ぜひご覧ください。
設定手順
kintone環境にプラグインを導入する
- 右上の歯車マークをクリックし、[kintoneシステム管理]をクリックします。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18090219/image-81-1024x399.png)
- [kintoneシステム管理]画面から、その他の「プラグイン」をクリック。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18090357/image-82.png)
- [プラグイン]画面より「読み込む」をクリックします。参照からプラグインデータ(zip形式)を選択します。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18090444/image-83-1024x368.png)
- 読み込んだプラグインに選択したプラグインが表示されます。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18090517/image-84.png)
- 適用するアプリを開き、アプリ一覧画面の右上にある歯車マークをクリックします。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18090607/image-85-1024x275.png)
- [設定]タブから[カスタマイズ/サービス連携]を探し、「プラグイン」をクリックします。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18090657/image-86.png)
- 左上のプラグイン追加をクリックします。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18090754/image-87.png)
- 設定するプラグインのチェックボックスにチェックをし、左上の追加をクリックします。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18090929/image-88.png)
プラグインの設定を行う
- プラグインページから「本プラグイン名」の歯車マークをクリックします。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18163025/image-95-1024x311.png)
- プラグインの設定画面から各種設定を行います。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18163117/image-96-1024x459.png)
2-1. 有効化のチェックボックスをクリックし、有効化します。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18163228/image-98.png)
2-2. 「罫線の色」から設定する罫線の色を選びます。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/08094513/image-32.png)
2-3. 「罫線の太さ」から設定する罫線の太さを選択します。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18163350/image-99.png)
2-4. 「罫線のデザイン」から設定する罫線のデザインを選択します。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18164716/image-100.png)
※プレビューから設定した罫線のデザインを確認できます。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18164826/image-101.png)
- 一番下にある保存ボタンをクリックします。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18164928/image-102-1024x435.png)
- 最後に[アプリの設定]ページでアプリの更新をクリックします。
![](https://jcs-dx-lp-image-bucket.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2022/08/18165018/image-103-1024x395.png)
注意点
- 無料でご利用いただけます。
- サポート等の有償保証をご希望の場合、対応いたします。詳細はお問い合わせください。
- kintoneのアップデートに応じたバージョンアップ対応は行ってまいりますが、有償保証のお客様を優先対応いたします。
- 特定の罫線だけを指定して変更することはできません。
- ブラウザやモニターサイズによっては、プレビューと詳細画面のデザインに多少の差異が発生する可能性があります。
- モバイル版には対応しておりません。
リリースノート
2023/07/20 Ver.1.2 リリース
- 機能改善
- 外部ライブラリを参照できない環境でも実行できるように対応しました
- その他不具合修正
2022/11/02 Ver.1.1 リリース
- 不具合修正
- 罫線の色を新しく選択した時にカラーコードの表示が変わらない不具合を修正しました
kintoneプラグイン利用申し込み
ご利用を希望される方は、下記フォームへ情報を入力して送信ください。送信完了後にダウンロードリンクが表示されます。