PDF へのエクスポートをカスタマイズする

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

注意:

  • PDF のカスタマイズはスペースごとに固有です。

  • PDF のカスタマイズはスペースのエクスポートにのみ適用されます。(ツール > PDFファイルへのエクスポートを使用した単一ページのエクスポートには適用されません。)

  • Confluence の PDF カスタマイズは HTML と CSS の組み合わせを使用します。

  • エクスポートされる PDF ファイルの特定の要件を満たすには、次のものを変更します。

    • PDF のレイアウト HTML を使用して、タイトルページ、ヘッダー、フッターなどの機能を含め、エクスポートされたコンテンツの構造を定義します。

    • PDFスタイルシート CSS を使用して、ページサイズ、余白、フォント、色、リスト番号など、エクスポートされたコンテンツの各要素のスタイルを定義します。

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

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

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

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

  1. Confluence ナビゲーションで、 (設定) を選択します。

  2. サイドバーから [PDF レイアウト] を選択します。

  3. 編集を選択します。

  4. カスタマイズを入力します。

    1. 入力した HTML および CSS は、PDF タイトルページやページヘッダー、フッターにレンダリングされます。

  5. [保存] を選択します。

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

  1. Confluence Cloud のスペースに移動します。

  2. サイドバーで [スペース設定] を選択します。

  3. [ルック & フィール] カードから [PDF エクスポート] を選択します。
    この操作を行うには、スペース管理権限が必要です。 

  4. 編集を選択します。

  5. HTML を追加して、タイトル、ヘッダー、フッターをカスタマイズします。

    1. HTML にインライン CSS を含めることもできます。

  6. [保存] を選択します。

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

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

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

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

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

  1. Confluence ナビゲーションで、 (設定) を選択します。

  2. サイドバーから [PDF スタイルシート] を選択します。

  3. 編集を選択します。

  4. CSS を追加して、各ページに同じコンテンツをレンダリングします。

  5. [保存] を選択します。

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

  1. Confluence Cloud のスペースに移動します。

  2. サイドバーで [スペース設定] を選択します。

  3. [ルック & フィール] カードから [PDF エクスポート] を選択します。
    この操作を行うには、スペース管理権限が必要です。 

  4. 編集を選択します。

  5. カスタマイズを入力します。

    1. PDF スタイル シート フィールドでは、カスケーディング スタイル シート (CSS) ルールを使用できます。

  6. [保存] を選択します。

カスタマイズの例

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

ページサイズ

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 CSS - PDF Stylesheet @page { /*The A4 paper size is 210 mm wide by 297 mm long*/ size: 210mm 297mm; }

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

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

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

1 2 3 4 5 6 7 8 9 10 11 CSS - PDF Stylesheet @page { /*A4-sized pages in landscape orientation are 297 mm wide by 210 mm long*/ size: 297mm 210mm; }

ページ余白

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

1 2 3 4 5 6 7 8 9 10 11 12 CSS - PDF Stylesheet @page { size: 210mm 297mm; margin: 15mm; }

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 CSS - PDF Stylesheet @page { margin-top: 2.54cm; margin-bottom: 2.54cm; margin-left: 1.27cm; margin-right: 1.27cm; }

余白を設定して印刷された文書を綴じるための綴じ代を作るには、次のように疑似クラス :left:right を使用します。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 CSS - PDF Stylesheet @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 スタイルシートに次のルールを追加します。

1 2 3 4 5 6 7 8 9 10 11 CSS - PDF Stylesheet .pagetitle { page-break-before: always; }

タイトル ページ

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

1 2 3 4 5 6 7 8 9 10 HTML - PDF Layout: Title Page Section <div class="fsTitlePage"> <img src="/download/attachments/590719/titlepage.png" /> <div class="fsTitle">Planning for Confluence 4.0</div> </div>

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 CSS - PDF Stylesheet .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 です。

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

  1. 画像を Confluence ページに添付します。

  2. そのページの添付ファイル一覧を表示し、画像を右クリックして、その場所をコピーします。

  3. 上記のように、PDF スタイルシートの適切な src="" 属性にリンクを貼り付けます。

  4. 画像 URL の /download/... の前に来る最初の部分を削除して、相対 URL になるように編集します。

目次

初期設定では、目次はタイトル ページの後ろに生成されるか、PDF レイアウトでタイトル ページが未定義な場合は PDF 文書の冒頭に生成されます。目次に適用される初期設定の CSS ルールを確認するには、初期設定の CSS ルール (confluencedefaultpdf.css) をダウンロードして名前に toc が含まれる特定のルールを調べます。

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

目次を無効にする

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

1 2 3 4 5 6 7 8 9 10 11 CSS - PDF Stylesheet div.toc-macro { display: none; }
目次のリーダー文字を変更する

リーダー文字は、目次の見出しをページ番号とリンクするために使用されます。初期設定では、リーダー文字は「.」(ドット) 文字です。リーダーの値としては点線実線スペースが有効で、leader(". . . ") のような文字列も使用できます。

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

1 2 3 4 5 6 7 8 9 10 CSS - PDF Stylesheet span.toclead:before { content: leader(solid); }

ヘッダーとフッター

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

1 2 3 4 5 6 7 HTML - PDF Layout: Footer Section Copyright © 2013, Atlassian Pty Ltd.

ページ番号

ページ番号を追加するには、PDF レイアウトでカスタマイズされた HTML と PDF スタイルシートでカスタマイズされた CSS を組み合わせる必要があります。

  1. PDF レイアウト HTML: フッター セクション (またはヘッダー セクション) で、ページ番号のプレースホルダーとして機能する一意の ID (pageNum など) を空の span 要素に入れて使用します。

    1 2 3 4 5 6 7 8 HTML - PDF Layout: Footer Section <span id="pageNum"/>
  2. PDF スタイルシート CSS:空の span に適用するために、以下の CSS セレクタ ルールを作成します。

    1 2 3 4 5 6 7 8 9 10 11 CSS - PDF Stylesheet #pageNum:before { content: counter(page); }

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

  • #pageNum ルールは、特定の ID「pageNum」を値として持つ HTML 要素、つまりヘッダーやフッター用に作成した span 要素を適用対象として指定します。

  • セレクターの :before 部分は、span 要素が処理される前にコンテンツを挿入可能にする疑似クラスです。

  • counter(page) は、現在のページ番号をコンテンツとして返す関数です。

  • コンテンツ プロパティは、CSS プロセッサーに対して動的コンテンツ (つまり、インクリメント ページ番号) が span タグに挿入されることを示します。

ワードラップ

長い単語または空白で分離されていない単語を改行するには、word-wrap プロパティの値を break-word に設定するセレクターを PDF スタイルシートに追加します。

1 2 3 4 5 6 7 8 9 10 CSS - PDF Stylesheet 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 カスタマイズから生ずる問題やカスタマイズに関連する問題をサポートしません。

その他のヘルプ