# bubbleでCMSを機能を作る場合

**URL:** <https://www.nocode-faq.com/t/topic/3337>\
**Category:** bubble\
**Created:** [2022 年 12 月 14 日午前 12:12 UTC](https://www.nocode-faq.com/t/topic/3337 "2022-12-14T00:12:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wataru](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/wataru/32/2147_2.png) [@Wataru](https://www.nocode-faq.com/u/Wataru)\
**Post date:** [2022 年 12 月 14 日午前 12:12 UTC](https://www.nocode-faq.com/t/topic/3337/1 "2022-12-14T00:12:29Z")

</div>

bubbleでwebサイトを構築するのですが、CMS機能も追加したいです。

簡易的なCMSならbubbleでもできると思うのですが、結構リッチなページの作成が必要になります。

例えば類似の例でいうと以下のページのような記事をかけるようにしたいです。

> **[自由が丘クリニックの施術体験｜【糸リフト】引き上げだけじゃない ?!「美人顔」へと導く手技とは?@美容ヒフコ](https://biyouhifuko.com/report/6575/)**
>
> 美容医療の専門家が集まる自由が丘クリニック。総合的な視点で一番効果的な提案をしてくれることで評判。今回は、山下莉奈が、糸リフト(片側３本ずつ)とヒアルロン酸注入(５本分・片顔合計７箇所）の施術に挑戦！

上記例のように、会話形式で色のついた吹き出しがあって、双方でやりとりしてるような感じも表現できるような感じにしたいです。

となるとこの部分はbubbleじゃできない…ですよね？  
そうするとどんな代替え案があるかご教示いただけると嬉しいです。

例えば、この記事ページ・CMS部分だけ別サービスで作ったりするのがいいでしょうか？  
その場合、どんなツール（wordpress？studio？）が良いでしょう？

それとも、このページだけフロントエンドエンジニアが静的なhtmlページを作っちゃってbubbleの中のどこかに置く…とかそんなことってbubbleはできたりしますでしょうか？（よくわかっていなくすみません…）

アドバイスいただけると幸いです。  
宜しくお願い致します 🙇‍♂️

---

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2022 年 12 月 14 日午前 10:25 UTC](https://www.nocode-faq.com/t/topic/3337/2 "2022-12-14T10:25:03Z")

</div>

HTML code elementを使うことで、吹き出しを表現することは可能です。  
ただ、ブログのように吹き出しを使うとなると毎回HTMLコードを入力するのも面倒なので  
OptionSetsにコードを保管しておき、都度呼び出す方法が良いかと思います。  
実際に記事を書くときには、吹き出しを選んでコピーし、記事執筆用のFormに貼り付けるではどうでしょうか。

ただRich text editorに貼り付けると添付画像の用に見た目が反映されません。

 ![スクリーンショット 2022-12-14 19.20.09](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/6e7e48deaaa6278ed589205349f6fafe2875b9c1.png)  
HTML Elementに書き出すとこのように吹き出しになっています。  
 ![スクリーンショット 2022-12-14 19.20.03](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/9/9c2b1f8268e816818e8b11bb7aa442380cbd1016.png)

コードとしてはおかしくないのですが、  
表示されないので、別のinputプラグインを試すといいかもしれません。  
もし解決策をご存知の方がいましたら、補足いただけると幸いです。

また、今回の実装にはinputForm用に「Rich Text Editor」プラグインと

> **[Rich Text Editor Plugin for Bubble, by Bubble](https://bubble.io/plugin/rich-text-editor-1580238841425x582072028873097200)**
>
> Rich Text Editor Plugin page on Bubble, by Bubble. Add Rich Text Editor in one click to your app. Bubble lets you build web apps without any code.

Air Copyプラグインを使用しました。

> **[Air Copy to clipboard Plugin for Bubble, by Zeroqode](https://bubble.io/plugin/air-copy-to-clipboard-1497473108162x748255442121523200)**
>
> Air Copy to clipboard Plugin page on Bubble, by Zeroqode. Add Air Copy to clipboard in one click to your app. Bubble lets you build web apps without any code.

---

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2022 年 12 月 14 日午後 8:46 UTC](https://www.nocode-faq.com/t/topic/3337/3 "2022-12-14T20:46:28Z")

</div>

補足になります。  
RichText EditorではHTMLタグ内に全てのCSSコードを書く必要があるので、吹き出しで使用するbeforeを書くのが難しいのと、コードの管理が複雑になってしまいます。  
そこで、CSS用にCSSToolsプラグインを導入してみたところ吹き出しの表現ができました。

> **[CSS Tools Plugin for Bubble, by Zeroqode](https://bubble.io/plugin/css-tools-1504424270272x619283445634039800)**
>
> CSS Tools Plugin page on Bubble, by Zeroqode. Add CSS Tools in one click to your app. Bubble lets you build web apps without any code.

作り方としては、Option Setsに

ここに文字を入力

と登録しておいて  
RitchTextの設置しているページにCSS Toolを設置  
Work FlowのPage loardedをトリガーとし、CSSを読み込ませます。  
読み込ませるコード↓

```auto
.left-baloon:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #e0edff;
}
.left-baloon {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

```

これで吹き出しをコピーして貼り付けることができます。  
ただ、DBへの保存時に``という文字がくっついてきてしまうので、  
find&replaceを使って削除しようと思いましたが、だけがどうしても消えませんでした。  
以上、進捗報告です。  
もう少しいい方法があれば別途共有します。

 ![スクリーンショット 2022-12-15 5.43.59](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/fbe72046d390869cce05aafa6eacfb611f95ef6b.png)

---

<div class="post-metadata">

**Author:** ![Wataru](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/wataru/32/2147_2.png) [@Wataru](https://www.nocode-faq.com/u/Wataru)\
**Post date:** [2022 年 12 月 15 日午前 2:11 UTC](https://www.nocode-faq.com/t/topic/3337/4 "2022-12-15T02:11:07Z")

</div>

> [@john03tgck01a](#):
>
> HTML code elementを使うことで、吹き出しを表現することは可能です。

ありがとうございます！なるほどですね！！  
めちゃくちゃ調べていただいてとても嬉しいです…！！まさにやりたかったことです。

> また、今回の実装にはinputForm用に「Rich Text Editor」プラグインと  
> Air Copyプラグインを使用しました。

承知しました、参考に致します！