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 ユーザー定義変数章タイトル名を使用するヘッダーを定義するには、次の <p> エレメントを、開始エレメント <body> の後に追加します。
<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>作成日（年月日）は文書で定義された変数の名前です。 詳しくは、「ヘッダーとフッターの定義」を参照してください。
ページテンプレートを作成したら、テンプレートを 公開設定 ダイアログの 「出力」 タブに含める必要があります。 パブリッシュの手順により、指定した出力でミニ目次が作成されます。
ミニ目次を定義するには、 <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>ミニ目次でエレメントを定義するには、 <p> または <div> タグを、 @data-type 属性を持たせて追加し、 <div> タグ内のエレメントのレベルを指定します。
例えば、2 レベルのミニ目次を定義するには：
<div data-type="minitoc">
<p data-type="minitoc-level1"></p>
<p data-type="minitoc-level2"></p>
</div>最大 20 レベルのマルチレベル Mini-TOC を作成できます。また、ミニ目次のレベルは昇順に配置する必要があります。
特定のリテラル値を含むミニ目次の上部にキャプションを追加できます。「このセクションは次を対象としています」というキャプションを追加するには、 <data-type> または <p> または @div ミニ TOC定義の上部にあるミニトック キャプション:
<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>