新しい記事エディタでの画像と動画に関する問題のトラブルシューティング

新しい記事エディタに移行すると、画像や動画に余分なスペースや境界線がない、動画が正しく表示されないなどの問題が発生することがあります。

この記事では以下について説明します。

画像の問題をトラブルシューティングする
ビデオに関する問題のトラブルシューティング

画像の問題をトラブルシューティングする

画像に境界線を追加

新しい記事エディタは、旧バージョンのエディタで使用される表ベースの画像境界線をSupportしていません。境界線を追加するには、画像のスタイルオプションを使用するか、カスタムCSSクラスを画像に適用します。

CSSクラスを使用して画像の境界線を追加するには

画像を記事に挿入します
ツールバーの HTML ボタンをクリックしてソースコードエディタを開きます。
ソース内でイメージのimg要素を見つけます。CSSクラス名（「bordered-image」など）を追加します。img要素にclass="bordered-image"を設定します。
変更を保存する
ヘルプセンターのCSSに境界線のスタイルが含まれていることを確認します。以下に例を示します。

.bordered-image {
  border: 1px solid #ccc;
  border-radius: 4px;
}

インラインスタイルで画像の境界線を追加するには

画像を記事に挿入します
ツールバーの HTML ボタンをクリックしてソースコードエディタを開きます。
ソースで、画像のimg要素を見つけます。style=""属性を見つけるか、追加します。
境界線のスタイルをここに追加します。以下はその例です。
```
border-radius: 8px; border: 10px solid black;
```

style属性は次のようになります。

style="aspect-ratio: 1600/1067; border: 10px solid black; border-radius: 8px;"

変更を保存する

画像の歪みを防ぎ、画像サイズを管理

必要ない限り、新しい記事エディタで画像のサイズを変更しないでください。画像のサイズを変更した場合は、縦横比を維持するために、幅または高さの寸法を1つだけ変更します。エディターは、他のディメンションを自動的にスケールします。
Photoshop、GIMP、オンラインエディタなどの外部ツールを使用して、画像をアップロードする前にサイズを変更します
コピー＆ペーストの代わりに「画像を挿入」ボタンを使用します。コピー＆ペーストすると、不要なHTML属性を追加できます。
画像をデフォルトで100%の幅に設定する：
- 画像を挿入したら、その画像を選択し、画像ツールバーを使用して幅を100%に設定します
- グローバルソリューションの場合は、このCSSをヘルプセンターのテーマに追加します。

.article-body img {
  width: 100%;
  height: auto;
}

通知メールで画像が歪んで見える場合：
- widthとheightのHTML属性を<img>タグから削除する
- CSSを使用してサイズを設定するが、一部のメールクライアントではCSS属性を削除する
- 貼り付けた画像については、編集者がwidthとheightのHTML属性を削除し、CSSをsizeに使用していることを確認してください。

その他のヒントと修正

早期アクセスプログラムに参加している場合は、特定の記事を報告し、調査のためのアカウントアクセスを許可します。
ヘルプセンターのテーマを管理しない場合は、テーマの管理者または開発者に連絡してCSSの変更を依頼してください。
変更を本番環境に適用する前に、テスト環境で変更をテストする
CSSまたはテーマを変更した後にブラウザのキャッシュをクリアして、最新の更新を確認してください
大規模な移行の場合：
- ブラウザ開発者ツールを使用して問題表を見つけ、レビュープロセスをスピードアップする
- 影響を受ける各記事を手動で調整します。一括移行や修正ツールはありません。

これらの手順により、旧バージョンの記事エディタから新しい記事エディタに移行した後の画像や動画の表示に関するほとんどの問題が解決されます。ヘルプセンター記事の外観を一貫性のあるプロフェッショナルなものに保つことができます。

ビデオに関する問題のトラブルシューティング

旧バージョンの記事エディタから新しい記事エディタに移行すると、ヘルプセンターの記事に埋め込まれたビデオの表示が異なる場合があります。このセクションでは、特にカスタム埋め込みコードや非標準の動画プラットフォームで、埋め込み動画を正しく表示する方法について説明します。

埋め込みビデオを正しく表示するには：

ヘルプセンターの管理設定で「安全でないコンテンツを表示」設定をオンにする
この設定により、iframeとスクリプトを記事内にレンダリングできます
セキュリティに懸念がある場合は、この設定を有効にする前にITチームまたはセキュリティチームに相談してください。この設定はセキュリティに影響を与えるからです。

新しい記事エディタのビデオ埋め込みでは、Iframeベースの埋め込みコードのみがサポートされます。スクリプトタグ、ダイレクトリンク、カスタムdivタグなどの他のメソッドはサポートされておらず、エディタや公開された記事には表示されません。

埋め込みビデオを挿入するには、次の2つの方法があります。

ツールバーの「記事>に埋め込む」をクリックします。
Iframe埋め込みコードを記事のソースコードに直接貼り付けます
- 記事で非 Iframe 埋め込みを使用していた場合は、ビデオプロバイダーの Iframe ベースの埋め込みコードを使用するように更新します。
- すでにiframeを使用している場合は、「安全でないコンテンツを表示」をオンにして、各記事を更新せずにレンダリングするようにします。

動画のサイズを調整

新しい記事エディタでは、埋め込み動画はデフォルトで100%の幅に設定されます。サイズを変更するには、HTMLのwidth属性ではなくCSSを使用します。

.article-body iframe {
  width: 50% !important;
}

注意：HTMLエディタで動画の幅を直接編集しないでください。新しい記事エディタによって変更が上書きされる可能性があります。

ビデオが小さなサムネイルとして表示されたり、期待どおりに表示されない場合：

「安全でないコンテンツを表示する」がオンになっていることを確認します。
Iframeベースの埋め込みコードを使用する
問題が解決しない場合は、埋め込みコードの詳細とスクリーンショットを添付してSupportの連絡先またはプロダクトマネージャーに報告してください。

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

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

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