PDF エクスポートの高度なカスタマイズ

ヘッダーとフッター

単一ページのエクスポートにヘッダーとフッターを追加する

By default, custom headers and footers set up in the PDF Layout screen (see Customising Exports to PDF), only apply to space exports and not to exports of single pages. However, it is possible to add CSS rules to your PDF Stylesheet that produce headers and footers in single page exports as well as space exports.

For custom headers, define @top-left, @top-center and @top-right rules within your @page rule. These rules apply respectively to content that appears on the left-hand side, centre and right-hand side of your page's header area.

カスタム フッターについては、@page ルール内で @bottom-left、@bottom-center および @bottom-right ルールを定義します。

たとえば、次のルールは、ヘッダーの中央にドキュメントのタイトルを追加し、フッターの中央にページ番号を追加します。

@page
{
    @top-center
    {
        content: "Document Title Goes Here";
        font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
        font-size: 8pt;
    }
    @bottom-center
    {
        content: "Page " counter(page);
        font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
        font-size: 8pt;
    }
    /* Any other page-specific rules */
}

メモ:

• font-family プロパティと font-size プロパティにより、初期設定の CSS ルールに基づいて、ヘッダーとフッターのテキストが本文と同じ初期設定のフォント スタイルでレンダリングされるようになります。
• 単一ページのエクスポートで、（Confluence インスタンス内の添付ファイルとして保存されている）画像をヘッダーとフッターに挿入するために、この方法を使用することはできません。

ヘッダーとフッターに画像を追加する

ヘッダーまたはフッターに画像を挿入するには、PDF のレイアウト画面のヘッダーまたはフッターセクションに HT​​ML を追加します。  

The following example uses and use an HTML img element with src attribute to add an image to the left of the header. The src attribute refers to an image attached to a Confluence page. The image element is usually placed within a div element container.

<div style="margin-top:10mm">
  <img src="/download/attachments/12346/header-image.png"/>
</div>

上の例では、ヘッダーに "header-image.png" という画像が含まれています。src 属性の "12346" は、画像が添付されているページの ID 番号です。

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

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

メモ:

• この例では、style 属性のインライン CSS プロパティである margin-top を使用して、画像がページの上部から 10 mm 離れるように設定しています。この設定は、ヘッダーの画像がページ上部に接したり、はみ出たりするほど大きい場合に便利です。
• 同様に、フッターでは、margin-bottom:XXmm プロパティを使用して、画像がページ下部から "XX" mm 離れるように設定できます。
• 非常に大きな画像は、ページの本文にはみ出したり、ヘッダーまたはフッター内で使用されるテキストや他の要素の位置に影響したりする可能性があります。そのような場合、画像のサイズを小さくしてから、もう一度 Confluence ページに添付することをおすすめします。画像のサイズを変えず、ほかのコンテンツを下に移動したい場合は、@page CSS ルールの margin-top プロパティを設定します。
• 初期設定では、ヘッダーまたはフッターの画像はページの左側に揃えられます。ただし、style 属性に text-align:center または text-align:right プロパティのいずれかを追加することで、この画像をページの中央または右側に揃えることができます。たとえば、ヘッダー画像をページの右側に揃えるには、style 属性を次のように設定します: style="margin-top:10mm; text-align:right"。

他のフォントを組み込む

By default, Confluence provides Times New Roman, Helvetica or Courier fonts for use in PDF exports. You can use your own fonts for PDF exports by declaring them in a @font-face CSS rule in your PDF Stylesheet.

次の CSS ルールの例は、Consolas フォントを宣言して、PDF エクスポートの一部の要素に適用する方法を示しています。

@font-face 
{  
  src: url(file:///usr/share/fonts/Consolas.ttf);  
  -fs-pdf-font-embed: embed;  
}  
 
.code pre, .preformatted pre, tt, kbd, code, samp 
{  
  font-family: Consolas, monospace;  
  font-size: 9pt;  
}

CSS で指定したフォント パスは、Confluence サーバー上のフォントへのパスでなければなりません。

タイトルページに動的なタイトルを追加する

When you export an arbitrary set of pages from Confluence, you may like to have a corresponding title added to the cover (or title) page automatically. This can be done (in a somewhat irregular way) by using the top level item from the default table of contents as the title. This method relies on the having the exported pages structured as sub-pages of the top-level page. In other words, the pages to be exported should consist of a page (at the top-level) and all of its child pages. The result is that the title that appears on the cover page changes depending on the top-level page that is used for the export.

以下の CSS では、表紙のタイトルとして使用するために最上位の目次を移動して、スタイル設定し、通常この目次項目に関連付けられるリーダーとページ番号をオフにしています。

.fsTitlePage
{
position:relative;
left:0px;
}

/* Turn off the default section numbering for this TOC item */
.toclvl0:before
{
 content: " ";
 counter-reset: chapter 0; 
}

/* Hide the default page numbering for this TOC item */
.toclvl0 .tocnum
{
display: none;
}

/* Move and style this TOC item */
.toclvl0
{
position:absolute;
top:250px;
font-size: 42px;
font-weight: bold;
margin: 72px 0 4px 0;
text-align:center;
}

PDF 出力からテキストを隠す

このセクションでは、PDF エクスポートのテキストを非表示にする方法を説明します。すなわち、Confluence ページのテキストを PDFエクスポートでは非表示にできるということです。

手順は 3 つです。

1. 指示にしたがって、NoPrint ユーザーマクロを定義します。
2. NoPrint マクロを使用して、Confluence ページ上のテキストをマークします。

3. 次の CSS を PDF スタイルシートに追加し、NoPrint マクロを PDF エクスポートに認識させます。

   CSS - PDF スタイルシート

   .noprint 
   {
   display: none ;
   }
   

インデックス作成

To obtain an index at the end of the exported PDF file, consider using the Scroll Wiki PDF Exporter plugin that is produced by K15t Software GmbH.

注意

If styling is not working as expected, it is useful to look at the HTML source to which the CSS is applied. Whenever you create an HTML export that contains multiple pages, the intermediary HTML is stored in the temp directory in Confluence's home directory. For example:

<confluence-home>/temp/htmlexport-20110308-154047-1/export-intermediate-154047-2.html

関連トピック

Customising Exports to PDF