ホーム > プリントと発行 > マルチチャネルパブリッシング > HTML ページテンプレート

HTML ページテンプレート

Adobe FrameMaker の公開ソリューションを使用して HTML ページテンプレートを作成し、ページレイアウトをカスタマイズする方法を理解します。

このトピックの内容

概要

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

ミニ目次

セクションの目次を現在のトピックに追加します。

ブレッドクラム

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

ヘッダーとフッター

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

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

HTML ページのテンプレートを作成した後、利用可能な出力(出力設定参照)に対して、出力タブで HTML ページのテンプレートを設定することができます。

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

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

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

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

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <body> 
    </body> 
    </html>
  3. 動的コンテンツをページヘッダーに追加するには、HTML ページテンプレート属性@data-typefm_variableに指定します。

    FrameMaker ユーザー定義変数の章タイトル名を使用するヘッダーを定義するには、冒頭の<body>エレメントの後に、次の<p>エレメントを追加します。

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

    HTML ページテンプレート属性 @data-type は、包含エレメントによって記述されるコンテンツの種類を識別するために使用されます。上記の例では、<p>エレメントに FrameMaker 変数が含まれています。

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

    開始タグ<body>の後に次の内容を追加します。

    <p data-type="breadcrumbs">
    <a data-type="home_link" href="#">Home</a>
    <span data-type="separator">:&gt;</span>
    </p>

    上記の例では、ブレッドクラムの各項目を分離している文字(この場合は、HTML エンティティ &gt; として記述される大なり記号)を指定します。定義のその他の部分はブレッドクラムを作成する公開ソリューションで必要です。

    ブレッドクラムの詳細やその他のオプションについては ブレッドクラムの定義 ナビゲーションをご覧ください。

  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 の段落スタイル名を指定して、ミニ目次の対応するレベルに表示します。

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

  6. FrameMaker のソースコンテンツを表示する場所を指定するには、<div>エレメントの @data-type 属性に body を設定します。ミニ目次の後に次を追加します。

    <div data-type="body"></div>
  7. フッターを定義するには、終了タグ</body>の前に次の内容を追加します。

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

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

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

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

ミニ目次を定義

ミニ 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 段落を指定するには:

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

ミニ目次でエレメントを定義するには、@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>

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

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

ブレッドクラムの定義 ナビゲーション

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

<p data-type="breadcrumbs"></p>

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

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

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

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

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

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

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

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

<p data-type="breadcrumbs">Start of Breadcrumb: <a data-type="home_link" href="#">Home</a>
<span data-type="separator">:&gt;</span> :End of Breadcrumb</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> 
<!-- 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">:&gt;</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>