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

このページの内容

お困りですか?

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

コミュニティに質問

robotsnoindex

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

注意:

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

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

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

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

グローバル PDF レイアウトを設定する

  1. Confluence ナビゲーションで (設定) を選択します。
  2.  [PDF レイアウト] を選択します。

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

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

  1. ナビゲーションでスペース名をクリックし、[スペース設定] () をクリックしてから、[ルック アンド フィール] タブをクリックします。この操作には、スペース管理権限が必要です。
  2. [PDF レイアウト] タブをクリックします。
  3. 編集をクリックします

スペースが PDF にエクスポートされるとき、次のエリア用に生成される HTML をカスタマイズできます。

  • PDF Space Export Title Page - タイトル ページ
  • PDF Space Export Header - ページ ヘッダー
  • PDF Space Export Footer - ページ フッター

PDF レイアウト セクションでは HTML が有効です。HTML にインライン CSS を含めることもできます。

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

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

最初に、PDF スタイルシートの既定の CSS ルール (confluencedefaultpdf.css) をダウンロードします。

このファイルで定義されたルールはすべてカスタマイズ可能で、PDF エクスポート スタイルシート セクションに追加できます。カスタマイズすると、既定の CSS ルールはどれも上書きされます。カスタマイズが定義されていない場合、既定の CSS ルールが適用されます。

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

PDF スタイルシートのカスタマイズ方法

robotsnoindex
robotsnoindex

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

  1. Confluence ナビゲーションで (設定) を選択します。
  2. [ルック アンド フィール] タブをクリックします。
  3. [PDF スタイルシート] タブをクリックします。

次の画面で、各ページのコンテンツをレンダリングする CSS コードを入力し、保存できます。

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

  1. ナビゲーションでスペース名をクリックし、 [スペース設定] をクリックしてから、[ルック アンド フィール] タブをクリックします。
    この操作には、スペース管理権限が必要です。
  2. [PDF スタイルシート] タブをクリックします。
  3. [編集] をクリックします。
  4. カスタマイズを入力します。

この 「PDF エクスポート スタイルシート」ページには、PDF スタイルシートの現在の(例えば、カスタマイズされた)コンテンツが表示されます。 

カスタマイズの例

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

ページサイズ

既定のページサイズは、Confluence サーバーの設置場所によって決まります。例えば、このサーバーが米国に設置されている場合、PDF エクスポートの既定の用紙サイズは US レター(横 8.5 インチ✕ 縦11 インチ)です。サーバーがオーストラリアに設置されている場合は、既定の用紙サイズは A4 (横 210 mm ✕ 縦297 mm)です。用紙サイズの詳細については、ウィキペディアで調べられます。

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

CSS - PDF スタイルシート
@page
{
/*The A4 paper size is 210 mm wide by 297 mm long*/
size: 210mm 297mm;
}

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

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

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

CSS - PDF スタイルシート
@page
{
/*A4-sized pages in landscape orientation are 297 mm wide by 210 mm long*/
size: 297mm 210mm;
}

ページ余白

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

CSS - PDF スタイルシート
@page
{
size: 210mm 297mm;
margin: 15mm;
}

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

CSS - PDF スタイルシート
@page
{
margin-top: 2.54cm;
margin-bottom: 2.54cm;
margin-left: 1.27cm;
margin-right: 1.27cm;
}

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

CSS - PDF スタイルシート
@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 スタイルシートに次のルールを追加します。

CSS - PDF スタイルシート
.pagetitle
{
page-break-before: always;
}

タイトル ページ

PDF レイアウト画面のタイトル ページセクションに HT​​ML を追加して、PDF 文書にタイトル ページを追加できます。次の例ではタイトル ページを作成してタイトルを追加します。

HTML - PDF レイアウト: タイトル ページ セクション
<div class="fsTitlePage">
 <img src="/download/attachments/590719/titlepage.png" />
<div class="fsTitle">Planning for Confluence 4.0</div>
</div>

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

CSS - PDF スタイルシート
.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. 上記のように、適切な src="" 属性へのリンクを PDF スタイルシートに貼り付けます。
  4. 画像の URL で、/download/... の手前の最初の部分を削除し、相対 URL になるように編集します。

目次

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

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

目次を無効にする

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

CSS - PDF スタイルシート
div.toc-macro
{
display: none;
}

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

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

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

CSS - PDF スタイルシート
span.toclead:before
{
content: leader(solid);
}

ヘッダーとフッター

PDF レイアウト画面の "Header" と Footer" セクションを使用して、PDF ページにヘッダーとフッターを追加できます。既定では、ヘッダーとフッターはスペースのエクスポートにのみ適用され、単一ページのエクスポートには適用されません (「PDF エクスポートの高度なカスタマイズ」もご参照ください)。次の例では、簡単な著作権表示を追加します。

HTML - PDF レイアウト:フッターセクション
Copyright © 2013, Atlassian Pty Ltd.

ページ番号

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

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

    HTML - PDF レイアウト:フッターセクション
    <span id="pageNum"/>
    
  2. PDF スタイルシート CSS:空の span に適用するために、以下の CSS セレクタ ルールを作成します。

    CSS - PDF スタイルシート
    #pageNum:before
    {
    content: counter(page);
    }
    

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

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

ワードラップ

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

CSS - PDF スタイルシート
div 
{  
word-wrap: break-word;  
}

一般的な形式設定

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

注意

  • 見出し要素の変更: h1h2 など。Confluence はエクスポートされたスペースの階層構造に応じて見出し要素を変更し、スペース エクスポート全体に統一された外観を適用します。つまり、見出しのレベルが下げられます。これはカスタム PDF スタイルシートの適用に影響を与えます。CSS スタイルを正しく適用するために、見出しの変更量を算出できます。見出しのレベルはエクスポート ツリーの深さの値に応じて下げられます。第 1 レベルのページは 1 つ下げられます (すべての <h1> 要素は <h2> 要素になる)。第 2 レベルのページは 2 つ下げられ、同様に続きます。
  • PDF カスタマイズに対するアトラシアンのサポートは限定されています。 私たちは HTML と CSS を使用して PDF レイアウトをカスタマイズする機能をサポートし、機能が壊れているか、公開例に記載したように動作しない場合は支援を行います。しかし、カスタマイズした HTML と CSS が提供する可能性は潜在的に際限がない状態であるため、アトラシアンは PDF カスタマイズから生ずる問題やカスタマイズに関連する問題をサポートしません。
最終更新日 2020 年 4 月 27 日

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

はい
いいえ
この記事についてのフィードバックを送信する
Powered by Confluence and Scroll Viewport.