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

Suite Growth以上のプランで利用可能すべてのGuideプランで利用可能

Quick Look: Guide管理 >「デザインをカスタマイズ」>「テーマを選択」>「編集」>「アセット」

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

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

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

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

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

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

Guideで、サイドバーにあるデザインをカスタマイズアイコン（）をクリックします。
編集したいテーマで「カスタマイズ」をクリックします。
「コードを編集」をクリックします。
「ファイル」セクションで、「新規追加」をクリックし、「アセット」を選択します。
ファイルのある場所へ移動して選択します。テーマのアセット名は一意の名前で、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ファイルでパス変数またはヘルパーを使用することはできません。

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

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ファイルで使用することはできません。

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

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

アセットを更新するには

Guideで、サイドバーにあるデザインをカスタマイズアイコン（）をクリックします。
編集したいテーマで「カスタマイズ」をクリックします。
「コードを編集」をクリックします。
「アセット」セクションで、置き換えるアセットファイルを見つけます。
アセットファイル名の右端にあるオプションメニューをクリックし、「置換」を選択します。
システム上で新しいアセットを選択します。
アップロードしたテーマは、そのアセットを参照する任意の変数またはヘルパーによって動的に更新されます。この変更はただちに反映されます。

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

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

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