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で加工することができます。文字の場合、ある程度の簡単な装飾は 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);
}


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

まとめ

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

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


もし分からないことがありましたら、フォーラムの方でご質問ください。