1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

kintoneでボタンを消したいときにすぐにクラスを見つける方法

Last updated at Posted at 2020-02-23

##「レコード追加ボタンを消したい」
kintoneのカスタマイズを行っていて、標準の設定からレコードのアクセス権を設定することはできても、
何かしらの状況でレコード一覧画面やレコード詳細画面に表示している「レコード追加ボタン」を
非表示にしたいときがありました。

スクリーンショット 2020-02-23 1.43.19.png

無理やりCSSで見えなくなるように制御すればいいことはわかっていたものの、
要素を探すのにすこし手こずってしまったので解決方法をメモとして残しておきます。

使用するツール

消したい要素のクラスを確認する際はGoogle Chromeの開発者ツールを使用する。
F12を押せばすぐに出てきます)
kintoneのカスタマイズをする際によく使う機能ではありますが、
要素を探す際にもとっても役に立ちます。

ボタンを消す手順

css_kintone2.gif

上記のGifを参考にしていただければいいのですが、少しずつ書いていこうと思います。

  1. 開発者ツールを開き、Elementsタブを表示する。
  2. モバイル画面切り替えボタンの左に選択ツールがあるので、選択ツールをクリックする。
  3. kintoneの画面上で操作したいボタンにカーソルをあわせてクリックする。
  4. ElementsタブのHTMLコードの中に選択した部分を記述しているクラスが表示される。
  5. ダブルクリックしてコピーする。
  6. kintoneのCSSカスタマイズファイルに非表示にするようにコードを書く。
  7. kintoneアプリにCSSファイルを適用する。

CSSに記述する際は以下のように記述すると消えます。

kintone_example.css
/*
.<消したいクラス> {
display: none;
}
*/

.gaia-argoui-app-menu-add.gaia-argoui-app-menu {
display: none;
}

同じようにモバイル版でもクラスを探してCSSで記述してあげると、ボタンを消すことができました。
ただ、モバイル版はPC版とはボタンの位置がかなり違っていて、
ボタンのクラスを見つけるのが大変だったので、この方法がより役に立つなと感じました!
今度からはすぐに消せるのでひと安心。

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?