kintone の画面のなかで、メニュー部分やフォームに配置したスペースの中は、比較的自由にデザインが適用できる領域になっています。ここでは、Customine によるカスタマイズで文字やボタンを配置した際に、それらに対してCSSを利用してデザインを適用する方法をご紹介します。


CSSのクラス名一覧

Customineではボタンと文字を配置したときにそれぞれ特別なCSSクラスを追加します。

  • ボタンのCSSクラス名: customine-button
  • 文字のCSSクラス名: customine-label

また、配置した場所（メニューまたはスペース）によって特別なCSSクラスを追加します。


メニュー位置に文字を表示する
または
ボタンをメニュー位置に配置する		スペースに文字を表示する
または
ボタンをスペースに配置する
レコード詳細画面の上側の場合
customine-at-record-header-menu-space		customine-at-spacer
一覧画面メニューの右側の場合
customine-at-header-menu-space
一覧画面メニューの下側の場合
customine-at-header-space


（ボタンにはあらかじめ kintone 標準の「通常のボタン」 "kintoneplugin-button-normal" というCSSクラスも指定されていますのでご注意下さい。)


これらの組み合わせにより、配置したボタンや文字のデザインを自由に変更することが可能です。


活用例：ボタンのマージン

それでは、「ボタンをメニュー位置に配置する」のカスタマイズを例に、CSSクラスの書き方をご紹介します。


まず Customine の設定で「やること」は以下のとおりです。

場所に「一覧画面メニューの下側」を選択しています。これをこのまま kintone アプリへ登録し、動作を確認すると、以下のようになるかと思います。一覧部分に張り付いているのが、ちょっと残念な感じですね。

これにマージンを入れてみます。一覧画面メニューの下側に配置しましたので、CSSクラス名には「customine-at-header-space」を選びます。

以下のようなCSSファイルを作成、kintone のアプリの設定 -> JavaScript/CSSでカスタマイズ -> 「PC用のCSSファイル」に、アップロードして追加または、URL指定で追加します。


.customine-at-header-space {
  margin: 10px;
}
CSS


その後保存、アプリを更新すると、以下のようにマージンが取られていると思います。

活用例：スペースに表示する文字

スペースに表示する文字も同様にCSSで加工することができます。文字の場合、ある程度の簡単な装飾は Customine のテキストエディタで実現可能ですが、その範囲を超えて凝ったことを実現可能になります。


例えば、以下のような文字をスペースに表示し、大きく目立たせたいとします。

ここでは、スペースに文字を表示していますので、「customine-at-spacer」クラスを定義します。例えば以下のような定義をCSSファイルに追加し、kintoneアプリに反映します。

.customine-at-spacer {
  color: #fff;
  font-size: 64px;
  font-weight: bold;
  font-family: Helvetica;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
CSS


kintone アプリに上記CSSが反映されると、以下のようにドロップシャドウ付きの大きく、目立った文字が表示されることと思います（テキストエディタで定義した内容はstyle属性に反映されます。その結果、文字色はこちらが優先され赤の文字が表示されていることをご確認下さい）。

活用例：タブの色変更

注意：やること「タブの色を変更する」がリリースされましたので、カスタマイズ画面上で色を変更することも可能です。
以下で紹介しているCSSを使ってタブの色を変更する方法と、「タブの色を変更する」を用いる方法を同時に使用した場合、どちらの指定色が優先されるかは定まっていません。意図しない色がセットされてしまう原因にもなりますので、どちらか１つの方法に統一するようにしてください。


タブグループにタブを追加するで作成したタブグループごとに、CSSで加工することができます。タブの場合、アクティブな場合とそうでない場合の2パターンの色を指定することが可能です。


各タブには【customine-tab-アクション番号】という形式でIDが付いています。例えばアクション番号が3のアクションで追加されたタブの色を変えるには、以下のような定義をCSSファイルに追加し、kintoneアプリに反映します。

.activeのほうが選択されている状態の設定で、付いていないほうが未選択の状態の設定になります。


#customine-tab-3 {
    background-color: #ff6060 !important;
    color: white;
}
#customine-tab-3.active {
    background-color: #ff0000 !important;
    color: white;
}
CSS

kintoneアプリに上記CSSが反映されると、タブの色が変更されていることが確認できるかと思います。


まとめ

表示する場所と、配置するもの（ボタンか文字）によって、適用されるCSSクラスが分かれていますので、うまく組み合わせてご希望のデザインを表現してみて下さい。

CSSは非常に奥が深く、習得は簡単ではありませんが、慣れると例えばこのような見た目のボタンも簡単に作成することができますので、是非お試し下さい。


※CSSの書き方につきましては、サポート外とさせていただいております。