【新エディタ対応】【HTMLガイドライン】3-記事内のUI（テキスト／リンク／box）

テキストルール

通常テキスト

基本ルール

• 通常フォントはpタグを使用する。
• pタグの中では strong, span, em, br が使用可能。
  • spanを使用する場合はclass名を付与すること。（そのままではZendeskに認識されない。）
  • 本文中の一部を強調するためのstrong多用は禁止。
  • FAQ記事内では本文中にem（斜体）を使用することはほぼない。
  • bigやsmallはZendeskで認識されないっぽい。（class付与しても無効）

表示＆ソースコード

通常フォント（p）

これは通常フォントです

強調フォント（strong）

文章の一部を強調しています。

斜体フォント（em）

文章の一部を斜体にしています。

注釈文

基本ルール

• 本文に対して注釈が必要な場合に使用する。
• ulやolを使用し、classに.note-listを付与する。
• 本文全体に対する注釈には「※」のulを使用し、特定の文字に対しての注釈には「※1, ※2...」が連番で付くolを使用する。
• 注釈に改行を入れることも可能。（改行後の文字もインデントされる）

表示＆ソースコード

本文全体に対する注釈の場合

本文です。本文です。本文です。本文です。本文です。

• 本文に対する注釈です。
• 本文に対する注釈です。
• 本文に対する注釈です。
  本文に対する注釈です。

特定の文字に対しての注釈の場合

本文です。ほんぶん^※1です。本文です。ホンブン^※2です。本文です。

1. ほんぶんに対する注釈です。
2. ホンブンに対する注釈です。
   ホンブンに対する注釈です。

例文

基本ルール

• 本文に対して例文が必要な場合に使用する。
• pタグを使用し、div classに.example-listを付与する。
• 例文に改行を入れることも可能。（改行後の文字もインデントされる）

表示＆ソースコード

本文です。本文です。本文です。本文です。本文です。

文字サイズ変更

基本ルール

• 特定の項目が羅列され明示的にわかりにくくなる場合にのみ他との差別化として「メイン要素」を上げて使う「class="important-text"」（文字上げ）
• 特定の項目が羅列され明示的にわかりにくくなる場合にのみ他との差別化として「補足要素」を下げて使う「class="note-text"」（文字下げ）

• Zendeskの仕様上、big, smallなどのタグは無効化され使用できない。

表示＆ソースコード

文字上げ

これは通常フォントです

これは文字上げされたフォントです。

文字下げ

これは通常フォントです

これは文字下げされたフォントです。

リンクルール

サイト内リンク（関連リンク）

基本ルール

• 同一サイト内の別ページへのリンク。
• 基本的に、本文に関連したページへのリンクに使用する。
• パスは、ルートパス（例：href="/hc/ja/..."）で記述してください。ただし、既存がURLで記述されている場合は、ルートパスへ修正する必要はありません。
• pタグに.relationのclassを付与して、aタグを囲うこと。（右寄せになる）
• 複数リンクがある場合、Airレジではbrが必要になる。（FAQにより異なる）

表示＆ソースコード

リンクが1つの場合

関連ページへのリンクです

リンクが複数の場合

1つ目の関連ページへのリンクです
2つ目の関連ページへのリンクです

外部リンク（通常リンク）

基本ルール

• 外部サイトへのリンク。
• 基本的に、本文に関連したページへのリンクに使用する。
• パスはURLで記述すること。
• リンク名は遷移先の記事タイトルにし、後に（遷移先サイトタイトル）を入れる
• pタグに.relationのclassを付与して、aタグを囲うこと。（右寄せになる）
• 複数リンクがある場合、Airレジではbrが必要になる。（FAQにより異なる）

表示＆ソースコード

外部サイトへのリンクです（遷移先サイトタイトル）

同一ページのページ内リンク

基本ルール

• 同一ページ内の特定のセクションに対してのリンクに使用する。
• リンク先のセクションに振られているidをaタグに記載する。

表示＆ソースコード

詳しくは、リンク先のセクションをご確認ください。

別ページのページ内リンク

基本ルール

• サイト内リンク、外部リンク問わず、別ページのページ内の見出しなどにリンクする場合に使用する。
• リンクのUIは、他のリンクルールと同様。

リンクの命名ルール

• 基本的には遷移先の見出しをリンク名にする。
• 遷移先の見出しに「STEP1. 見出し」など「STEP」が付いてる場合は、基本的に「STEP」を省略する。
• リンク名に記事タイトルを含める必要はないが、必要に応じて記事タイトルもリンク名に入れる。
  記事タイトルを含める場合は、このように記載する。「記事タイトル：見出し」
• 遷移先の見出しだけでは抽象的で説明不足の場合は、その上位の見出しを併用する。
  「{h2}半角スペース {h2}」、例えば「決済可能金額と決済取消について Airペイ QR」など。

サイト内リンク（導線リンク）

基本ルール

• 同一サイト内の別ページへのリンク。
• そのページまたはセクションから必ず見て欲しいページへのリンクに使用する。また、セクション内で使用するのは1つまでとする。
• パスは、ルートパス（例：href="/hc/ja/..."）で記述してください。ただし、既存がURLで記述されている場合は、ルートパスへ修正する必要はありません。
• pタグに.align-centerのclassを付与して、aタグを囲うこと。（中央寄せになる）

表示＆ソースコード

絶対に見て欲しいリンク

外部リンク（導線リンク）

基本ルール

• 外部サイトへのリンク。
• そのページまたはセクションから必ず見て欲しいページへのリンクに使用する。また、セクション内で使用するのは1つまでとする。
• リンク名は遷移先の記事タイトルにし、後に（遷移先サイトタイトル）を入れる
• 遷移先サイトタイトルが長い場合などは、2行にしても良い。
• パスは絶対URLで記述すること。
• pタグに.relationのclassを付与して、aタグを囲うこと。（右寄せになる）
• pタグに.align-centerのclassを付与して、aタグを囲うこと。（中央寄せになる）

表示＆ソースコード

外部サイトの絶対に見て欲しいリンク（遷移先サイトタイトル）

officeリンク

基本ルール

• リンク先がエクセル／ワードの場合に使用する。
• なるべく文書のサイズを明記する。
• エクセル／ワードはサイト内でDL（表示）させるもののみとし、外部のものは外部リンクとする。

表示＆ソースコード

ファイルがExcelの場合

Excelデータ(15.2KB)

ファイルがWordの場合

Wordデータ(15.2KB)

pdfリンク

基本ルール

• リンク先がpdfの場合に使用する。
• なるべく文書のサイズを明記する。
• Adobe Acrobat Readerについてのダウンロードリンクも記載する。
  • 複数のpdfリンクがある場合も、ACのダウンロードリンクは1つのみとする。
  • ダウンロードリンクはpdf利用セクション内一番下にいれる。
  • 複数のセクションで使用する場合はページ一番下に入れる。

表示＆ソースコード

pdfデータ(15.2KB)

Adobe Acrobat Reader(旧Adobe® Reader®) のダウンロード 

PDF形式の資料をご覧いただくには、Adobe Acrobat Reader(旧Adobe® Reader®) が必要です。 Adobe Acrobat Reader はアドビシステムズ社より無償配布されています。

boxルール

通常Box（グレー枠）

基本ルール

• 本文の手順や説明などの補足として使用する。
  • 例：設定した結果の表示説明や、メインの手順の派生形の説明など）
• box内には何を入れても自由だが、なるべく小見出しを付ける（小見出しはdl>dt, もしくはh4を使用する）。
• 小見出しにはh4以下のフォントを入れる。（h2, h3は使用しない）
• 小見出しが無い場合は、通常テキストを入れる。注釈のみのboxはNG。

表示＆ソースコード

小見出しがdtの場合

小見出しがh4の場合

boxの小見出し

テキストテキストテキストテキストテキスト

ソースコード

小見出しがdtの場合

boxの小見出し

テキストテキストテキストテキストテキスト

小見出しがh4の場合

boxの小見出し

テキストテキストテキストテキストテキスト

ポイント・Tips（青背景）

基本ルール

• ユーザーにとって知っていると利点になる情報に使う。
• box内には何を入れても自由だが、必ずh4で小見出しを付ける（小見出しにh2, h3は使用しない）。
• 見出しにはポイントやTipsとわかるワードを入れること。
  • 「〜もできます」「〜を活用できます」など。

表示＆ソースコード

注意（オレンジ背景）

基本ルール

• CLに対して注意事項に当たる情報に使う。
• box内には何を入れても自由だが、必ずh4で小見出しを付ける（小見出しにh2, h3は使用しない）。
• 見出しには注意事項とわかるワードを入れること。
  • 「〜の注意事項」「〜にご注意ください」など。

表示＆ソースコード

警告（ピンク背景）

基本ルール

• 法務的・セキュリティ的・アカウント的なリスクがある場合に使用する。（禁止事項や免責事項など）
• box内には画像は使用しない。必ずh4で小見出しを付ける（小見出しにh2, h3は使用しない）。
• 見出しには警告とわかるワードを入れること。
  • 「ご注意ください」「〜〜が必要です」など。

表示＆ソースコード

強調警告（赤枠）

基本ルール

• 短い文章での注意・警告文に使用する。
• box内に画像は入れない。必要な場合は小見出しをdl>dtで付ける。。

表示＆ソースコード

補足（クリックで開閉）

基本ルール

• 複数の項目説明の中の、サブ項目の説明などに使用する。

表示＆ソースコード

クリックすると表示されます

画像の説明

ソースコード

クリックすると表示されます

画像の説明

cssの他にscript.jsの設定が必要

jQuery(function(){
	if(jQuery(".click_accordion").length) {
		jQuery(".click_accordion a.trigger").on("click",function() {
			jQuery(this).next().stop().slideToggle(300);
			jQuery(this).toggleClass("up");
		});
	}
});