ページレイアウトのデザイン

最終更新日： 2025年2月24日
  • トピック：

作成対象：

  • 経験者
  • 管理者

PDFのドキュメントを作成する場合は、セクションが異なるので、各種の情報を提供できます。 例えば、PDFのドキュメントは前面または表紙から開始します。これには、会社のロゴ、本のタイトルまたはバージョン情報が含まれます。 その後、章、付録、用語集のページがあります。 PDF ドキュメントの各セクションの外観は異なります。これを行うには、ページレイアウトを作成してカスタマイズします。

ページレイアウトをデザインする場合、ページを構成する様々な要素を定義できます。 例えば、ページのサイズ、余白、ヘッダーとフッター、向き、その他のページ仕様をページ上で定義できます。 PDFのネイティブ公開機能を使用すると、 ページメディア標準に従ってページをデザインできます。 ページメディア標準で扱われる設定のほとんどは、Native PDF公開機能のユーザーインターフェイスを使用して簡単にカスタマイズできます。 その他の詳細レベルの書式設定の場合は、Source ビューを使用して独自の CSS コードを記述できます。

ページレイアウトをデザインしたら、これらのレイアウトをPDF ページレイアウト設定の各セクションに関連付ける必要があります。 カスタマイズ用のページレイアウトを作成して開く方法について詳しくは、 ページレイアウトの作成とカスタマイズの節を参照してください。

ページレイアウトのタイプ

通常、PDF ドキュメントには次のセクションが含まれます。

  • 表紙
  • 目次
  • 数値の上昇率
  • テーブルの上昇率
  • チャプターページまたはトピックページ
  • 用語集
  • 索引
  • バックページ

これらのセクションでは、情報を特定の形式で表示するために、対応するページレイアウトが必要になります。 さらに、奇数ページまたは偶数ページから新しいチャプターを開始するための目印として使用される空白のページを作成することもできます。 その場合は、デフォルトのページレイアウトを使用するか、空白のページに対してページレイアウトを作成します。 詳しくは、 新しいページレイアウトの作成を参照してください。

テンプレート/設定 セクションのページレイアウト設定を使用すると、PDFの様々なセクションで使用するページレイアウトを定義できます。 各ページレイアウトには、先頭、右または左の異なるページバリアントを含めることができます。

最初、右または左のページレイアウトのバリアントの作成

PDF テンプレート内の様々なページレイアウトは、最初、右または左のページレイアウトのバリアントを異ならせることで、さらにカスタマイズできます。 ページレイアウトデザイナーを使用して、これらのページを異なる方法でデザインできます。

NOTE
ブックのセクションに単一のページ レイアウトを使用する場合は、最初、右、または左のページ レイアウトを作成する必要はありません。

ページレイアウトを作成する際は、次の点を考慮してください。

NOTE
以下のポイントでは、チャプターページのレイアウトを例として説明しました。 ただし、これらのポイントは他のページレイアウトにも有効です。

  • チャプター内のすべてのページに対して 1 つのページレイアウトを使用する場合、バリアントを使用せずに 1 つのチャプターページレイアウトのみを作成します。

  • ブックの章の最初のページの外観を変更する場合は、章の最初のページのレイアウトを変更する必要があります。

  • 本の左右のページごとに異なるルックアンドフィールを使用する場合は、チャプターページレイアウトの左右のバリエーションを作成する必要があります。

  • 章を奇数ページまたは偶数ページから開始する場合は、空白ページ用のページレイアウトを作成するように選択できます。 このページレイアウトは、2 つのチャプターの間のギャップを埋め、チャプターが目的の奇数ページまたは偶数ページから開始されるようにするために使用されます。

    NOTE
    空白のページレイアウトを別途作成しない場合は、デフォルトのページレイアウトが使用されます。 ページレイアウトの作成については、 新しいページレイアウトの作成を参照してください。

次の例では、ページレイアウトのバリアントを作成するプロセスについて説明します。

  1. 「新しいページレイアウトの作成」の手順を使用して、「チャプター」ページレイアウトを作成します。

    空白のチャプターページレイアウトが作成され、「ページレイアウト」に追加されます。

    デフォルトでは、ページレイアウトを作成すると、そのページレイアウトも編集用に開かれます。 次のスクリーンショットは、空白（デフォルト）のページレイアウトを示しています。

    テンプレートのヘッダー、フッター、およびコンテンツ領域は、デフォルトで作成されます。 ユーザーインターフェイスに用意されているページプロパティやコンテンツプロパティのほか、様々なツール（画像やフィールドの挿入など）を使用して、これらの領域を簡単にカスタマイズできます。

    NOTE
    高度な設定の場合は、Source ビューを使用して、カスタムのHTMLと CSS コードを追加できます。

  2. チャプター レイアウトの上にマウスポインターを置き、オプション をクリックしてコンテキストメニューを表示します。

  3. レイアウトバリアントを追加 をクリックまたはマウスでポイントし、作成する目的のページレイアウト（最初、左または右）を選択します。

選択したページレイアウトは、基本のチャプターレイアウトのコピーを使用して作成されます。 つまり、デフォルトのチャプターページレイアウトに変更を加えると、ページレイアウトの作成時に同じ変更がバリアントのページレイアウトに複製されます。

ページレイアウトのページプロパティの操作

ページレイアウトをデザインする場合、様々なページプロパティを制御できることが不可欠です。 ネイティブのPDF公開機能は、すべての主要なページプロパティをページプロパティパネルにカプセル化します。 ページのプロパティパネルを使用すると、次のセクションの様々なプロパティにアクセスできます。

NOTE
ページプロパティ パネルはプロパティをカプセル化し、 ページメディア標準で定義されているルールに従います。

  • ページサイズ：ページレイアウトに使用するページサイズを指定します。 「ページサイズ」ドロップダウンリストを使用すると、15 を超えるページサイズから選択できます。 カスタムのページサイズを使用してページレイアウトを作成することもできます。詳しくは、 ページサイズの設定を参照してください。

  • 向き：ページレイアウトに使用するページの向きを指定します。 ページの向きは、縦または横から選択できます。 ページレイアウト内の異なるページバリアントに、異なる向きを適用することもできます。 例えば、コンテンツに幅の広いテーブルや大きな画像が含まれている場合、横長のページレイアウトを作成して、幅の広いテーブルや画像にそのレイアウトを適用できます。

  • ビュー回転：元の上面が回転後に表示される側または方向を指定します。 [ 時計回り 90]、[ 反時計回り 90]、または [ 反時計回り 180] から選択できます。 これは、出力で縦長レイアウトと横長レイアウトを組み合わせて使用する場合に非常に便利です。 例えば、一般的なページレイアウトとして縦を使用したり、幅の広いテーブルをレンダリングするための横のページレイアウトを設定したりできます。 この場合、テーブルコンテンツを時計回りに 90 度表示するようにを設定できます。 こうすることで、ページは横向きになり、コンテンツはビューの連続性を維持するために 90 度回転されます。 これを例としてどのように実現するかを、この節で後ほど説明します。

  • ページ番号：ページ番号は、デフォルトでは、PDFで連続して付けられます。 例えば、100 ページのPDFの場合、1 ～ 100 の連続したページ番号を持つことができます。 また、すべての異なるセクションまたはセクションの最初のオカレンスで、特定の番号から番号付けを再開することもできます。

    • 再起動元：このページレイアウトの番号付けを開始するページ番号を指定します。 例えば、チャプターごとに再開するページ番号を設定できます。 その場合、チャプターページレイアウトの最初のページレイアウトバリアントで、restart from プロパティを 1 に設定する必要があります。 デフォルトでは、ページ番号は前のページから継続して付けられます。

    • 最初のオカレンスにのみ適用：セクションの最初のオカレンスに対してのみ、特定の数から開始することもできます。 例えば、1 から最初のチャプターのみを開始し、他のチャプターのページ番号を続行できます。

  • レイアウト：ページの余白および上下左右のパディングを指定します。 次の図では、コンテンツの周囲の余白、パディングおよび境界線をレンダリングする方法を説明します。 ページの上部と下部の余白には、ヘッダーとフッターが含まれます。

  • 背景：ページレイアウトの背景として画像または色を含めます。 画像の場合は、繰り返しと位置のプロパティと共に、画像の高さと幅を指定できます。

  • 脚注：出力に脚注を表示するプロパティを指定します。 境界線のスタイルに加えて、余白とパディングのプロパティを指定することもできます。

ページサイズの設定

ページレイアウトで最初に定義する必要があるのは、ページサイズです。 ページプロパティでは、ページレイアウトに 15 ページを超えるサイズを選択できます。 次の手順を実行してカスタムのページサイズを作成することもできます。

  1. 必要なページレイアウトを編集用に開きます。

    NOTE
    カスタマイズや編集のためにページレイアウトを開く方法については、 ページレイアウトのカスタマイズセクションを参照してください。

  2. 右側のパネルで「ページプロパティ」をクリックします。

  3. 「ページサイズ」ドロップダウンリストから「カスタム」を選択します。

    「ページの幅」フィールドと「ページの高さ」フィールドが表示されます。

  4. ページの幅 および ページの高さ フィールドに、必要なページのサイズを入力します。

    NOTE
    最もよく使用される単位には、px （ピクセル）、pt （ポイント）、rem、em、% （パーセンテージ）、in （インチ）があります。

ページの向きとビューの回転を使用する

例として、縦長ページと横長ページの向きとビューの回転プロパティを組み合わせて使用する場合を見てみましょう。 この例では、デフォルトの縦向きを使用してPDFを作成しますが、テーブルはコンテンツを時計回りに 90 度のビューで横向きにレンダリングします。 最終的な出力は次のようになります。

上記の出力では、連絡先リスト情報は横向きモードで表示され、コンテンツも 90 度回転されます。 残りのコンテンツは、通常の縦長モードで表示されます。

このような出力を実現するには、次の主なタスクを実行する必要があります。

  1. 横向きのページレイアウトを作成します。

  2. コンテンツを 90 度でレンダリングするには、「ビューの回転」プロパティを変更します。

  3. 新しいページレイアウトを使用するカスタムスタイルを作成します。

  4. 横ページレイアウトでレンダリングするテーブルの outputclass 定義に、スタイルを追加します。

上記のタスクを実行するには、次の手順を実行します。

  1. 横向きのページレイアウトを作成します。

    1. 「新しいページレイアウトの作成」の手順に従って、「横」ページレイアウトを作成します。

    2. 右側のパネルで「ページプロパティ」をクリックします。

    3. 方向 を 横 に変更します。

  2. コンテンツを 90°時計回りにレンダリングするには、「ビューの回転」プロパティを変更します。

    1. 「ビューの回転」ドロップダウンリストから「時計回りに 90°」を選択します。

    1. すべて保存 をクリックして、更新したページレイアウトプロパティを保存します。

  3. 新しいページレイアウトを使用するカスタムスタイルを作成します。

    1. 左側のサイドバーを展開して、スタイルを作成するテンプレートをダブルクリックします。

    2. 「スタイルシート」セクションを展開します。

    3. レイアウトスタイルシートにカーソルを合わせ、（オプション アイコン）「。…」をクリックして「編集」を選択します。

      レイアウトスタイルシートが編集用に開きます。

    4. その他のスタイル を右クリックし、新規スタイル を選択します。

    5. スタイルを追加ポップアップで、classname に landscape-style と入力します。

    6. 「完了」をクリックします。

      .landscape-style という名前の新しいスタイルが作成され、[ その他のスタイル ] リストの最後に追加されます。

    7. .landscape-style スタイルをダブルクリックして、編集用に開きます。

    8. 「ページネーション」プロパティを展開します。

    9. ページレイアウト プロパティに「Landscape」と入力します。

    10. すべて保存] をクリックして、更新したスタイル プロパティを保存します。

  4. 横ページレイアウトでレンダリングするテーブルの outputclass 定義に、スタイルを追加します。

    1. DITA ファイルエディタで、新規ページレイアウトを適用するファイルを開きます。

    2. 横モードでレンダリングされる <table> 要素を見つけます。

    3. パンくずリストで、テーブル要素をクリックしてテーブルを選択します。

    4. 右側のパネルでをクリックし、コンテンツのプロパティ パネルを開きます。

    5. コンテンツのプロパティパネルで、landscape-style をプロパティ値として使用して、新しい outputclass プロパティを追加します。

  5. 「すべて保存」をクリックして、更新したファイルを保存します。

  6. PDF出力を生成します。

最終的なPDFでは、例の最初に示すように、テーブルコンテンツが横長モードでレンダリングされます。

背景画像の追加

必要に応じて、チャプター（PDF）出力の最初のページごとに表示される背景画像を追加できます。 ページプロパティの下にある背景のプロパティを使用すると、背景画像を簡単に追加できます。 この画像をページ全体にレプリケートし、ページの上部、下部、または中央の任意の場所に画像を配置するように選択できます。

例えば、コンテンツ領域の中央に背景画像を挿入するには、次の手順を実行します。

  1. 必要なページレイアウトを編集用に開きます。

    NOTE
    カスタマイズや編集のためにページレイアウトを開く方法については、 ページレイアウトのカスタマイズセクションを参照してください。

  2. コンテンツ領域内の任意の場所をクリックします。

  3. 右側のパネルで「ページプロパティ」をクリックします。

  4. 「背景」セクションを展開します。

  5. 「画像のパス location フィールドの参照ボタンをクリックします。

  6. 背景画像として使用する画像を参照して選択します。

    画像が挿入および複製されて、ページ全体に表示されます。

  7. 高さと幅のプロパティを調整して、画像サイズを変更します。

    NOTE
    高さまたは幅のプロパティのいずれかを入力できます。画像は縦横比を維持するために自動スケールされます。

  8. 他のプロパティを設定して、背景画像の表示方法を調整します。

    • 背景の繰り返し：背景を繰り返すかどうかを指定します。

    • 背景の位置：ページ上の背景画像の位置を指定します。

次のスクリーンショットは、Background Repeat プロパティが no-repeat に設定され、Background Position プロパティが center に設定された背景画像を示しています。

ページレイアウトのヘッダーやフッターに情報を含めると、そのページレイアウトを使用するすべてのページでその情報が繰り返されます。 通常、ヘッダー領域はチャプターまたはトピックのタイトルに使用され、フッター領域はページ番号の表示用に使用されます。

新しいページレイアウトを作成すると、ヘッダーとフッターの領域がデフォルトで作成されます。 ページレイアウトのヘッダーおよびフッター領域では、多くのカスタマイズを行うことができます。 例えば、画像（ロゴなど）、変数（動的情報を含む）、静的コンテンツなどを挿入できます。