《Bubble》ID Attributeの正しい使い方

ID Attributeを有効にする方法

bubbleで配置したelelmentに、HTMLのIDを設定する方法は以下になります。

Settingページの「General」で「Expose the option to add an ID attribute to HTML elements」にチェックを入れます。

そうすることで、elementにID Attributeを設定する欄ができます。

1．具体的なユースケース

- CSSでスタイルを適用する

- HTML属性を適用する

- javascriptで要素を選択し、その要素に必要なことを記入する。

2．社内での活用方法

社内では、今のところCSSスタイルを適用するためにID Attributeを使う例がほとんどになります。

なぜCSSスタイルを当てる必要があるかというと、Bubbleのデフォルトの機能では再現できないデザインを実装する必要がある場合があるからです。

実用例：長いテキストエレメントに1行カットオフを適用させる

長いテキストを一行だけで表示させたいときに使います。

下のような長いテキストがあるとします。

このテキストエレメントに一行カットオフのID Attributeを設定すると、下のように一行だけ表示ができます。

解説

仕組みについて解説していきます。

１．CSSを設定する

Settingタブ＞SEO/metatags＞Script in the bodyにCSSを設定します。

２．プラグインをインストールする

プラグインタブからClassifyというプラグインをインストールします。

３．Option Setsに名前とクラスネームを設定する

📌Option Setは使わなくても実装はできます。

Option Setを使う理由としては、毎回手打ちすることでの入力ミスをなくすためです。

クラスとして複数のエレメントに適用できるようにOption Setsに設定します。

４．エレメントのID Attributeを設定

Get an optionでOption Setから設定します。

以上で完成です。プレビューで確認すると、