ヘルプセンターのテーマに独自のアセットを使用する方法

ファストパス：Guide管理 >「デザインをカスタマイズ」>「テーマを選択」>「編集」>「アセット」

画像やファイルなどのアセットを任意のヘルプセンターのテーマにアップロードできます。

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

• テーマのアセットをアップロードする
• アップロードしたアセットをテーマのコード内で使用する
• テーマのアセットを差し替える
• テーマのアセットを削除する

テーマのアセットをアップロードする

画像やファイルなどのアセットをヘルプセンターにアップロードできます。アセットはクラウドデリバリネットワーク（CDN）内のWebキャッシュに保存されます。Webキャッシュは、帯域幅要件とサーバーの負荷を緩和し、応答時間を短縮します。

テーマで使用できるファイルタイプはいくつかあります。「テーマアセットで使用できるファイルタイプ」を参照してください。

独自のアセットをテーマにアップロードするには

1. Guideで、サイドバーにあるデザインをカスタマイズアイコン（）をクリックします。
2. 編集したいテーマで「カスタマイズ」をクリックします。
3. 「コードを編集」をクリックします。

   

4. 「ファイル」セクションで、「新規追加」をクリックし、「アセット」を選択します。

   

5. ファイルのある場所へ移動して選択します。テーマのアセット名は一意の名前で、50文字以内にする必要があります。アセット名には、文字、数字、ピリオド、マイナス記号、プラス記号、アンダースコア、ダッシュなどを含めることができます。アセット名は大文字と小文字を区別しません。したがって、asset.jpgとAsset.jpgというアセット名を同時に使用することはできません。

   選択したアセットファイルが、アセットファイルのリストに追加されます。

テーマアセットで使用できるファイルタイプ

次の表に、テーマアセットに使用できるファイルタイプを示します。アセットに使用できるファイルタイプは、ヘルプセンターのテーマに使用されているファイルタイプに限定されます。

アセットタイプ	使用できるファイルタイプ
画像	jpg、jpeg、png、gif、svg、webp、tiff、tif、bmp、ico、webm
フォント	woff2、woff、eot、otf、ttf、svg
テキストファイル	js、css、html、json、txt、xml
その他	mp4、swf、wav、ogg、mp3

Microsoft PowerPoint、Microsoft Word、PDFなどのリッチコンテンツファイルは、添付ファイルにすることはできますが、テーマアセットにすることはできません。

アップロードしたアセットをテーマのコード内で使用する

アップロードしたアセットは、テーマのstyle.cssファイルまたはそのテンプレートで参照できます。style.cssでは、Guideが提供するアセットパス変数を使用します。テンプレートでは、Curlybarsアセットヘルパーを使用します。

コード内でアセット変数とヘルパーを使用すると、テーマコードを編集することなく、テーマ内のアセットを簡単に差し替えることができます。「テーマのアセットを差し替える」を参照してください。

メモ：テーマのscript.jsファイルでパス変数またはヘルパーを使用することはできません。

アップロードしたアセットをテーマコード内で使用するには

1. Guideで、サイドバーにあるデザインをカスタマイズアイコン（）をクリックします。
2. 編集したいテーマで「カスタマイズ」をクリックします。
3. 「コードを編集」をクリックします。
4. 「アセット」セクションで、使用したいアセットファイルをクリックします。

   アセットの様々な式が表示されます。

   

5. 「コピー」をクリックして、必要なアセット式をクリップボードにコピーします。
6. テーマコード内にアセット式を貼り付けます。

例

style.css

.class-name { 
  background: url($assets-backpack2-jpeg);
}

assets-backpack2-jpegという値は、アセットへの相対パスを含む変数です。

.hbsファイル

HTMLマークアップ内：

<img src="{{asset 'backpack2.jpeg'}}">

styleタグ内：

<style>
  .class-name { 
    background: url("{{asset 'backpack2.jpeg'}}");
  }
</style>

scriptタグ内：

<script>
  var assetsBackpack2 = "{{asset 'backpack2.jpeg'}}";
</script>

アセットヘルパーはテンプレート内のscriptタグに挿入できますが、script.jsファイルで使用することはできません。

テーマコードの編集について詳しくは、「ヘルプセンターテーマのカスタマイズ」を参照してください。

テーマのアセットを差し替える

「アップロードしたアセットをテーマのコード内で使用する」で説明されているように、アセット変数とヘルパーを使用すると、テーマコードを編集することなくテーマ内のアセットを動的に置き換えることができます。システム上で新しいアセットファイルを選択するだけでテーマを更新できます。

アセットを更新するには

1. Guideで、サイドバーにあるデザインをカスタマイズアイコン（）をクリックします。
2. 編集したいテーマで「カスタマイズ」をクリックします。
3. 「コードを編集」をクリックします。
4. 「アセット」セクションで、置き換えるアセットファイルを見つけます。
5. アセットファイル名の右端にあるオプションメニューをクリックし、「置換」を選択します。

   

6. システム上で新しいアセットを選択します。

   アップロードしたテーマは、そのアセットを参照する任意の変数またはヘルパーによって動的に更新されます。この変更はただちに反映されます。

   公開されたヘルプセンターページのHTMLソースで、アセットの完全なURLを使用した場合、アセットは置き換えられません。アセットを置き換えるとアセットの公開URLが変更されるため、アセットへのリンクが壊れます。そのため、テーマ、ページテンプレート、または外部Webページで公開されたアセットURLを使用しないでください。

テーマのアセットを削除する

テーマ内で使われなくなったアセットは、簡単に削除できます。

テーマのアセットを削除するには

1. Guideで、サイドバーにあるデザインをカスタマイズアイコン（）をクリックします。
2. 編集したいテーマで「カスタマイズ」をクリックします。
3. 「コードを編集」をクリックします。

   

4. 「アセット」セクションで、削除するアセットファイルを見つけます。
5. アセットファイル名の右端にあるオプションメニューをクリックし、「アセットを削除」を選択します。

   

6. アセットの削除を確定します。

   このアセットがアセットリストから削除されます。