ヘルプセンター記事のソースコードの編集

ソースコードエディターを使って、ヘルプセンターの記事およびコンテンツブロックのHTMLソースを編集することができます。ソースコードエディターでは、標準のWYSIWYGエディターではできない方法で、ヘルプセンターのコンテンツをカスタマイズし、スタイルを設定することができます。

ヘルプセンターを安全に保ち、最良のエンドユーザーエクスペリエンスを提供するために、Zendeskは記事およびコンテンツブロックに使用できるHTMLを制限しています。

メモ：サポートされているHTML要素のリストについては、「ヘルプセンターの記事でサポートされるHTML」を参照してください。

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

• 記事のソースコードを編集する
• 記事のソースコードからスタイルを削除する
• ソースコードを編集する際の重要な考慮事項
  • 空のHTMLコンテナ要素
  • 安全でないHTML
  • 不明なHTML
  • ヘルプセンター記事にHTMLスタイルを設定する

記事のソースコードを編集する

記事のソースコードエディターを使って記事のHTMLを編集することで、ヘルプセンターの記事をカスタマイズすることができます。

記事のソースコードを編集するには

1. ヘルプセンターまたはGuideの管理パネルで、記事またはコンテンツブロックを作成または編集します。
2. 記事またはコンテンツブロックで、ツールバーのソースコードアイコン（）をクリックします。
3. ソースコードエディターで、使用したいソースコードを作成または編集します。サポートされているHTML要素のリストについては、「ヘルプセンターの記事でサポートされるHTML」を参照してください。

   

4. 「適用」をクリックして編集内容を保存し、ソースコードビューを閉じます。

記事のソースコードからスタイルを削除する

HTMLページからヘルプ記事にコンテンツをコピーして記事に貼り付けると、望ましくないスタイルが持ち込まれ、記事のソースコードが乱雑になり、ヘルプセンターの一貫性が損われる可能性があります。ソースコードエディターの「スタイルを削除」ボタンを使って、記事エディターの動作には不要なインラインスタイルを取り除くことができます。「スタイルを削除」ボタンを使用しても、CSSクラスやテーマには影響しません。また、記事エディターに必要なインラインスタイル（たとえば、フォントの前景と背景、テーブルセルの高さと幅）にも影響しません。

記事のソースコードからスタイルを削除するには

1. ヘルプセンターまたはGuideの管理パネルで、記事またはコンテンツブロックを作成または編集します。
2. 記事またはコンテンツブロックで、ツールバーのソースコードアイコン（）をクリックします。

   ソースコードエディターが開き、すべてのコードとインラインスタイルが表示されます。

   

3. ソースコードエディターで、「スタイルを削除」をクリックします。

   サポートされていないインラインスタイルが、ソースコードビューから削除されます。

   

4. 「適用」をクリックして編集内容を保存し、ソースコードビューを閉じます。
5. 「保存」をクリックして変更を保存します。

ソースコードを編集する際の重要な考慮事項

空のHTMLコンテナ要素

Zendeskは、iやspanなどの空のコンテナ要素の大半を自動的に削除します。これらの要素には、通常、レンダリングされるコンテンツが含まれていなければなりません。Zendeskは空のpタグは削除しません。代わりに が要素のコンテンツとして挿入されます。以下に例を示します。

<p>&nbsp;</p>

安全でないHTML

デフォルトでは、Zendeskは以下のHTML要素を安全でないと見なします。

安全でないHTML要素

applet, button, embed, form, input, object, script, textarea, style

記事内の安全でないHTMLの扱い

記事については、安全でないHTML要素やサポートされていないHTML属性がソースコードエディターによって削除されることはありません。代わりに、ヘルプセンターの記事を表示するために使用されるHTTPレスポンスで除外されます。その結果、記事が意図したとおりに表示されなくなる可能性があります。

安全でないHTMLを記事内に許可する

ヘルプセンターの記事内に安全でないHTMLを許可するように、デフォルト設定を上書きすることができます。

警告：この変更を行うと、ユーザーがブラウザで記事を開いたときに、潜在的に悪質なコードの実行が許可されることになります。

HTTPレスポンス内で安全でないHTMLを使用できるようにするには

1. Guideで、サイドバーにある設定アイコン（）をクリックします。
2. 「セキュリティ」で「安全でないコンテンツを表示」オプションを選択します。
3. 「更新」をクリックします。

コンテンツブロック内の安全でないHTMLの扱い

コンテンツブロックについては、安全でないHTML要素やサポートされていない属性がソースコードエディターによって削除されます。安全でない要素の中のコンテンツは、「不明なHTML」で説明したようにp要素に配置されます。

不明なHTML

サポートされていないHTML要素は不明とみなされます。サポートされていないHTMLは、コンテンツブロックとヘルプセンター記事のどちらを編集しているかによって処理方法が変わります。

コンテンツブロックを編集している場合、HTMLブロックはサポートされていないコンテンツを認識し、HTMLブロックで囲みます。コンテンツブロックエディタ内でHTMLブロックをクリックすると、そのブロックのコードだけを表示するソースコードエディタが開きます。このフォーカスビューを使用すると、コンテンツブロック全体のソースコードをスクロールすることなく、選択したコンテンツのHTMLを操作できます。詳しくは「HTMLブロックを使用したコンテンツブロック内のコードの編集」を参照してください。

記事のソースコードでサポートされていないHTMLを使用しようとすると、Zendeskは不明なタグを削除し、タグのコンテンツをp要素に配置します。たとえば、以下のHTMLでは、不明なmytag要素が含まれています。

<mytag>Hello world!</mytag>

ヘルプセンターを表示するためのHTTPレスポンスでは、mytag要素は削除され、代わりにp要素にコンテンツが配置されます。

<p>Hello world!</p>

ヘルプセンター記事にHTMLスタイルを設定する

Zendeskでは、ヘルプセンター記事のHTMLを記述するために、class属性と関連するCSSクラスを推奨しています。CSSクラスは、ヘルプセンターのテーマで定義する必要があります。詳細については、「ヘルプセンターのテーマのカスタマイズ」を参照してください。

ヘルプセンターのテーマでCSSルールを作成する場合、div.container > p > imgのようなネストしたセレクタの使用は避けてください。このようなルールはメンテナンスが難しく、意図しない要素をターゲットにしてしまう可能性があります。代わりに、.container-imageなど、クラスを直接スタイル設定するセレクタを使用します。その後、class要素を使って影響を受けるHTML要素に直接クラスを追加します。以下はその例です。

style属性を使用してHTML要素にインラインスタイルを適用することは避けてください。インラインスタイルはメンテナンスが難しく、一貫性のないスタイル設定になる可能性があります。