Editing the PDF Stylesheet

Confluence administrators and space administrators can customise the PDF exports for individual spaces. Possible customisations include:

A title page, which can include images
Page headers and footers, each with customisable content such as page numbering
Table of contents with page numbering
Page and margin sizes

On this page:

はじめる前に

Please take note of the following points:

Most PDF customisations use a combination of HTML and CSS (Cascading Style Sheets). You need to be comfortable with these technologies before applying any customisations.
PDF のカスタマイズはスペースごとに固有です。
There two areas that control Confluence custom PDF exports. You will need to visit each of these areas to ensure your PDF exports are customised to your requirements:
- The PDF Layout defines the title page, headers and footers.
- The PDF Stylesheet defines the page size and margins, font, colour, list numbering, and all other style customisations.

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

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

To customise the PDF layout,

Go to the 'Space Admin' tab of the Browse Space view. To do this:
- Go to a page in the space, open the 'Browse' menu and select 'Space Admin'.
  'Space Admin' is displayed only if you are a space administrator for that space or you are a Confluence system administrator.
Click 'PDF Layout' in the 'Look and Feel' section of the left-hand panel.
Click the 'Edit' button. You can now customise the HTML that generates following areas in the exported PDF document:
- PDF Space Export Title Page – title page.
- PDF Space Export Header – page headers.
- PDF Space Export Footer – page footers.
必要に応じて、それぞれのテキストボックスにカスタマイズ内容を入力してください。PDF レイアウトセクションでは HTML コードが有効です。HTML にインライン CSS を含めることもできます。
[保存] をクリックします。

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

You can adjust the appearance of the PDF pages by editing the CSS stylesheet.

To customise the PDF Stylesheet,

Go to the 'Space Admin' tab of the Browse Space view. To do this:
- Go to a page in the space, open the 'Browse' menu and select 'Space Admin'.
  'Space Admin' is displayed only if you are a space administrator for that space or you are a Confluence system administrator.
Click 'PDF Stylesheet' in the left-hand panel. The 'PDF Export Stylesheet' section appears, showing the current contents of your PDF stylesheet. It contains all CSS rule customisations applied to the pages in the space.
Click the 'Edit' button.
Enter your customisations into the text box as required. The PDF stylesheet section accepts Cascading Style Sheets (CSS) rules.
[保存] をクリックします。

Default CSS Settings

If no PDF customisations are defined on the PDF stylesheet screen, the default CSS rules will be applied to your PDF exports. By default, the export does not include a title page, headers or footers.
To get started, you can download the default CSS rules of the PDF stylesheet: confluencedefaultpdf.css. Any rule defined in this file can be customised and added to the 'PDF Export Stylesheet' section.
You can also make further CSS customisations as required. This means you can override any default CSS rule by redefining it in the 'PDF Export Stylesheet' section with your own customisations.

PDF Export Methods

There are two PDF export methods (see Exporting Confluence Pages and Spaces to PDF):

Exporting a single page via the 'Tools' menu on the page or blog post. Only the PDF stylesheet customisations apply to single page exports.
Exporting one or more pages via the space export function. When exporting a space, all your customisations apply, including both the PDF stylesheet and the PDF layout.

To make your PDF layout customisations apply to a single page exported to PDF, either:

use the 'space export' method to export that single page only, or
if your header and footer customisations contain only text, follow the appropriate customisations provided in the advanced PDF stylesheet customisations.

Examples of Basic Customisations

This section provides examples of typical customisations that you can add to your PDF stylesheet. Once you are familiar these basic customisations, you may wish to try some advanced customisations.

Page Customisations

Modifications to page and margin sizes are made in the @page CSS rule. To make changes to this rule, implement the following type of code in the PDF stylesheet.

@page
{
/*Page specific styles (that is, customisations of properties) go here*/
}

Customising the Page Size

The default page size is based on the locale of your Confluence server. For example, if this server is located in the US then the default paper size of your PDF export will be US Letter size (8.5 inches wide by 11 inches long). If the server is located in Australia, the default paper size will be A4 (210 mm wide by 297 mm high).

To modify the page size to A4, add a size property to the top of the rule like this:

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

More information about paper sizes can be found on Wikipedia.

Customising the Page Margins

To add a margin of 15 mm to a paper size of A4, your CSS @page rule would look like this:

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

Customising the Table of Contents

By default, a table of contents will be generated after the title page, or at the beginning of the document if no title page is defined in the PDF layout. To make changes to the look and layout of the table of contents, define the appropriate CSS rules in the PDF stylesheet.

For details about the default CSS rules applied to the table of contents, download the default CSS rules (from the link above) and examine the specific rules with toc in their name.

目次を無効にする

To prevent the table of contents from being generated in your PDF document, add the div.toc rule to the PDF stylesheet and set its display property to none:

div.toc
{
display: none;
}

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

The leader character is used to link the name of a heading in the table of contents with its page number. The page number is usually aligned to the right-hand margin of the page. By default, the leader character is the '.' (dot) character. You can change it by customising the leader character CSS rule span.toclead:before and adding this to the PDF stylesheet.

To change the leader character to a solid line, modify the CSS rule to:

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

To change the leader character to spaces, modify the CSS rule to:

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

(Be aware that using a space as a leader character can make the table of contents difficult to read.)

ワードラップ

In order to break long words or words that are not separated by whitespace, add a selector to the PDF stylesheet containing the word-wrap property with a value of break-word:

div {  
    word-wrap: break-word;  
}

Adding a Title Page

You can create a title or cover page to your PDF document using HTML. Use the 'PDF Space Export Title Page' section of the PDF layout to do this. The following example uses HTML with an inline CSS rule to generate a title page.

<div class="fsTitlePage" style="margin-left:auto;margin-top:75mm;margin-right:auto;">
<img src="/download/attachments/12345/titlepage.png"/>
</div>

In the example above, the title page includes an image called 'titlepage.png', centred in the middle of the page. The image is attached to a Confluence page and is referenced via its relative URL (that is, we use only the last part of the URL, excluding the Confluence site's base URL).

Follow these instructions to include an image on your PDF title page:

画像を Confluence ページに添付します。
そのページの添付ファイルのリストが表示されます。
画像を右クリックし、その保存場所をコピーします。
上記の通り、PDF スタイルシート内の適切な src="" 属性にリンクを貼り付けます。
/download/... の前の、URL の最初の部分を削除します。

Adding Headers and Footers

You can add headers and footers to your PDF pages using HTML. Use the 'PDF Space Export Header' and 'PDF Space Export Footer' sections of the PDF layout to do this. For simple headers and footers, plain text is enough. The following example adds a simple copyright notice.

Copyright © 2010, Atlassian Pty Ltd.

Adding Page Numbering to a Header or Footer

To add page numbering to your documentation, you need to combine some customised HTML in the header or footer with some customised CSS in the PDF stylesheet.

Create a header or footer with an empty span element and give it a unique ID, for example pageNum. This is a place holder for the page number in your PDF document.
```
<span id="pageNum"/>
```
Create the following CSS selector rule for the empty span and add it to the PDF stylesheet:
```
#pageNum:before
{
content: counter(page);
}
```

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

#pageNum ルールは、指定した「pageNum」ID を値として持つ HTML 要素、つまりヘッダーやフッター用に作成した span 要素を選択します。
セレクターの :before 部分は、span 要素が処理される前にコンテンツを挿入できるようにする疑似クラスです。
counter(page) は、現在のページ番号をコンテンツとして返す関数です。
The content property tells the CSS processor that dynamic content (that is, an incrementing page number) is to be inserted before the span tag.

一般的な形式設定

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

注意

見出し要素の変更: h1、h2 など。Confluence はエクスポートされたスペースの階層構造に応じて見出し要素を変更し、スペースエクスポート全体に統一された外観を適用します。つまり、見出しのレベルが下げられます。これはカスタム PDF スタイルシートの適用に影響を与えます。CSS スタイルを正しく適用するために、見出しの変更量を算出できます。見出しのレベルはエクスポートツリーの深さの値に応じて下げられます。第 1 レベルのページは 1 つ下げられます (すべての <h1> 要素は <h2> 要素になる)。第 2 レベルのページは 2 つ下げられ、同様に続きます。

ページツリー