CookBook

IM-BloomMaker imui の「ボタン」エレメントの背景色を css エディタで適用する方法

投稿日:

この CookBook では imui の「ボタン」エレメントの色を CSS エディタで適用する方法を説明します。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

IM-BloomMaker インポートファイル: cookbook_197635_im_bloommaker-data.zip
IM-BloomMaker のインポート画面からインポートしてください。

レシピ

  1. imui の「ボタン」エレメントの背景色を CSS エディタで変更する
  2. 標準テーマ利用時の imui の「ボタン」エレメントの背景色を CSS エディタで変更する

1. imui の「ボタン」エレメントの背景色を CSS エディタで変更する

フォーム部品(imui) - 「ボタン」エレメントを配置します。

  1. CSS エディタを開いてください。
  2. 以下の CSS を設定してください。

これで背景色に赤色のスタイルが適用されるかと思いますが、テーマの CSS に負けているのでまだ適用されません。

以下のように、CSS を変更してください。


このように指定すれば背景色に赤色のスタイルが適用されます。
しかし、標準テーマ利用時には適用されません。
Slim Side Menu テーマ (黄緑 (Greenery)) と標準テーマ (青) を見比べてみます。

Slim Side Menu テーマ (黄緑 (Greenery))

標準テーマ (青)

Slim Side Menu テーマ (黄緑 (Greenery))には適用されていますが、標準テーマ (青) には適用されていません。
しかし、以下の方法で適用することができます。

2. 標準テーマ利用時の imui の「ボタン」エレメントの背景色を CSS エディタで変更する

  1. CSS エディタを開いてください。
  2. 以下の CSS を設定してください。


適用させてみてみましょう。

ボタンの背景色が変わりました。

以上が、imui の「ボタン」エレメントの背景色を CSS エディタで適用する方法です。

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

IM-BloomMaker 排他制御エレメントの使い方

このCookBookでは、2021 Winterでリリースした共通エレメント「排他制御」の利用方法について紹介します。 「排他制御」エレメントは、特定の業務画面、特定の業務データにおける操作を排他的に …

no image

IM-FormaDesignerで複数のセレクトボックスを連動させて利用する方法

このCookbookでは、セレクトボックスの選択結果によって、他のセレクトボックスの選択肢を絞り込む方法を説明します。 この方法は、IM-FormaDesignerのみ導入環境での方法です。 IM-B …

no image

SAMLユーザマッピングのジョブを作成する

標準機能では、IdPユーザとintra-martユーザを紐付けるには以下の方法があります。・SAMLユーザマッピング画面からユーザ毎に登録する。・SAMLユーザマッピング画面からCSVファイルを利用し …

no image

IM-BloomMaker Bulma を使用した入力系画面の作成

intra-mart Accel Platform 2020 Summer から、コンテンツ種別「Bulma」が提供されました。 このCookBookでは、スクリプト開発モデルのサンプル登録画面をもと …

no image

IMBox に投稿種別を追加する方法(iframe)

この CookBook では、IMBox に投稿種別を追加する方法について紹介しています。 以下のドキュメントを参照することで、IMBox に投稿種別を追加することができます。 IMBox プログラミ …