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

バージョンアップを認めずパッチのみを許可する module.xml の依存関係の指定方法の書き方

この CookBook では、module.xml の依存関係の書き方について紹介しています。 記事のタイトルにあるように、モジュールを特定のバージョンのパッチまでに依存する方法についてご紹介します。 …

no image

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

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

ワークフローの一覧を使い分けるには(スマートフォン版)

このCookbookでは、以前に公開した「ワークフローの一覧を使い分けるには(改訂版)」に関して、お問い合わせいただいた内容を追加してスマートフォン画面でワークフローの一覧の検索条件を付与する方法をご …

【ViewCreator】LogicDesignerと連携してデータ参照の一覧を表示するデータ参照を作成する方法

ViewCreator において、標準の「データ参照一覧」画面では以下のような変更ができません。 「説明」を一覧に表示する。 「データ参照名」の(初期表示時の)列幅を変更する。 各データ参照の表示画面 …

no image

IM-LogicDesignerで、Redmineカスタムクエリのチケット一覧を取得する方法

このCookBookでは、IM-LogicDesignerを使用してRedmineのチケット (issues) 一覧を取得する方法を紹介します。 Redmineは、外部からチケット一覧を取得するための …