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

Formaのスクリプトから処理対象者を制御するには

このCookBookでは、スクリプトを利用してIM-Workflowの動的ノード(動的承認、縦配置、横配置)の処理対象者を制御する方法をご紹介します。 スクリプトから動的処理対象者設定機能を利用するこ …

no image

IM-BloomMaker 異なるコンテンツ間でアクションをコピーする方法

この CookBook では intra-mart Accel Platform 2021 Winter から利用可能になったアクションの複製機能を使用して、異なるコンテンツ間でアクションをコピーする …

no image

IM-BloomMaker と IM-LogicDesigner を組み合わせて、請求書を Excel でダウンロードする方法

この CookBook では intra-mart Accel Platform 2021 Spring から追加された、「IM-LogicDesigner フロールーティングにリクエストを送信する」 …

no image

imuiListTableで行の背景色を動的に変更する方法

このCookBookでは、imuiListTableで行の背景色を動的に変更する方法について紹介しています。 imuiListTableについての詳細はAPIドキュメントを参照してください。 [imu …

no image

ワークスペース機能におけるイベントカレンダーの利用例

このCookBookでは「intra-mart Accel Collaboration」ワークスペース機能におけるイベントカレンダーの利用例について紹介しています。 intra-mart Accel …