キントーン(Kintone)アプリの⾏間調整

キントーン(Kintone)アプリのデザインが2017年2⽉に更新されました。スマホやタブレットPC等を意識して作られたと思います。
ただ、PCから表⽰する場合、以前より⾏間が⼤きく、⼀度に確認できる⾏数が少ないとクレームが多々あったので、⾏間調整してみました。
といってもやることは単純でCSSファイルをアップしてスタイルを上書きするだけです。

  • コードサンプル(適当にブラウザでCSS調べて記述しただけ。)
    「ここから (/lineheight.css)」ダウンロードできます。Kintoneアプリ > メニューから「アプリの設定の変更」 > 設定タブ「JavaScript/CSSでカスタマイズ」からファイルアップロードできます。

    .control-gaia .input-text-cybozu, .control-gaia input[type=text], .control-gaia input[type=password], .control-gaia input[
        border-color: #666666;
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box;
        width: 99%;
        padding: 0px 8px;
        font-size: 13px;
        background-color: #fff;
        color: #333;
    }
     
    .control-value-gaia {
        overflow: hidden;
        /* padding: 4px 0; */ 
        min-height: 21px;
        color: #333;
        white-space: pre-wrap;
        background-color: transparent;
    }
     
    .gaia-components-forms-input .gaia-components-forms-input-form, .gaia-ui-appselect-combobox input[type=text], .gaia-ui-fie
        height: 35px;
        padding: 0 8px;
    }
     
    .control-gaia .input-category-cybozu, .control-gaia .multipleselect-cybozu, .control-gaia .select-cybozu>.gaia-argoui-sele
        border-color: #e3e7e8;
        border-width: 1px;
        border-style: solid;
        height: 35px;
    }
     
    .fm-control-wrapper-gaia .select-cybozu, .gaia-actionmenu-mappingselect .select-cybozu .goog-menu-button-inner-box, .gaia-
        position: relative;
        box-sizing: border-box;
        padding-right: 40px;
        height: 40px;
        border: 1px solid #e3e7e8;
        background-color: #f7f9fa;
        box-shadow: 1px 1px 1px #fff inset;
        color: #3498db;
        line-height: 35px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
    }
    .gaia-app-report-embedtagpopup-checkbox, .gaia-argoui-forms-userselect-pickerdialogbody-selectall, .gaia-components-forms-
        white-space: nowrap;
        font-size: 13px;
        overflow: hidden;
        word-wrap: normal;
        display: block;
        padding-left: 1px;
        max-width: 98%;
        /* height: 24px; */
    }
     
    .input-checkbox-item-cybozu, .input-radio-item-cybozu {
        /* margin-bottom: 4px; */
        margin-right: 16px;
        padding: 4px;
        position: relative;
    }
    .gaia-app-report-embedtagpopup-checkbox, .gaia-argoui-forms-userselect-pickerdialogbody-selectall, .gaia-components-forms-
        white-space: nowrap;
        font-size: 13px;
        overflow: hidden;
        word-wrap: normal;
        display: block;
        padding-left: 1px;
        max-width: 98%;
        /* height: 24px; */
    }
     
    .control-gaia .input-checkbox-cybozu, .control-gaia .input-radio-cybozu, .fm-control-gaia .input-checkbox-cybozu, .fm-cont
        border-color: #e3e7e8;
        border-width: 1px;
        border-style: solid;
        padding: 4px 0 0 4px;
        white-space: nowrap;
    }83.  
    .gaia-app-report-embedtagpopup-checkbox, .gaia-argoui-forms-userselect-pickerdialogbody-selectall, .gaia-components-forms-
        white-space: nowrap;
        font-size: 13px;
        overflow: hidden;
        word-wrap: normal;
        display: block;
        padding-left: 1px;
        max-width: 98%;
        /* height: 24px; */
        padding: 0px 0px 0px 0px;
        /* vertical-align: middle; */
    }
     
    .row-gaia .control-gaia {
        padding: 0 8px;
        border-left: 3px solid #638c0b;
         border-radius: 4px;
    }
    .control-label-gaia, .fm-canvas-gaia .input-label-cybozu, .gaia-argoui-admin-app-webhook-edit-wrapper .input-label-cybozu 
        background-color: #f5f5f5;
        display: block;
        padding: 4px 8px;
        color: #333;
        font-size: 14px;
        margin: 0 -8px;
        white-space: nowrap;
        font-weight: bold;
    }
     
    .subtable-label-inner-gaia {
        display: inline-block;
        padding: 4px 8px;
        box-sizing: border-box;
        font-weight: bold;
    }
     
    .row-gaia .control-etc-gaia .hr-cybozu {
        margin-bottom: 0;
        border: 0;
        border-top: 2px solid #638c0b;
    }
    #btnExcelDownload {
        -moz-box-shadow: inset 0px 1px 0px 0px #9acc85;
        -webkit-box-shadow: inset 0px 1px 0px 0px #9acc85;
        box-shadow: inset 0px 1px 0px 0px #9acc85;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
        background: -moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
        background: -webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
        background: -o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
        background: -ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
        background: linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0);
        background-color: #74ad5a;
        border: 1px solid #3b6e22;
        display: inline-block;
        cursor: pointer;
        color: #ffffff;
        font-family: Arial;
        font-size: 13px;
        font-weight: bold;
        padding: 5px 12px 5px 12px;
        text-decoration: none;
        margin-top: 28px;
        margin-left: 10px;
        border-radius: 4px;
    }
    #btnExcelDownload:hover {
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a));
      background:-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
      background:-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
      background:-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
      background:-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
      background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a',GradientType=0);
      background-color:#68a54b;
    }
    #btnExcelDownload:active {
      position:relative;
      top:1px;
    }
     
    .control-gaia .input-category-cybozu, .control-gaia .multipleselect-cybozu, .control-gaia .select-cybozu>.gaia-argoui-sele166.     border-color: #e3e7e8;
        border-width: 1px;
        border-style: solid;
        height: 44px;
    }
    .input-category-cybozu, .multipleselect-cybozu {
        margin: 0;
        padding: 4px 0px 8px 0;
        width: 280px;
        border: 1px solid #e3e7e8;
        background-color: #fff;
        box-shadow: 1px 1px 12px #f5f5f5 inset, -1px -1px 12px #f5f5f5 inset;
        list-style: none;
        font-size: 13px;
        line-height: 1;
    }
     
    .recordlist-cell-gaia>div {
        padding: 4px 4px;
    }
    .recordlist-show-gaia {
        position: relative;
        padding: 0px 12px;
    }
     
    .recordlist-header-cell-gaia>div {
        position: relative;
        padding: 0px 5px 0px 0;
    }
     
    .recordlist-header-cell-gaia>div {
        position: relative;
        padding: 0px 5px 0px 0;
        background-color: #638c0b;
        color: white;
        font-weight: bold;
    }
    .app-index-contents-gaia>.box-gaia .recordlist-header-cell-gaia {
        border-top-width: 0;
        background-color: #638c0b;
    }
     
    .show-subtable-gaia td {
        border-color: #e3e7e8;
        border-style: solid;
        /* border-width: 0 1px 1px 0; */
        vertical-align: top;
        background-color: white;
    }
    

ちなみにこんな風に見えます。
※中身は見せられないので伏せてます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. 森羅 誠 より:

    はじめまして、サンプルコードの右側切れてますね。(;^_^A

    • トドさん より:

      すみません。しばらくKintone触れないので後ほど直します・・・。
      ご指摘ありがとうございます。