概要
BubbleはStylesにより色や線の太さなどの外見を整えることができます。
しかし、スタイルに該当しないような、エレメント内の文字の位置を調節したり、部分的に非表示にしたい場合は、個別にCSSを適用する必要があります。
CSS Toolsプラグインのインストール
CSS Toolsプラグインをインストールすると、Bubble内でCSSを指定できるようになります。
左メニューの「Plugins」から、CSS Toolsを検索してインストールします。
プラグインの詳細はCSS Toolsのプラグインページにあります。
![画像1](https://assets.st-note.com/production/uploads/images/50903264/picture_pc_5029689852ab96773150b1f7058f5dad.png?width=800)
CSS Toolsエレメントを画面に配置
プラグインをインストールすると、エレメントに「CSS Tools」が選べるようになります。
これを、画面のどこか好きな位置に配置します。
![画像2](https://assets.st-note.com/production/uploads/images/50903707/picture_pc_fd647bb9c9629abc8bec9977e243369f.png)
エレメント個別にIDを付与できるようにSettingsを設定
CSSを適用したいエレメントがButtonやTextの場合は、エレメントに手動でIDを付与する必要があります。
左メニューの「Settings」の「General」タブの「General appearance」にある「Expose the option to add an ID attribute to HTML elements」にチェックを入れます。
![画像6](https://assets.st-note.com/production/uploads/images/50908224/picture_pc_50c89c195af72eec18b46fa19f27c444.png?width=800)
CSSを適用したいエレメントにIDを付与
CSSを適用したいエレメントがButtonやTextの場合は、エレメントに手動でIDを付与します。
![画像5](https://assets.st-note.com/production/uploads/images/50907938/picture_pc_047525f492a42b958e0a0c0d33f0b625.png?width=800)
WorkflowのWhenでトリガを指定
左メニューの「Workflow」を開き、CSSを適用したいタイミングを指定します。ページロード時なら「General」ー「Page is loaded」、ボタンを押した時なら「Elements」ー「An element is clicked」で対応させたいボタンを指定します。
WorkflowのActionで、エレメントにCSSのクラスを追加
Actionで、「Element Actions」ー「Add Class by ID a CSS Tools」を選択します。
![画像9](https://assets.st-note.com/production/uploads/images/50909942/picture_pc_643f45117d3ab3b3210cc7a5c4377b3c.png?width=800)
変更したいエレメントのID(上記で指定したもの)と、追加したいCSSクラス名を指定します。
![画像7](https://assets.st-note.com/production/uploads/images/50908793/picture_pc_070a9b4fdcac12a8a945f71dd2ff5981.png?width=800)
WorkflowのActionでCSSを指定
そして、次のActionで、「Element Actions」ー「Add Custom Style To Head a CSS Tools」を選択します。
![画像3](https://assets.st-note.com/production/uploads/images/50904492/picture_pc_fbf1611b2a6dbd8676c045b88e7539ac.png?width=800)
「Your CSS」欄に、CSSを指定します。
![画像8](https://assets.st-note.com/production/uploads/images/50908976/picture_pc_ed8ddfce9b7d5096162c7789b32a9b3b.png?width=800)
既存のエレメントのCSSにも適用することができます。例えば、Full Calenderで開始時刻を隠したい場合は、以下の画像のように指定します。
![画像4](https://assets.st-note.com/production/uploads/images/50905921/picture_pc_078b80f8a6257e6bb79905f8ce7ae686.png?width=800)
CSSのclassやidは、ブラウザの開発者ツールなどでも調べることができます。
WorkflowのActionで、エレメントからCSSのクラスを削除
元に戻したい場合は、上記で追加したCSSのクラスを削除します。
Actionで、「Element Actions」ー「Remove Custom Style To Head a CSS Tools」を選択します。
![画像10](https://assets.st-note.com/production/uploads/images/50910164/picture_pc_a7020c85b42223fedff25fc18fa0706f.png?width=800)
削除したいエレメントのIDとCSSのクラス名を指定します。
![画像11](https://assets.st-note.com/production/uploads/images/50910291/picture_pc_b4ff941d33efec0055a140e989a8c4a2.png?width=800)
以上でCSSを追加・削除できるようになります。
参考
YouTube動画:Quick Tips – Add CSS to individual elements in Bubble.is