ソースコードエディターを使って、ヘルプセンターの記事およびコンテンツブロックのHTMLソースを編集することができます。ソースコードエディターでは、標準のWYSIWYGエディターではできない方法で、ヘルプセンターのコンテンツをカスタマイズし、スタイルを設定することができます。
ヘルプセンターを安全に保ち、最良のエンドユーザーエクスペリエンスを提供するために、Zendeskは記事およびコンテンツブロックに使用できるHTMLを制限しています。
サポートされているHTML
このセクションでは、記事内およびコンテンツブロック内でサポートされるHTML要素、属性、コンテンツをリストアップします。このセクションのHTML要素は、リストアップした属性に加えて、以下のグローバル属性もサポートしています。
id, class, aria-*, data-*, title
style
属性をサポートしていますが、特定のプロパティに対してのみサポートスタイルの宣言を許可しています。たとえば、span
要素の場合、インラインstyle
属性を使ってできることは、background-color
プロパティやcolor
プロパティの設定のみです。これらのプロパティは、「許可されているインラインスタイル」として明記されています。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
属性:グローバル属性のみ
コンテンツ:@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
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
属性:グローバル属性のみ
コンテンツ:@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
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
属性:グローバル属性のみ
コンテンツ:@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
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
属性:グローバル属性のみ
コンテンツ:@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
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
属性:グローバル属性のみ
コンテンツ:@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
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
コンテンツ:@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
tfoot
属性:グローバル属性のみ
コンテンツ:tr
th
属性:colspan
, rowspan
, scope
許可されているインラインスタイル:height
, text-align
, vertical-align
, width
コンテンツ:@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
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> </p>
安全でないHTML
デフォルトでは、Zendeskは以下の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
要素に配置します。
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
属性を保持します。
0 コメント
サインインしてコメントを残してください。