現在のプランを確認
Suite、すべてのバージョン Team、Growth、Professional、EnterpriseまたはEnterprise Plus
Support + Guide ProfessionalまたはEnterprise

2025年第2四半期に、Zendeskはアカウントに新しい記事エディターを導入しました。既存の記事エディターから新しい記事エディターへの移行は4段階に分けて実施されます。新しいエディターでは、HTMLとCSSレベルでの表のスタイル設定などに改善と変更が行われています。

新しいエディターは旧バージョンのエディターと100%の互換性がないため、新バージョンへのアップグレード時やアップグレード後に、表に何らかの共通の問題が発生する可能性があります。この記事では、テーマの開発者および管理者向けに、これらの問題の回避策と解決策を説明し、表がブランドのスタイルに合った見た目になるようにガイドします。

メモ：その他の問題や解決策が見つかった場合は、この記事の下部にあるコメントセクションにその情報をご記入ください。
この記事では、以下のトピックについて説明します。
  • 新しいエディターにおける表のスタイル設定の変更
  • アップグレード時の表の変換例
  • よくある問題と解決方法
  • テーマの開発者および管理者向けのベストプラクティス

新しいエディターにおける表のスタイル設定の変更

新しい記事エディターにおける表の最大の変更点は、HTML属性や外部のCSSクラスによって表のスタイルが設定されるのではなく、インラインCSSスタイルが表の要素（<table>、<tr>、<td> など）に直接適用されることです。新しい表は、<figure>タグで囲むようになりました。

  • 以前のエディターでは、HTML属性（cellpadding, border など）と一部のインラインCSSとの組み合わせが表のスタイルに適用されていました。

  • 新しいエディターでは、表のカスタマイズ（境界線の幅や色、背景色、セルの高さ/幅、テキストの色、パディングなど）はインラインCSSスタイルとして厳密に適用されます。

インラインスタイルは常に最も高いCSS特異性を持つため、以下の点に注意してください。

  • 表を対象とするカスタムテーマのCSSスタイルは、要素セレクターが同等またはより高い特異性を使用するか、!important を使用しない限り、これらのインラインスタイルを上書きしません。

  • 特異性に注意せずにHTML属性や要素セレクターを指定した古いテーマやCSSスタイルは、新しいエディターへのアップグレード後に表のスタイルが破損したり、一貫性なく適用される可能性があります。

アップグレード時の表の変換例

表を新しい記事エディターに変換する際の問題を、以下の例で説明します。

セル内のスペースが属性からインラインスタイルに変換された

従来の記事エディターでは [cellpadding] 属性でセル内のスペースを指定していましたが、新しい記事エディターではインラインスタイルを使用します。[cellpadding] 属性やそのプロパティを期待する要素に適用されていた以前のスタイルは、そのままでは機能しなくなります。

旧バージョンの記事エディター
<table cellpadding="20">
新しい記事エディター
<td style="padding: 20px;">

境界線の処理変更

以下の例は、旧バージョンのエディター、新しいエディター、および新エディターに変換された旧いスタイルの記事での表の境界線の処理方法を示します。

旧バージョンのエディターで表を挿入して生成されたHTML
<table style="border-collapse: collapse; width: 100%" border="1">
  <tbody>
    <tr>
      <td style="width: 50%">A</td>
      <td style="width: 50%">B</td>
    </tr>
    <tr>
      <td style="width: 50%">C</td>
      <td style="width: 50%">D</td>
    </tr>
  </tbody>
</table>
新しいエディターで表を挿入して生成されたHTML
<figure style="width: 100%" class="wysiwyg-table">
  <table style="border-style: solid; border-width: 1px">
    <tbody>
      <tr>
        <td style="border-style: solid; border-width: 1px">A</td>
        <td style="border-style: solid; border-width: 1px">B</td>
      </tr>
      <tr>
        <td style="border-style: solid; border-width: 1px">C</td>
        <td style="border-style: solid; border-width: 1px">D</td>
      </tr>
    </tbody>
  </table>
</figure>
旧バージョンのエディターから新しいエディターへ表を変換して生成されたHTML
<figure style="width: 100%" class="wysiwyg-table wysiwyg-table-align-left">
  <table
    style="border-collapse: collapse; border-style: solid; border-width: 1px"
  >
    <tbody>
      <tr>
        <td style="border-style: solid; border-width: 1px; width: 50%">A</td>
        <td style="border-style: solid; border-width: 1px; width: 50%">B</td>
      </tr>
      <tr>
        <td style="border-style: solid; border-width: 1px; width: 50%">C</td>
        <td style="border-style: solid; border-width: 1px; width: 50%">D</td>
      </tr>
    </tbody>
  </table>
</figure>

よくある問題と解決方法

このセクションでは、旧バージョンのエディターから新しいエディターへ表を移行する際に一般的に見られる問題と、その解決方法について説明します。

テーマのCSSが表のスタイル（セル内のスペース、境界線、色）を上書きしない

問題：表の境界線、セル内のスペース、または背景色をこれまで制御していたカスタムテーマのCSSが適用されないのは、新しいエディターでインラインスタイルを使用するようになったからです。

解決策：

  • CSSの特異性を高める：記事内の表の要素をターゲットにして、要素を具体的に示すセレクターを使用します。!important を追加すると、スタイルをインラインスタイルで上書きできます。
    .article-body table,
.article-body table td {
  border: 1px solid #ccc !important;
  padding: 10px !important;
  background-color: #f9f9f9 !important;
}
  • 要素のラッパーをターゲットにする：エディターによって、表は <figure> 要素（クラス .wysiwyg-table）で囲まれています。必要に応じてラッパーを次のようにカスタマイズしてください。
    figure.wysiwyg-table {
  margin: 1em auto;
  max-width: 90%;
}
  • HTML属性に依存するスタイルを更新する：テーマのスタイルで表のに属性セレクター（[cellpadding] や [border] など）を使用している場合、クラスやインラインスタイルを使用して新しい構造をターゲットにするように更新してください。

アップグレード後に表の表示が変わる

問題：表の幅や配置設定が失われたり、意図しない境界線や余白が表示されたりする。

解決策：
  • 新しいエディターでは、表はインライン幅で <figure> 要素内に配置されます。調整または上書きが必要になる場合があります。
    figure.wysiwyg-table {
  width: 100% !important;
  text-align: center;
}
figure.wysiwyg-table table {
  width: 100% !important;
  border-collapse: collapse;
}
  • テーマの table のデフォルトスタイルを確認し、新しい構造に適合させてください。

カスタムまたは複雑な表のHTMLに崩れや手動調整が発生する

問題：表をカスタムの属性やインラインスタイルでカスタマイズした場合、旧バージョンのエディターから新しいエディターへのアップグレードで、これらが正しく処理されない可能性があります。
メモ：旧バージョンのエディターでソースコードに手を加えて変更された表や、新しいエディターがサポートしないHTMLを含む表は、新しいエディターでHTMLブロック内にラップされます。このような場合、新しい記事エディターの表コンポーネントでは表を編集できません。この場合には、ソースコードエディターを使用してHTMLブロックを更新する必要があります。

解決策：

  • 移行された記事のHTMLソース内の表を確認します。
  • カスタムの表HTMLを新しいモデルに準拠するように調整するか、または作成し直します。
    • <table> を <figure class="wysiwyg-table"> で囲みます。
    • <table> と <td> の両方で境界線をインラインスタイルで設定します。

  • 複雑な表の互換性を確保するには、表を新しいエディターで再作成する方法があります。

テーマの開発者および管理者向けのベストプラクティス

新しい記事エディターへの表の移行時に問題の発生を最小限に抑えるためのベストプラクティスを以下に挙げます。
  • .wysiwyg-table、.article-body内の表、または表を囲む figure 要素をターゲットにする特定のCSSセレクターを使用します。
  • インラインスタイルを上書きする際に、!important を慎重に使用します。
  • 複数のブラウザとデバイスサイズで、アップグレードの前と後で表をテストします。
  • コンテンツの作成者に、インラインスタイルが含まれる可能性と、メンテナンスを容易にするため表のカスタマイズを最小限に抑える必要性を説明します。
  • 一括アップグレードや大規模なカスタマイズを行なう前に、記事コンテンツとヘルプセンターのテーマのバックアップを作成します。
Powered by Zendesk