HTMLページテンプレート

FrameMakerの公開ソリューションを使用すると、HTMLページテンプレートを作成してページレイアウトをカスタマイズできます。ページテンプレートを使用すると、次のコンポーネントを公開された出力に追加できます。

Mini-TOC：

サブトピックの目次を現在のトピックに追加します。

ブレッドクラム

現在のトピックのナビゲーション経路に追加します。

ヘッダーとフッター

FrameMakerソースの変数で定義された動的コンテンツを含むヘッダーとフッターを追加します。

このトピックの例を試すには、リファレンスカードの標準FrameMakerテンプレートを使用してFrameMaker文書を作成します。このテンプレートは、このトピックのサンプルで使用された段落スタイルと変数を使用します。

HTMLページテンプレートを作成したら、「出力」タブで使用可能な任意の出力をHTMLページテンプレートに設定できます（「出力設定」を参照）。

重要: HTMLページテンプレートのすべてのコンポーネントはオプションです。任意のコンポーネントの組み合わせを使用してページテンプレートを定義できます。

HTMLページテンプレートの作成

1)ページテンプレートを作成するには、.htt、.htm、または.htmlの拡張子を持つファイルを作成し、ファイルを任意のテキストエディターで開きます。

2)次のHTMLコンテンツをテキストファイルにペーストします。

3)動的コンテンツをページヘッダーに追加するには、HTMLページテンプレート属性data-typeをfm_variableに指定します。

FrameMakerユーザー定義変数を使用するヘッダーを定義するには、次のpタグをbodyの開きタグ（<body>）の後に追加します。

<p data-type="fm_variable">Chapter Title Name</p>

重要: data-type HTMLページテンプレート属性は公開ソリューションによって使用され、閉じタグによって記述されるコンテンツのタイプを識別します。上記の例では、pタグにはFrameMaker変数が含まれます。

詳しくは、「ヘッダーとフッターの定義」を参照してください。

4)ナビゲーション経路を出力に追加するには、HTMLページテンプレート属性data-typeをbreadcrumbs に指定します。

次をbodyの開きタグ（<body>）の後に追加します。

上記の例では、ブレッドクラムの各項目を分離している文字（この場合は大なり記号）を指定します。定義のその他の部分はブレッドクラムを作成する公開ソリューションで必要です。

ブレッドクラムの詳細とオプションについては、「ブレッドクラムの定義」を参照してください。

5)ミニ目次を定義するには、前のステップで記述したブレッドクラムの後に次を追加します。

<div data-type="minitoc">
   <p data-type="minitoc-level1">
      <span data-type="minitoc-selector">'H1_Heading1'</span>
   </p>
   <p data-type="minitoc-level2">
      <span data-type="minitoc-selector">'H2_Heading2'</span>
   </p>
</div>

ミニ目次を定義するには、data-type属性をminitocに指定します。各レベルで、特定のレベルにdata-type属性を使用します。必要なFrameMakerの段落スタイル名を指定して、Mini-TOCの対応するレベルに表示します。

最大20レベルのマルチレベルのミニ目次を作成できます。詳しくは、「ミニ目次を定義」を参照してください。

6)FrameMakerのソースコンテンツが表示される場所を指定するには、divタグをdata-type属性をbodyに指定して使用します。ミニ目次の後に次を追加します。

7)フッターを定義するには、閉じタグ(</body>) の前に次を追加します。

<p data-type="fm_variable">Creation Date (Long)</p>

Creation Date (Long)は文書で定義された変数の名前です。詳しくは、「ヘッダーとフッターの定義」を参照してください。

8)ページテンプレートを作成したら、テンプレートを公開設定ダイアログの「出力」タブに含める必要があります。パブリッシュの手順により、指定した出力でミニ目次が作成されます。

重要: すべてのページテンプレートコンポーネントは、HTMLタグ内で定義されます。これはCSSスタイルを(styleまたはclassタグを使用して) 任意のコンポーネントに追加できることを意味します。

ミニ目次を定義

ミニ目次を定義するには、divタグをdata-type属性をminitocに指定して使用します。

data-type-after属性を使用して、パブリッシュされた出力のミニ目次の場所を指定します。例えば、次のdata-type-after定義はミニ目次が発行出力のH1_Heading段落の初出部分の後に表示するよう指定します。

data-type-after属性の複数の段落をミニ目次に指定します。次のサンプルでは、ソースにH1_Heading1スタイルまたはH2_Heading2スタイルが最初に出現した後、ミニ目次をパブリッシュします。例えば、ブックに複数の文書が含まれている場合、複数の段落を定義します。文書が様々なヘッダー段落スタイルを使用して起動できる場合。

data-type-after段落を指定するには：

•二重引用符で段落を囲みます

•複数の段落をコンマまたはスペースで分離します

•段落文字に二重引用符が1つ含まれる場合は、バックスラッシュのエスケープ文字を使用します。

•段落と文字スタイルが同じ名前の場合は、それぞれpとspanを使用してスタイル名を設定します。

注: data-type-after属性はオプションです。属性を指定しない場合は、ミニ目次はテンプレートで定義された出力のポイントに表示されます。

ミニ目次でエレメントを定義するには、pまたはdivタグをdata-type属性を持たせて追加し、minitocdivタグ内のエレメントのレベルを指定します。

例えば、2レベルのミニ目次を定義するには：

最大20レベルのマルチレベルMini-TOCを作成できます。また、ミニ目次のレベルは昇順に配置する必要があります。

特定のリテラル値を含むミニ目次の上部にキャプションを追加できます。「このセクションは次を対象としています」というキャプションを追加するには、data-type minitocキャプションを持つpまたはdivタグをミニ目次の定義の上部に追加します。

<div data-type="minitoc">
   <p data-type="minitoc-caption">This section covers the following:</p>
   <p data-type="minitoc-level1"></p>
   <p data-type="minitoc-level2"></p>
   <p data-type="minitoc-level3"></p>
</div>

特定のミニ目次のレベルに表示される段落を指定するには、data-type属性をminitoc-selectorに指定したタグを追加します。

<div data-type="minitoc">
   <p data-type="minitoc-caption">This section covers the following:</p>
   <p data-type="minitoc-level1"><span data-type="minitoc-selector">'H2_Heading2'</span></p>
   <p data-type="minitoc-level2"><span data-type="minitoc-selector">'H3_Heading3'</span></p>
   <p data-type="minitoc-level3"><span data-type="minitoc-selector">'H4_Heading4'</span></p>
</div>

複数の段落を同一レベルのミニ目次に指定できます。

<p data-type="minitoc-level1"><span data-type="minitoc-selector">'H2_Heading2' 'H3_Heading3'</span></p>

複数の段落を同一レベルのミニ目次に指定する場合：

•発行されたコンテンツは、見つかった段落を表示します。

•複数の段落が見つかった場合は、発行されたコンテンツは、同じレベルの段落を表示します。

重要: class属性のスタイルを使用して、CSSスタイルをミニ目次の定義で使用された任意のHTMLタグに追加します。

ブレッドクラムの定義

ブレッドクラムを定義するには、data-type属性をbreadcrumbsに指定します。以下に例を挙げます。

固定テキストを追加して、ブレッドクラムの冒頭に表示できます。例えば、「ブレッドクラムの冒頭:」を表示するには：

<p data-type="breadcrumbs">Start of Breadcrumb:</p>

アンカー(a) タグを使用して、ブレッドクラムのホーム位置を指定します。任意の固定テキストをアンカーテキストとして指定できます。

<p data-type="breadcrumbs">Start of Breadcrumb:<a data-type="home_link" href="#">Home</a>

アンカーのテキストのほかに、上記で定義されたとおりに他の属性や値を追加する必要があります。発行物は正確な属性と値を使用してブレッドクラムを作成します。

data-type属性をseparatorとして使用して、区切り文字を定義してブレッドクラムのエレメント間を表示します。次のサンプルでは、区切り文字は大なり(>) 記号です。

<p data-type="breadcrumbs">Start of Breadcrumb:<a data-type="home_link" href="#">Home</a><span data-type="separator">:></span></p>

冒頭のテキストのように、ブレッドクラムの最後に固定テキストを追加することもできます。例えば、「:ブレッドクラムの最後」を表示するには：

<p data-type="breadcrumbs">Start of Breadcrumb:<a data-type="home_link" href="#">Home</a><span data-type="separator">:></span> :End of Breadcrumb</p>

ヘッダーとフッターの定義

FrameMaker変数を使用して、HTML出力のヘッダーとフッターを定義します。

ヘッダーとフッターを定義するには、data-type属性をfm_variableに指定したHTMLタグを使用します。例えば、Chapter Title Name変数を含むヘッダーを定義するには：

<p data-type="fm_variable">Chapter Title Name</p>

ヘッダーまたはフッターに固定テキストと変数を混在させることもできます。次の例では、現在の文書の最終更新日を表示します。

<p>Last modified date:<span data-type="fm_variable">Modification Date (Short)</span></p>

ボディコンテンツの定義

FrameMakerのトピックコンテンツを動的に発行された出力に配置するには、divタグを定義してdata-type属性をbodyに指定して使用します。例えば、ヘッダー、本文、フッターを持つテンプレートを作成するには：

<p data-type="fm_variable">Chapter Title Name</p>
<div data-type="body">[The FrameMaker topic content will be placed here]</div>
<p>Last modified date:<span data-type="fm_variable">Modification Data (Short)</span></p>

サンプルHTMLページテンプレート

次のサンプルHTMLページテンプレートは、次のコンポーネントを定義します。

•ページ本文の上部のヘッダー

•ブレッドクラム軌跡

•ミニ目次

•トピックコンテンツ

•トピックコンテンツの後のフッター

このサンプルを試すには、リファレンスカードの標準FrameMakerテンプレートを使用して文書を作成します。

<html>
<body>

<p data-type="fm_variable">Chapter Title Name</p>

<p data-type="breadcrumbs">Start of Breadcrumb: <a data-type="home_link" href="#">Home</a><span data-type="separator">:></span></p>

<div data-type="minitoc">
   <p data-type="minitoc-caption">This section covers the following:</p>
   <p data-type="minitoc-level1"><span data-type="minitoc-selector">'H2_Heading2'</span></p>
   <p data-type="minitoc-level2"><span data-type="minitoc-selector">'H3_Heading3'</span></p>
   <p data-type="minitoc-level3"><span data-type="minitoc-selector">'H4_Heading4'</span></p>
</div>

<p>Last modified date:<span data-type="fm_variable">Modification Date (Short)</span></p>
</body>
</html>