良いものを作りたい

ITや新しい技術、スタートアップ、ビジネスについて書きます。

Zendeskヘルプセンターの記事に目次を入れる方法

Zendeskのヘルプセンターをマニュアルとして使っていますが、目次を作る機能がありませんでした。目次はあったほうが良いと思いました。探しても目次の作り方を説明している記事がありませんでした。手作業で作りました。これがその結果物です。もし簡単に目次が作れる機能があったりしたら教えてください。

 

目次*1

1. aタグで区切りを作る

目次を作るならまず区切りが必要です。適当な見出しを区切りにすると良いでしょう。

適当な区切りが見つかったらaタグで名前をつけましょう。Zendeskのソースコード機能を使います。

f:id:bankr:20191122191504p:plain

ソースコード機能ボタンはツールバーの右側にあります。

ソースコードから区切りを見つけましょう。<h(数字)> </h(数字)>に囲まれている可能性が高いです。文章をコピーしてCtrl+Fで探しても良いでしょう。

 

f:id:bankr:20191122191650p:plain

区切りにしようとした文章を探しましょう。

区切りにしようとしていたところの上に以下のタグを入れましょう。

<p>
<a name="(適当な英単語)1"></a>
</p>

f:id:bankr:20191122192154p:plain

こんなふうに。

区切りには全部入れましょう。同じ数字を二度入れてはいけません。1ずつ増やすと便利です。

f:id:bankr:20191122192322p:plain

こんな感じで。

f:id:bankr:20191122192603p:plain

うまくできたら区切りの上に何かが現れます。無視しましょう。

これで区切りに名前をつけることは完了です。

 

2. それっぽい目次を作る

手で作りました。

f:id:bankr:20191122192808p:plain

コピペして見出しを解除した後「記号付きリスト」にしました。

これだけだと何かが足りないですね。

f:id:bankr:20191122192931p:plain

大きな字で「目次」と書きました。

f:id:bankr:20191122193044p:plain

ソースコードに<hr>を入れるとなんと

f:id:bankr:20191122193133p:plain

線が引けます。

<hr>

を入れると線が引けますよ。

これで目次っぽい物ができました。

 

3. リンクをかける

目次の項目ごとにリンクをかけましょう。

#(区切りの名前)をリンク先にすると、クリックした時に区切りのところに行かせます。

f:id:bankr:20191122193350p:plain

ドラッグで選択して鎖ボタンを押します。

f:id:bankr:20191122193629p:plain

先付けた区切りの名前に#を入れて記入しましょう。

f:id:bankr:20191122193742p:plain

他の項目も同じように。数字に注意!

f:id:bankr:20191122193924p:plain

目次の項目が全部青くなったら終わりです。

もれなくリンクをつけて、目次の項目が全部青くなったら終わりです。

公開する前にまずページに入ってみてリンクが正しく繋がっているか確認しましょう。数字を間違えたり、飛ばしてたりしたら変なところに飛ばされます。

 

目次作りはこれで全て完了です。Zendeskは、どうして目次機能を提供してないんですかね。<hr>もツールバーで提供して欲しいですし。

もしゼンデスクで目次を作るもっと簡単なやり方があったらぜひ教えてください。よろしくお願いします。

*1:この目次はHatenaが自動で作ってくれました。