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

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

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

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

サポートされているHTML
空のHTMLコンテナ要素
安全でないHTML
不明なHTML
ヘルプセンター記事にHTMLスタイルを設定する
コンテンツブロックに関する制限事項

サポートされているHTML

このセクションでは、記事内およびコンテンツブロック内でサポートされるHTML要素、属性、コンテンツをリストアップします。このセクションのHTML要素は、リストアップした属性に加えて、以下のグローバル属性もサポートしています。

id, class, aria-*, data-*, title

重要：コンテンツブロックでは、ソースエディターでid属性とclass属性の使用が制限されています。詳細については、「コンテンツブロックでのHTMLの制限」を参照してください。

一部のHTML要素はインラインstyle属性をサポートしていますが、特定のプロパティに対してのみサポートスタイルの宣言を許可しています。たとえば、span要素の場合、インラインstyle属性を使ってできることは、background-colorプロパティやcolorプロパティの設定のみです。これらのプロパティは、「許可されているインラインスタイル」として明記されています。

注意：ほとんどの場合、Zendeskはインラインスタイルではなく、CSSクラスを使用してヘルプセンターのコンテンツを構成することを推奨します。詳しくは「ヘルプセンター記事にHTMLスタイルを設定する」を参照してください。

a

属性：href, target, title, name, rel

hrefで許可されるプロトコル：http, https, mailto, ftp, sftp, sms, tel

コンテンツ：@text, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

abbr

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

address

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

blockquote

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

br

属性：グローバル属性のみ

caption

属性：グローバル属性のみ

cite

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

code

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

col

属性：span

colgroup

属性：グローバル属性のみ

コンテンツ：col

dd

属性：グローバル属性のみ

del

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

dfn

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

div

属性：グローバル属性のみ

dl

属性：グローバル属性のみ

コンテンツ：dd, td

dt

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

em

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

figcaption

属性：グローバル属性のみ

figure

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figcaption, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

h1

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h2

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h3

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h4

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h5

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h6

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

hr

属性：グローバル属性のみ

iframe

属性：src, allow, allowfullscreen, mozallowfullscreen, webkitallowfullscreen, oallowfullscreen, msallowfullscreen, name, class, width, height, frameborder

許可されているインラインスタイル：aspect-ratio, width

srcで許可されるプロトコル：http, https, blob, data

コンテンツの埋め込みを許可されているドメイン: https://content.jwplatform.com/, https://fast.wistia.com/, https://play.vidyard.com/, https://player.vimeo.com/, https://players.brightcove.net/, https://web.microsoftstream.com/, https://www.loom.com/, https://www.microsoft.com/, https://www.youtube-nocookie.com/, https://www.youtube.com/

img

属性：src, alt, name

許可されているインラインスタイル：height, width

srcで許可されるプロトコル：http, https, blob, data

ins

属性：cite, datetime

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

kbd

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

li

属性：グローバル属性のみ

ol

属性：start, type, reversed

コンテンツ：li

p

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

pre

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

samp

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

small

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

source

属性：src, type

srcで許可されるプロトコル：http, https, blob, data

span

属性：name

許可されているインラインスタイル：background-color, color

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

strong

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

sub

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

sup

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

table

属性：グローバル属性のみ

コンテンツ：caption, colgroup, tbody, tfoot, thead, tr

tbody

属性：グローバル属性のみ

コンテンツ：tr

td

属性：colspan, rowspan

許可されているインラインスタイル：height, text-align, vertical-align, width

tfoot

属性：グローバル属性のみ

コンテンツ：tr

th

属性：colspan, rowspan, scope

許可されているインラインスタイル：height, text-align, vertical-align, width

thead

属性：グローバル属性のみ

コンテンツ：tr

tr

属性：グローバル属性のみ

コンテンツ：td, th

track

属性：default, kind, label, src, srclang

srcで許可されるプロトコル：http, https, blob, data

ul

属性：グローバル属性のみ

コンテンツ：li

var

属性：グローバル属性のみ

コンテンツ：@text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

video

属性：src, height, width, controls

srcで許可されるプロトコル：http, https, blob, data

コンテンツ：source, track

空の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を許可するように、デフォルト設定を上書きすることができます。この設定は、コンテンツブロック内の安全でないHTMLには影響しません。

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

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

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

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

コンテンツブロックについては、安全でないHTML要素やサポートされていない属性がソースコードエディターによって削除されます。安全でない要素の中のコンテンツは、「不明なHTML」で説明したようにp要素に配置されます。コンテンツブロック内に安全でない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要素にインラインスタイルを適用することは避けてください。インラインスタイルはメンテナンスが難しく、一貫性のないスタイル設定になる可能性があります。

コンテンツブロックに関する制限事項

コンテンツブロックについては、以下の例外を除き、id属性またはclass属性はソースコードエディターによって削除されます。

<h2>などの見出しタグは、id属性を保持します。
<div>タグは、class属性を保持します。

サポートされているHTML

a

abbr

address

blockquote

br

caption

cite

code

col

colgroup

dd

del

dfn

div

dl

dt

em

figcaption

figure

h1

h2

h3

h4

h5

h6

hr

iframe

img

ins

kbd

li

ol

p

pre

samp

small

source

span

strong

sub

sup

table

tbody

td

tfoot

th

thead

tr

track

ul

var

video

空のHTMLコンテナ要素

安全でないHTML

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

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

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

不明なHTML

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

コンテンツブロックに関する制限事項

0 コメント

関連記事