Adobe FrameMaker の公開ソリューションを使用して HTML ページテンプレートを作成し、ページレイアウトをカスタマイズする方法を理解します。
Adobe FrameMaker の公開ソリューションを使用すると、HTML ページテンプレートを作成してページレイアウトをカスタマイズできます。 ページテンプレートを使用すると、次のコンポーネントを公開された出力に追加できます。
セクションの目次を現在のトピックに追加します。
現在のトピックのナビゲーション経路に追加します。
FrameMaker ソースの変数で定義された動的コンテンツを含むヘッダーとフッターを追加します。
このトピックの例を試すには、標準テンプレートを使用して FrameMaker 文書を作成します。 このテンプレートは、このトピックのサンプルで使用された段落スタイルと変数を使用します。
HTML ページのテンプレートを作成した後、利用可能な出力（出力設定参照）に対して、出力タブで HTML ページのテンプレートを設定することができます。
ページのテンプレートを作成するには、.htt、.htm、.html の拡張子を持つファイルを作成し、任意のテキストエディタで開きます。
次の HTML コンテンツをテキストファイルにペーストします。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
</body>
</html>動的コンテンツをページヘッダーに追加するには、HTML ページテンプレート属性@data-typeをfm_variableに指定します。
FrameMaker ユーザー定義変数の章タイトル名を使用するヘッダーを定義するには、冒頭の<body>エレメントの後に、次の<p>エレメントを追加します。
<p data-type="fm_variable">Chapter Title Name</p>HTML ページテンプレート属性 @data-type は、包含エレメントによって記述されるコンテンツの種類を識別するために使用されます。上記の例では、<p>エレメントに FrameMaker 変数が含まれています。
ナビゲーション経路を出力に追加するには、HTML ページテンプレート属性 data-type を breadcrumbs に指定します。
開始タグ<body>の後に次の内容を追加します。
<p data-type="breadcrumbs">
<a data-type="home_link" href="#">Home</a>
<span data-type="separator">:></span>
</p>上記の例では、ブレッドクラムの各項目を分離している文字（この場合は、HTML エンティティ > として記述される大なり記号）を指定します。定義のその他の部分はブレッドクラムを作成する公開ソリューションで必要です。
ブレッドクラムの詳細やその他のオプションについては ブレッドクラムの定義 ナビゲーションをご覧ください。
ミニ目次を定義するには、前のステップで記述したブレッドクラムの後に次を追加します。
<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 の段落スタイル名を指定して、ミニ目次の対応するレベルに表示します。
最大 20 レベルのマルチレベルのミニ目次を作成できます。詳しくは、「ミニ目次を定義」を参照してください。
FrameMaker のソースコンテンツを表示する場所を指定するには、<div>エレメントの @data-type 属性に body を設定します。ミニ目次の後に次を追加します。
<div data-type="body"></div>フッターを定義するには、終了タグ</body>の前に次の内容を追加します。
<p data-type="fm_variable">Creation Date (Long)</p>作成日（年月日）は文書で定義された変数の名前です。 詳しくは、「ヘッダーとフッターの定義」を参照してください。
ページテンプレートを作成したら、テンプレートを公開設定ダイアログの「出力」タブに含める必要があります。 パブリッシュの手順により、指定した出力でミニ目次が作成されます。
ミニ TOC を定義するには、<div> エレメントに @data-type 属性の値が minitocであることを使用します。
<div data-type="minitoc"></div>@data-type-after 属性を使用して、パブリッシュされた出力のミニ目次の場所を指定します。例えば、次の @data-type-after 定義はミニ目次が発行出力のH1_Heading 段落の初出部分の後に表示するよう指定します。
<div data-type="minitoc" data-type-after="H1_Heading1"></div>@data-type-after 属性の複数の段落をミニ目次に指定します。次のサンプルでは、ソースに H1_Heading1 スタイルまたは H2_Heading2 スタイルが最初に出現した後、ミニ目次を公開します。例えば、ブックに複数の文書が含まれている場合、複数の段落を定義します。 文書が様々なヘッダー段落スタイルを使用して起動できる場合。
<div data-type="minitoc"
data-type-after="H1_Heading1 H2_Heading2">
</div>data-type-after 段落を指定するには：
二重引用符で段落を囲みます
複数の段落をコンマまたはスペースで分離します
段落文字に二重引用符が 1 つ含まれる場合は、バックスラッシュのエスケープ文字を使用します。
段落と文字スタイルが同じ名前の場合は、それぞれ p と span を使用してスタイル名を設定します。
<div data-type="minitoc"
data-type-after="p.H1_Heading1 p.H2_Heading2">
</div>ミニ目次でエレメントを定義するには、@data-type 属性とセットで<p>エレメントまたは<div>エレメントを追加し、<div>エレメント内でエレメントのレベルを指定します。
例えば、2 レベルのミニ目次を定義するには：
<div data-type="minitoc">
<p data-type="minitoc-level1"></p>
<p data-type="minitoc-level2"></p>
</div>最大 20 レベルのマルチレベル Mini-TOC を作成できます。また、ミニ目次のレベルは昇順に配置する必要があります。
特定のリテラル値を含むミニ目次の上部にキャプションを追加できます。「このセクションでは、以下について説明します。」というキャプションを追加するには、ミニ TOC 定義の先頭に data-type minitoc-caption を持つ <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>複数の段落を同一レベルのミニ目次に指定する場合：
発行されたコンテンツは、見つかった段落を表示します。
複数の段落が見つかった場合は、発行されたコンテンツは、同じレベルの段落を表示します。
公開する出力に 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 ページテンプレートは、次のコンポーネントを定義します。
ページ本文の上部のヘッダー
ブレッドクラム軌跡
ミニ目次
トピックコンテンツ
トピックコンテンツの後のフッター
このサンプルを試すには、リファレンスカードの標準 FrameMaker テンプレートを使用して文書を作成します。
<html>
<body>
<!-- Header using FM variable -->
<p data-type="fm_variable">Chapter Title Name</p>
<!-- Breadcrumb -->
<p data-type="breadcrumbs">Start of Breadcrumb:
<a data-type="home_link" href="#">Home</a>
<span data-type="separator">:></span></p>
<!-- mini TOC -->
<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>
<!-- Footer using FM variable -->
<p>Last modified date: <span data-type="fm_variable">Modification Date (Short)</span></p>
</body>
</html>