---
title: リッチテキストモジュールを直接使わない方がよい
description: HubSpot CMSで誰でも運用できるテンプレートを作るとなると、必然的にフレキシブルカラムまたはDrag and Drop Areasを使うことになると思います。しかしリッチテキストモジュールを直接するよりも、カスタムモジュールを使用する方がベストプラクティスと考えます。
---

[カテゴリ実装例ブログ](https://demo.100inc.co.jp/category-test)

# [リッチテキストモジュールを直接使わない方がよい](https://demo.100inc.co.jp/category-test/tips/dont-use-richtext-module)

 作成者: [半田 惇志](https://demo.100inc.co.jp/category-test/author/半田-惇志)｜Jul 23, 2020, 3:00:00 PM

HubSpot CMS（CMS Hub）で誰でも運用できるテンプレートを作るとなると、必然的にフレキシブルカラムまたはDrag and Drop Areasを使うことになると思います。

その際、通常のテキストや見出し、リストの表現にHubSpot標準のリッチテキストモジュールが有用です。.`hs_cos_wrapper_type_rich_text`クラスに子（孫）セレクタでCSSを当てることで、自由にスタイリングもできます。

しかし、執筆時点ではリッチテキストモジュールを直接するよりも、リッチテキストフィールドのみでも良いのでカスタムモジュールを使用する方がベストプラクティスと考えます。

というのも、リッチテキストモジュールを直接フレキシブルカラムやDrag and Drop Areasに配置した場合、出力前にコンテンツを制御することができません。逆に言うと、同じリッチテキストでもカスタムモジュールのリッチテキストフィールドを経由してコンテンツを出力するような形にしていると、HubLにてレンダリング前にHTMLに手を加えることができます。

例えばこのケースが有用なのは、画像の遅延読み込みです。

```
<img loading=“lazy”>
```

とすることで簡単に画像の遅延読み込みを実装できますが、仮にリッチテキストモジュールを使用する場合、画像を貼る度にいちいちソースコードを開き、img要素にloading属性を手作業で追加しなければなりません。大切な作業ではありますが、これは非常に面倒です（表示の関係で、全角の引用符を使用しています）。

これをカスタムモジュール経由にしていると、カスタムモジュール側で例えば

```
{{ module.content|replace('<img)', '<img loading=“lazy”') }}
```

という風に記述するだけで、**カスタムモジュールが使用されている全ての箇所に自動的に**画像の遅延読み込みを実装することができます。

画像の遅延読み込みだけでなく、アクセシビリティ対応などもあり、昨今ではHTML属性に後から手を加えることが非常に多くなっています。いまいま何か手を加える訳ではなくても、後々のためにリッチテキストは標準モジュールを使うのではなく、カスタムモジュールを経由させておいた方が良さそうです。

[完全な記事を表示](https://demo.100inc.co.jp/category-test/tips/dont-use-richtext-module)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "半田 惇志"
  },
  "dateModified" : "2022-06-09T06:31:14.109Z",
  "datePublished" : "2020-07-23T15:00:00Z",
  "headline" : "リッチテキストモジュールを直接使わない方がよい",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://demo.100inc.co.jp/category-test/tips/dont-use-richtext-module",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "カテゴリ実装例ブログ"
  }
}
```