--- title: リッチテキストモジュールを直接使わない方がよい｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ description: HubSpot CMSで誰でも運用できるテンプレートを作るとなると、必然的にフレキシブルカラムまたはDrag and Drop Areasを使うことになると思います。しかしリッチテキストモジュールを直接するよりも、カスタムモジュールを使用する方がベストプラクティスと考えます。 image: https://demo.100inc.co.jp/hubfs/Imported%20images/logo.png --- [![株式会社100ロゴ](https://demo.100inc.co.jp/hs-fs/hubfs/Imported%20images/logo.png?width=60&height=45&name=logo.png)](https://demo.100inc.co.jp) Jul 24, 2020, 12:00:00 AM[CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub) # リッチテキストモジュールを直接使わない方がよい ## 目次 HubSpot CMS（CMS Hub）で誰でも運用できるテンプレートを作るとなると、必然的にフレキシブルカラムまたはDrag and Drop Areasを使うことになると思います。 その際、通常のテキストや見出し、リストの表現にHubSpot標準のリッチテキストモジュールが有用です。.`hs_cos_wrapper_type_rich_text`クラスに子（孫）セレクタでCSSを当てることで、自由にスタイリングもできます。 しかし、執筆時点ではリッチテキストモジュールを直接するよりも、リッチテキストフィールドのみでも良いのでカスタムモジュールを使用する方がベストプラクティスと考えます。 というのも、リッチテキストモジュールを直接フレキシブルカラムやDrag and Drop Areasに配置した場合、出力前にコンテンツを制御することができません。逆に言うと、同じリッチテキストでもカスタムモジュールのリッチテキストフィールドを経由してコンテンツを出力するような形にしていると、HubLにてレンダリング前にHTMLに手を加えることができます。 例えばこのケースが有用なのは、画像の遅延読み込みです。 ``` ``` とすることで簡単に画像の遅延読み込みを実装できますが、仮にリッチテキストモジュールを使用する場合、画像を貼る度にいちいちソースコードを開き、img要素にloading属性を手作業で追加しなければなりません。大切な作業ではありますが、これは非常に面倒です（表示の関係で、全角の引用符を使用しています）。 これをカスタムモジュール経由にしていると、カスタムモジュール側で例えば ``` ``` という風に記述するだけで、**カスタムモジュールが使用されている全ての箇所に自動的に**画像の遅延読み込みを実装することができます。 画像の遅延読み込みだけでなく、アクセシビリティ対応などもあり、昨今ではHTML属性に後から手を加えることが非常に多くなっています。いまいま何か手を加える訳ではなくても、後々のためにリッチテキストは標準モジュールを使うのではなく、カスタムモジュールを経由させておいた方が良さそうです。 - [シェア](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Fdont-use-richtext-module) - [ツイート](https://twitter.com/share?text=%E3%83%AA%E3%83%83%E3%83%81%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%92%E7%9B%B4%E6%8E%A5%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84%E6%96%B9%E3%81%8C%E3%82%88%E3%81%84%EF%BD%9CTips%EF%BD%9C%E6%97%A5%E6%9C%AC%E3%83%88%E3%83%83%E3%83%97%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AEHubSpot%E3%83%86%E3%83%83%E3%82%AF%E4%BC%81%E6%A5%AD+%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%91%E3%83%B3%E3%82%BB&url=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Fdont-use-richtext-module) 執筆者：[Admin](https://demo.100inc.co.jp/blog/author/admin) ## 関連記事 ## 人気の記事 - Nov 22, 2019, 12:00:00 AM - [CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub) [カスタムモジュールのリピートコンテンツの入力が面倒な場合の対処法](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater) - Dec 30, 2022, 3:22:31 PM - [#sample](https://demo.100inc.co.jp/blog/tag/sample) [テストpost（複製）](https://demo.100inc.co.jp/blog/アカデミー練習-1-0) - Jun 20, 2019, 12:00:00 AM - [CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub) [CSSやJSの修正をすぐに確認したければ、プレビューURLで](https://demo.100inc.co.jp/blog/tips/check-update-on-preview-url) - Dec 11, 2017, 12:00:00 AM - [ブログ](https://demo.100inc.co.jp/blog/tag/ブログ) [INBOUND 2017参加レポート サブセッション編](https://demo.100inc.co.jp/blog/tips/inbound-2017-subsessions) - May 9, 2024, 1:20:53 PM - [#通常のタグ](https://demo.100inc.co.jp/blog/tag/通常のタグ) [test](https://demo.100inc.co.jp/blog/test-shida) © Pensees