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

コンテンツを Word、PDF、HTML、XML にエクスポートする

このページの内容

お困りですか?

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

コミュニティに質問

Confluence は、ニーズに合わせてカスタマイズおよびスタイリングできる基本的な PDF エクスポートを提供します。 

スペース内の PDF エクスポートをカスタマイズするにはスペース管理者権限が、サイト全体の PDF をエクスポートカスタマイズするには Confluence 管理者グローバル権限が必要です。 

動作の仕組み

ユーザーがスペースを PDF にエクスポートすると、Confluence は現在のスペース内にあるレイアウトとスタイリング方法を適用するか、サイト全体の方法をグローバルに設定します。 

  • [PDF レイアウト] では、PDF にタイトル ページを追加し、すべてのページにヘッダーとフッターを追加できます。 
  • PDF スタイルシートを使用すると、PDF の外観を変更できます。用紙サイズやフォント、色、スペース、改行などの動作のコントロールなど、あらゆる要素を変更できます。 

PDF レイアウトと PDF スタイルシートはいずれも、スペース単位、またはサイト全体でグローバルにカスタマイズできます。スペースのカスタマイズは常に、グローバル カスタマイズよりも完全に優先されます。つまり、一部のアイテムをグローバルで設定し、ほかの項目をスペース レベルで同時に使用したりするすることはできません。 

制限事項

次の制限事項について確認しておくことをおすすめします。

  • PDF レイアウトの変更はページ単体のエクスポート ( > [PDF へのエクスポート] ではなくスペース エクスポートにのみ適用されます。  
  • Confluence Server と Data Center では、スペース エクスポートの処理方法が少し異なります。このため、Data Center で作成する PDF では、ページ番号の追加などの一部のオプションを使用できません。 
  • アトラシアンでは使用の開始に役立つ多数のカスタマイズ例を提供していますが、アトラシアン サポートは、PDF のスタイル設定や、カスタマイズによって発生した問題のサポートは行っていません。CSS に馴染みが薄い場合、アトラシアンのソリューション パートナーに支援を依頼するか、PDF のスタイル設定に役立つ WYSIWYG エディタを備えた、Scroll PDF Exporter などの Marketplace アプリをご確認ください。 

PDF のレイアウトを変更する

PDF レイアウトでは、タイトル ページ、ヘッダー、またはフッターを PDF エクスポートに追加できます。PDF レイアウト フィールドでは HTML が許可されます。HTML にインライン CSS を含めることもできます。

サイト全体の PDF レイアウトを変更するには、次の手順を実行します。

  •  > [一般設定] > [PDF レイアウト] に移動します。
    これを行うには、Confluence Administrator グローバル権限が必要です。
     
  • [編集] を選択してから、[タイトル]、[ヘッダー]、または [フッター] フィールドにカスタマイズを追加します。

特定のスペースの PDF レイアウトを変更するには、次の手順を実行します。

  • スペースに移動し、サイドバーの下部から スペースツール  > ルックアンドフィール  を選択します。これには スペース管理者権限 が必要です。
  • PDF レイアウトを選択します。
  • [編集] を選択してから、タイトル、ヘッダー、またはフッター フィールドにカスタマイズを追加します。

PDF レイアウトの例

PDF レイアウトで実行できることの例をいくつか示します。PDF レイアウトでは HTML とインライン CSS が許可されます。 

タイトル ページ

この例では、"Documentation for Confluence" タイトル、ロゴ、および "Contents" 追加タイトルを目次の上に追加しています。

<div class="fsTitlePage">  
 <img src="/download/attachments/169118009/atlassian_logo.png" />  
<div class="fsDocTitle">Documentation for Confluence</div>  
</div>   
<div class="tocTitle">Contents</div>

使用したロゴ画像は、同じサイトの Confluence ページに添付されます。ページの画像を右クリックしてロケーションをコピーすることで添付ファイル ID を確認できます。

ヘッダーまたはフッター

この例では、著作権情報とリンクのプレーン テキストをフッターに追加しました。

Created in 2018 by Atlassian. Licensed under a <a href="http://creativecommons.org/licenses/by/2.5/au/">Creative Commons Attribution 2.5 Australia License</a>.


PDF スタイルシートを変更する

PDF スタイルシートを使用すると、PDF の外観を変更できます。これには、用紙サイズ、フォント、色、スペース、その他のスタイルが含まれます。 

サイト全体の PDF スタイルシートを変更するには、次の手順を実行します。

  •  > [一般設定] > [PDF スタイルシート] に移動します。
    これを行うには、Confluence Administrator グローバル権限が必要です。
     
  • [編集] を選択してから、CSS を追加します。

特定のスペースの PDF スタイルシートを変更するには、次の手順を実行します。

  • スペースに移動し、[スペース ツール] > [ルック アンド フィール] をサイドバーの一番下から選択します。
    これを行うには、スペース管理者権限が必要です。 
  • PDF スタイルシートを選択します。
  • [編集] を選択してから、CSS を追加します。

PDF スタイルシートの例

PDF スタイルシートで使用できる、一般的な CSS オーバーライドの例を次に示します。 

PDF スタイルシートでオーバーライドを指定している場合を除き、既定の CSS ルールが適用されます。

ページサイズ

既定のページ サイズは US Letter (横 8.5 インチ、縦 11 インチ) です。この動作をオーバーライドして特定のサイズを指定するには、CSS @page ルールに size プロパティを追加します。

例えば、A4 サイズでスペースをエクスポートする場合は次のようにします。

@page
{
/*The A4 paper size is 210 mm wide by 297 mm long*/
size: 210mm 297mm;
}

ページの向き

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

例えば、A4 横向きの PDF を生成する場合、@page ルールは次のようになります。

@page
{
/*A4-sized pages in landscape orientation are 297 mm wide by 210 mm long*/
size: 297mm 210mm;
}

ページ余白

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

@page
{
size: 210mm 297mm;
margin: 15mm;
}

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

@page
{
margin-top: 2.54cm;
margin-bottom: 2.54cm;
margin-left: 1.27cm;
margin-right: 1.27cm;
}

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

@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 ページが新しいページで開始されないようにするには、次の CSS を使用して既定の改ページをオーバーライドします。

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

この動作は Confluence 6.13 で変更されました。Confluence 6.12 以前を使用している場合、各ページ タイトルの前に改ページは追加されません。 

Confluence Data Center をお使いの場合、PDF は外部プロセス プールで 1 ページずつ生成され、すべてのページの生成が完了してから結合されるため、この動作を変更することはできません。

テキストの折り返し

分割できない長い文字列 (URL など) はページの幅 (表の場合はセル幅) に合わせて自動的に折り返されます。 

単語や長い文字列を途中で折り返したくない場合は次の CSS を使用できます。

div {
    word-wrap: normal !important;
}

この場合、PDF 内での表のフォーマットに問題が起き、長いコンテンツがはみ出たり、ページから切り捨てられる可能性があります。

タイトル ページ

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;
}  

目次

スペースを PDF にエクスポートすると、既定で目次が含まれます。目次は、ドキュメントの最初、または PDF レイアウトのタイトル ページを設定している場合はタイトル ページのあとに表示されます。 

目次を省略するには、次のオーバーライドを使用します。

div.toc
{
display: none;
}

目次では、ページ タイトルと対応するページ番号を結ぶリーダー文字が使用されます。これは既定ではドットです。許可される値は dotted および space です。文字列 (leader(". . . ") など) を使用することもできます。

以下の例では、点線の代わりに実線を使用しています。 

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

表を含むページのエクスポートの際は、表がページに収まるよう、列の幅が狭められます。個々の列は、それぞれのコンテンツに合わせてリサイズされます。 

表の列を等幅にしたい場合は、次の CSS を使用できます。

table.fixedTableLayout {
    table-layout: fixed !important;
    width: 98% !important;
}

表内の画像は、エディタで設定されたサイズ使用してエクスポートされます。表に大きい画像が含まれる場合、PDF へのエクスポート時に表の一部が切り捨てられる場合があります。切り捨てられる部分が出ないようにするには、エディタで画像のサイズを変更し、合計幅を約 600 ピクセル (A4 ページ/縦向きの場合) 未満にすることをおすすめします。 

あるいは、次の CSS を使用して画像を幅に合わせることができます。

table img.confluence-embedded-image {
    -fs-fit-images-to-width: 100%  !important;
}


ページ番号

The best way to add page numbers to your document is to select Include page numbers on the export screen, available from 6.13.3. If you're using an earlier version, or want more control over where page numbers appear, you can use CSS to add numbers instead. 

If you're using Confluence Data Center, you can't add page numbers using these methods, as PDFs are generated page by page in the external process pool, and then combined together once all pages are complete. Use the Include page numbers option on the export screen instead (available from 6.13.3).

ページの一番下に、"Page x of y" の形式でページ番号を追加するには、次の CSS を PDF スタイルシートに追加します。

@page
{
    @bottom-center
    {
        content: "Page " counter(page) " of " counter(pages);
        font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
        font-size: 8pt;
    }
}

または、ページ番号をフッターに追加できます。これを行うには、PDF レイアウトとスタイルシートに変更を加える必要があります。 

最初に、PDF レイアウトに要素を追加します。この例では、これを pageNum と呼びます。

<span id="pageNum"/>

Then, in the PDF stylesheet, style the pageNum element as follows: 

#pageNum:before
{
content: counter(page);
}

見出し

PDF エクスポートの見出しサイズは、Confluence ページで使用されるサイズにほぼ一致します。これらは次のようにすることで簡単にオーバーライドできます。 

h1 {
    /* Custom styling */
}
 
 
h2 {
    /* Custom styling */
}

この動作は Confluence 6.13 で変更されました。Confluence 6.12 以前では、見出しのレベルはページ ツリーでのページの位置に基づいて下げられていました。現在は、見出しには各ページで一貫したサイズが設定されています。 

その他のフォーマット

スタイルシートを使用すれば、フォント、表、行間、マクロなど、ページのあらゆる要素の外観をカスタマイズできます。エクスポート エンジンは Confluence が生成した HTML 出力から直接機能します。したがって、カスタマイズの最初のアクションとして、Confluence または Confluence マクロによって生成された HTML 要素のセレクタを見つけることをおすすめします。その後、PDF スタイルシートに CSS ルールを追加します。 

Last modified on Mar 6, 2019

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

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