Confluence Cloud で PDF エクスポートのレイアウトをカスタマイズする

Confluence 管理者とスペース管理者は、個々のスペースの PDF エクスポートをカスタマイズできます。

考慮事項

HTML と CSS の組み合わせを使用した PDF のカスタマイズ
PDF のカスタマイズはスペースごとに固有です。
PDF のカスタマイズはスペースのエクスポートにのみ適用されます
([ツール] > [PDF ファイルへのエクスポート] を使用した単一ページのエクスポートには適用されません)。
エクスポートされる PDF ファイルの特定の要件を満たすには、次のものを変更します。
- PDF エクスポートのレイアウト。HTML を使用して、タイトル・ページ、ヘッダー、フッターなどの機能を含め、エクスポートされたコンテンツの構造を定義します。
- PDFスタイルシート CSS を使用して、ページサイズ、余白、フォント、色、リスト番号など、エクスポートされたコンテンツの各要素のスタイルを定義します。

カスタマイズの詳細については「PDF エクスポートの詳細なカスタマイズ」ページを参照してください。

PDF のレイアウトをカスタマイズする

独自の HTML を追加して、PDF エクスポート出力のタイトル・ページ、ページ・ヘッダー、ページ・フッターをカスタマイズできます。

グローバル PDF レイアウトの設定

Select the wheel icon () in the top-right corner to open Confluence administration.
左側のナビゲーションで「設定」>「ルック & フィール」を探します。
Select PDF export.
編集を選択します。
タイトル、ヘッダー、フッターの各フィールドにカスタマイズ内容を入力します。
1. 入力した HTML および CSS は、PDF タイトルページやページヘッダー、フッターにレンダリングされます。
[保存] を選択します。

スペースレベルで PDF レイアウトを設定する

Confluence Cloud のスペースに移動します。
サイドバーで [スペースの設定] を選択します。
Select PDF export from the Look and feel card.
1. この操作を行うには、スペース管理権限が必要です。
編集を選択します。
HTML を追加して、タイトル、ヘッダー、フッターの各フィールドをカスタマイズします。
1. HTML にインライン CSS を含めることもできます。
[保存] を選択します。

PDF スタイルシートをカスタマイズする

[PDF スタイルシート] フィールドで CSS をカスタマイズして、PDF ページの体裁を調整できます。

最初に、PDF スタイルシートの初期設定の CSS ルール (confluencedefaultpdf.css) をダウンロードします。このファイルで定義されたすべてのルールはカスタマイズ可能で、PDF エクスポートスタイルシートフィールドに追加できます。カスタマイズした内容は、初期設定のすべての CSS ルールより優先されます。カスタマイズが未定義の場合は、初期設定の CSS ルールが適用されます。

既定では、エクスポートにはタイトルページ、ヘッダー、フッターは含まれていません。PDF レイアウトでこれを定義できます。

グローバル PDF スタイルシートを設定する

Select the wheel icon () in the top-right corner to open Confluence administration.
左側のナビゲーションで「設定」>「ルック & フィール」を探します。
Select PDF export.
編集を選択します。
「PDF スタイルシート」フィールドにカスタマイズ内容を入力します。
1. CSS を追加して、各ページに同じコンテンツをレンダリングします。
[保存] を選択します。

スペース PDF スタイルシートを設定する

Confluence Cloud のスペースに移動します。
サイドバーで [スペースの設定] を選択します。
Select PDF export from the Look and feel card.
1. この操作を行うには、スペース管理権限が必要です。
編集を選択します。
「PDF スタイルシート」フィールドにカスタマイズ内容を入力します。
1. CSS を追加して、各ページに同じコンテンツをレンダリングします。
[保存] を選択します。

カスタマイズの例

このセクションでは、一般的なカスタマイズ追加例を示します。「高度な PDF カスタマイズ」も参照してください。

ページサイズ

既定のページ・サイズは、Confluence インスタンスの設置場所によって決まります。例えば、インスタンスが米国に設置されている場合、PDF エクスポートの既定の用紙サイズは US レター（横 8.5 インチ x 縦 11 インチ）です。インスタンスがオーストラリアに設置されている場合は、既定の用紙サイズは A4（横 210 mm x 縦 297 mm）です。用紙サイズの詳細については、Wikipedia をご確認ください。

ページサイズを A4に変更するには、次のように PDF スタイルシートを編集して、CSS@page ルールに size プロパティを追加します。

@media print {
    @page {
        size: A4;
    }
}

または

@media print {
  @page {
    size: 8in 10in;  
  }
}

ページの向き：縦または横

PDF 文書のページの向きを変更するには、@page ルールの size プロパティで定義された値の順序を入れ替えます。このプロパティの 1 番目と 2 番目の値はそれぞれ、ページの幅と高さを表しています。

たとえば、スペースの PDF エクスポートを A4 横向きで生成する場合、@page ルールは次のようになります。

@media print {
  @page {
    size: A4 landscape;
  }
}

ページ余白

A4 サイズの用紙ですべての余白を 15 ミリに設定するには、PDF ファイルのスタイルシートの CSS @page ルールを次のように編集します。

@media print {
    @page {
        margin: 11mm;
    }
}

余白を個々に設定するには、@page ルールを次のように編集します。

@media print {
    @page {
        margin-top: 1.5in;
        margin-right: 0.5in;
        margin-bottom: 1in;
        margin-left: 0.5in;
    }
}

余白を設定してドキュメントの印刷用の断ち落としを用意するには、次のように疑似クラス :left および :right を使用します。

@media print {
  @page {
    margin-left: 4cm;
    margin-right: 3cm;
  }
  @page :left {
    margin-left: 4cm;
    margin-right: 3cm;
  }
  @page :right {
    margin-left: 3cm;
    margin-right: 4cm;
  }
  @page :first {
    margin-top: 10cm; /* Top margin on first page 10cm */
  }
}

上の例では疑似クラス :first を使用して表紙やタイトルページ用の余白を明確に定義している点にご注意ください。

改ページ

既定では、Confluence ページは改ページなしでエクスポートされるため、短いページは PDF の同じページに表示されます。

Confluence の各ページを PDF ファイルの各ページに分けて表示するには、PDF スタイルシートに次のルールを追加します。

.pagetitle {
    page-break-before: always;
}

タイトルページ

PDF レイアウトの [タイトル] フィールドに HTML を追加して、PDF 文書にタイトルページを追加できます。次の例ではタイトルページを作成してタイトルを追加します。

<div style="margin: 0; padding: 0; height: 100%; display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; width: 100%;">
    <h1 style="font-size: 3em; color: #333;">Title Page</h1>
</div>

「PDF スタイルシート」フィールドで CSS ルールを使用して、タイトル・ページとタイトル・テキストの体裁を整えます。

.fsTitlePage {
    margin-left: auto;
    margin-top: 50mm;
    margin-right: auto;
    page-break-after: always;
}

.fsTitle {
    font-size: 42px;
    font-weight: bold;
    margin: 72px 0 4px 0;
    text-align: center;
}

上の例では、タイトルページのページ中央に、センタリングされた "titlepage.png" という画像が含まれています。src 属性の "590719" は画像が添付されているページの ID です。

次の手順にしたがって、タイトルページに画像を含めます。

画像を Confluence ページに添付します。
そのページの添付ファイル一覧を表示し、画像を右クリックして、その場所をコピーします。
上記のように、適切な src="" 属性へのリンクを PDF スタイルシートに貼り付けます。
画像の URL で、/download/... の手前の最初の部分を削除し、相対 URL になるように編集します。

By default, a table of contents will be generated after the title page, or at the beginning of the PDF document if no title page is defined in the PDF Layout. To see the default CSS rules applied to the table of contents, download the default CSS rules (confluencedefaultpdf.css) and examine the specific rules with toc in their name.

目次の体裁を変更するには、PDF スタイルシートで CSS ルールを定義します。

目次を無効にする

PDF 文書で目次が生成されないようにするには、PDF スタイルシートに div.toc-macro ルールを追加し、その display プロパティを none に設定します。

div.toc-macro {
    display: none;
}

目次のリーダー文字を変更する

リーダー文字は、目次の見出しをページ番号に関連付けるために使用されます。既定では、リーダー文字は "." (ドット) 文字です。リーダーの値としては、dotted、solid、space が許可されます。また、leader(". . . ") などの文字列を使用することもできます。

リーダー文字を実線に変更するには、CSS ルールの content プロパティにある leader() の値を、次のように変更します。

span.toclead:before {
    content: leader(solid);
}

ヘッダーとフッター

「PDF エクスポート」の Header フィールドと Footer フィールドを使用して、PDF ページにヘッダーとフッターを追加できます。既定では、ヘッダーとフッターはスペースのエクスポートにのみ適用され、単一ページのエクスポートには適用されません（念のため「PDF エクスポートの詳細なカスタマイズ」をご参照ください）。次の例では、簡単な著作権表示を追加します。

<div style="width: 100%; text-align: left; margin-left: 0.5in; font-size: 10px; height: 20px; overflow: hidden;">
    <span style="font-weight: bold; font-size: 12px;">Your Custom Header Text Here</span>
</div>

ページ番号

ページ番号を追加するには、「PDF スタイルシート」フィールドでカスタマイズした HTML とカスタマイズした CSS を組み合わせる必要があります。

レイアウト・フィールドの HTML：フッター・セクション（またはヘッダー・セクション）で、ページ番号のプレースホルダーとして機能する一意の ID（pageNum, など）を持つ空の span 要素を使用します。
<div style="width: 100%; text-align: center; font-size: 12px; padding: 10px; font-family: Arial, sans-serif;"> <span id="pageNum"></span> </div>
PDF スタイルシート CSS：空の span に適用するために、以下の CSS セレクタルールを作成します。
#pageNum:before { content: "Page " counter(page); font-weight: bold; font-size: 12px; color: #333; font-family: Arial, sans-serif; }

上記の CSS セレクタルールを詳細に分析します：

#pageNum ルールは、指定した "pageNum" ID を値として持つ HTML 要素、つまりヘッダーやフッター用に作成した span 要素を選択します。
セレクタの :before 部分は、span 要素が処理される前にコンテンツを挿入できるようにする疑似クラスです。
counter(page) は、現在のページ番号をコンテンツとして返す関数です。
content プロパティは CSS プロセッサに対し、動的コンテンツ (つまり、インクリメントされるページ番号) が span タグに挿入されることを示します。

ワードラップ

長い単語や空白で分割されない単語を改行するために、break-word 値を持つ word-wrap プロパティを含むセレクタを PDF スタイルシートに追加します。

div {
    word-wrap: break-word;
}

一般的な形式設定

スタイルシートを使用すれば、最終文書のルックアンドフィールに影響を与える出力は何でもカスタマイズできます。これにはフォント、表、行間隔、マクロなどが含まれます。エクスポートエンジンは Confluence によって生成された HTML 出力から直接機能します。したがって、何かをカスタマイズする第一歩は、Confluence または Confluence マクロによって生成された HTML 要素のセレクタを見つけることです。次に、PDF スタイルシートに CSS ルールを追加します。こうして PDF エクスポートにカスタマイズが表示されます。

Demotion of heading elements: h1, h2, and so on. Due to the hierarchical manner in which a space is exported, Confluence will modify the heading elements to generate a uniform appearance for the entire space export. This means that headings will be demoted. This will affect the application of custom PDF Stylesheets. It is possible to calculate the amount by which a heading will be demoted in order to have the correct CSS styling applied. A heading will be demoted by the value of its depth in the export tree. A page at the first level will be demoted by 1 (all <h1> elements will become <h2> elements, and so on). A page at the second level will be demoted by 2, and so on.

PDF カスタマイズに対するアトラシアンのサポートは限定されています。 私たちは HTML と CSS を使用して PDF レイアウトをカスタマイズする機能をサポートし、機能が壊れているか、公開例に記載したように動作しない場合は支援を行います。しかし、カスタマイズした HTML と CSS が提供する可能性は潜在的に際限がない状態であるため、アトラシアンは PDF カスタマイズから生ずる問題やカスタマイズに関連する問題をサポートしません。

この内容はお役に立ちましたか?

正確ではなかった明確ではなかった関係なかった

さらにヘルプが必要ですか?

アトラシアンコミュニティをご利用ください。

コミュニティに質問