旧バージョンの記事エディタから新しいエディタに移行すると、テーブルスタイルの問題が発生する場合があります。

この記事では、新しいエディタに移行した後の一般的な問題の解決方法について説明します。

この記事では、次のトピックについて説明します。

  • 表の折り返しを<図>の要素で固定する方法
  • テーブルのヘッダーとヘッダーレベルのフォーマットの問題を修正する方法
  • テーブルのフォーマットと配置の問題を修正する方法

<Figure>要素内のテーブルの折り返しを修正する方法

新しい記事エディタでは、<figure>タグを使用して、さまざまなブラウザやプラットフォームの表に一貫したスタイルと機能を提供します。この動作は、新しいエディタのテーブルプラグインアーキテクチャの一部です。テーブルの高さの制限や不要なフォーマットの問題など、スタイルの問題が発生する可能性があります。このセクションでは、この問題が起きる理由と、防止または修正する方法について説明します。

重要：大きな変更を加える前に、CSSとコンテンツをバックアップしてください。

新しい記事エディタは、表を<figure class="table">要素でラップし、カスタムクラスを上書きするインラインスタイルを適用できます。

これを修正するには、テーブルスタイルを復元します。

  1. CSSセレクタを更新して、新しいマークアップをターゲットにします。
    • figure.table table { /* your table styles */ }
    • figure.table th, figure.table td { /* cell styles */ }
  2. 必要に応じて控えめに!importantを使用してインラインスタイルを上書きします
  3. サイト全体に適用する前に、重複した記事で変更をテストする

テーブルの折り返しの問題を防止または修正するには

  • ヘルプセンターのCSSを見直して、<figure class="table">要素にmax-heightやオーバーフロー設定などの制限的なスタイルがないことを確認します。
  • スタイルに問題がある場合は、以下に示すようにCSSをターゲット<figure class="table">に更新します。
    figure.table {
    max-height: none;
    overflow: visible;
    }
  • コンテンツを移行する場合は、<figure>タグを手動で削除しないでください。新しい記事エディタは、コンテンツを編集するときに、それらの記事を再び追加することがあります。
メモ：このガイダンスは一般的な製品知識に基づいており、元のチケットには明示的に存在しません。新しい記事エディタは、機能 Support と一貫性のために、<figure> ラッパーに依存しています。ヘルプセンターのCSSをカスタマイズすることは、エディタの出力HTMLを変更するのではなく、スタイルの問題を解決するために推奨される方法です。

テーブルのヘッダーとヘッダーレベルのフォーマットの問題を修正する方法

移行後によくあるフォーマットの問題：

  • テーブルのヘッダーの背景色やスタイルが失われる可能性があります
  • テーブルのヘッダーセルが誤ってH2テキストに変換される場合がある
  • デフォルトまたはカスタムCSSの変更により、H2、H3のサイズが異なる場合があります
  • 編集者がテーブルの変更を期待どおりに保存しない

移行後に表のヘッダーが正しく表示されるようにするには

  1. ヘルプセンターのテーマに、<thead>または<th>要素を対象とするCSSルールを追加します。以下はその例です。
    thead { background-color: #f5f5f5; }
    th { background-color: #f5f5f5; }
  2. 既存の<th>スタイルを維持または更新して一貫性を維持する

新しい記事エディタでテーブルヘッダーを設定するには

  1. 記事で、テーブルを選択し、一番上の行をクリックします。
  2. 「行」ドロップダウンから、「ヘッダー行」オプションをオンにします。
    • ヘッダー行オプションがない場合は、HTMLソースに<thead>と<th>要素を手動で追加するか、新しい記事エディタの設定で使用可能なプラグインまたはエディタオプションを確認してください。

H2またはH3のスタイルが正しくない場合

ヘッダーレベルの見直しと更新：

  1. 新しい記事エディタで記事を編集する
  2. エディターがH2に変換した表ヘッダーテキストを選択します
  3. 表のヘッダーや通常のテキストなど、正しいスタイルにフォーマットを変更する

CSSを使用してヘッダーレベルサイズを調整する：

  1. 「ナレッジベース管理」> 「デザインをカスタマイズ」> 「カスタマイズ」> 「コード>のスタイルを編集」 CSS テーマをカスタマイズ
  2. CSSを更新して、H2やH3などのスタイルを希望のサイズに合わせて変更します
  3. 「公開」をクリックする前に、プレビュー機能を使用して最終的な形式を確認します。

エディタが表の変更を保存しない場合、または変更がないなどのエラーが表示される場合：

  1. 問題を再現してください
  2. HTTPアーカイブ（HAR）ファイルと画面キャプチャ
  3. さらにサポートが必要な場合はZendeskカスタマーサポートにお問い合わせください

詳細については、以下の記事を参照してください。

  • 新しい記事エディターへの移行時の表のスタイル設定の修正
  • ヘルプセンター記事への表の追加と書式設定
ヒント：更新する記事が多い場合は、ヘッダーのレベルとスタイルを標準化するバッチスクリプトまたは移行ツールを検討してください。一括変更を行う前に、必ず記事をバックアップしてください。新しい記事エディタの実装に特定のテーブル機能がない場合は、利用可能なプラグインをチェックするか、プラットフォーム管理者に連絡して拡張機能について確認してください。

テーブルのフォーマットと配置の問題を修正する方法

移行後の一般的な問題：

  • 幅と境界線のカスタムテーブルスタイルは以前と同様に適用されません
  • テキストサイズとセルのスペースに一貫性がない
  • 移行中に表のクラスと境界線のスタイルが変更された
  • ヘッダー行が<thead>と<tbody>の間で分割され、スタイルの一貫性がなくなる

これらの問題を解決するには、次の手順に従います。

  • ヘルプセンターのCSSをターゲット表の要素に更新する
    .article-body td, .article-body th {
    padding: 20px;
    font-size: 16px;
    }
  • テーブルの配置を修正
    • 新しい記事エディタのテーブル配置オプションを使用します。新しい記事エディタには、旧バージョンのエディタよりも機能が少ない場合があります。
    • テーブルが毎回中央に配置される、または整列されない場合は、CSSを追加または調整します。
      .article-body table {
      margin-left: 0 !important;
      margin-right: auto !important;
      }
  • テーブルのセルスペースと配置の管理
    • セルスペースを設定する不要なインラインスタイルを削除し、テーマのCSSがそのプロパティを制御する
    • テーマCSSで目的のセルスペースを定義する
  • テーブルのクラス、境界線、ヘッダーを調整する
    • 新規または変更されたテーブルクラスのCSSルールを更新する（例：.nonItemList）
    • すべてのヘッダー行が<thead>内にあり、適切にスタイル設定されていることを確認する
    • 必要に応じて、ヘッダー行を<tbody>から<thead>に移動する
  • 変更をテストして確認する
    • 影響を受ける記事を新しい記事エディタでプレビューし、フォーマットを確認します
    • カスタムテーブルを含む各記事について、手動でのレビューが必要になる可能性があるため、この手順を繰り返します。

詳細については、「新しい記事エディタへの移行」を参照してください。

翻訳に関する免責事項：この記事は、お客様の利便性のために自動翻訳ソフ トウェアによって翻訳されたものです。Zendeskでは、翻訳の正確さを期すために相応の努力を払っておりますが、翻訳の正確性につ いては保証いたしません。

翻訳された記事の内容の正確性に関して疑問が生じた場合は、正式版である英語の記事 を参照してください。

Powered by Zendesk