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

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

このページの内容

お困りですか?

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

コミュニティに質問

このページでは、PDF エクスポートの「高度な」カスタマイズに関する情報を提供します。これにより「PDF へのエクスポートをカスタマイズする」に記載された通常のカスタマイズが拡張されます。

(warning) 以下の情報は上級ユーザー向けです。以下に説明する高度なカスタマイズには Confluence、CSS、HTML の一部の知識を必要とすることにご注意ください。アトラシアンはカスタマイズをサポートしていないため、サポートエンジニアはこうした変更の支援ができません。

ヘッダーとフッター

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

単一ページをエクスポートする場合は、PDF レイアウト ページを使用した HTML ヘッダーとフッターの追加をサポートしていませんが、PDF スタイルシート ページ(スペースツール > ルックアンドフィール > PDFスタイルシート )の CSS ルールを使用すれば、単一ページをエクスポートする場合もヘッダーやフッターを作成できます。

For custom headers, define any of the following rules within your @page rule: @top-left@top-center, and @top-right. These rules allow you to define the content of the left-hand side, centre and right-hand side of your page's header area, respectively.

For custom footers, define @bottom-left, @bottom-center and @bottom-right rules within your @page rule.

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

CSS - PDF スタイルシート
@page
{
    @top-center
    {
        content: "Document Title Goes Here"; /* This is the content that will appear in the header */
        font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
        font-size: 8pt;
    }
    @bottom-center
    {
        content: "Page " counter(page); /* This is the content that will appear in the footer */
        font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
        font-size: 8pt;
    }
    /* Any other page-specific rules */
}
メモ:

  • The font-family and font-size properties ensure that the header and footer text is rendered in the same default font style used for the body text, based on the default CSS rules.
  • 単一ページのエクスポートで、(Confluence インスタンス内の添付ファイルとして保存されている)画像をヘッダーとフッターに挿入するために、この方法を使用することはできません。

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

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

The following example uses 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.

HTML - PDF レイアウト:ヘッダーセクション
      <div style="margin-top: 10.0mm;">
        <img src="https://confluence.atlassian.com/download/attachments/12346/header-image.png" />
      </div>
    
In the example above, the header includes an image called 'header-image.png'. The "12346" in the src attribute is the ID number of the page to which the image is attached.

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

  1. 画像を Confluence ページに添付します。
  2. そのページの添付ファイル一覧を表示し、画像を右クリックして、その場所をコピーします。
  3. Paste the link into the appropriate src="" attribute in your PDF Stylesheet, as shown above.
  4. Edit the image URL so that it is relative, by removing the first part of the URL before /download/....

メモ:

  • This example uses an inline CSS property margin-top in the style attribute to force the image away from the top of the page by 10mm. This comes in handy when your header image is large enough to touch or spill over the top of the page.
  • Likewise, for footers, you can use the margin-bottom:XXmm property to force an image away from the bottom of the page by 'XX' mm.
  • Very large images can spill over into the body of a page or alter the position of text or other elements used within a header or footer. In such situations, it is recommended that you reduce the size of the image and then attach it to your Confluence page again. If you prefer to keep the image size and want to move the content lower instead, you can do so by configuring the margin-top properties in the @page CSS rule.
  • By default, a header or footer image is aligned to the left-hand side of the page. However, you can align this image to the centre or right-hand side of a page by adding either the text-align:center or text-align:right properties to your style attribute. For example, to align the header image to the right-hand side of the page, your style attribute would look similar to this: 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 エクスポートの一部の要素に適用する方法を示しています。

CSS - 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 サーバー上のフォントへのパスでなければなりません。

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

Confluence から任意のページセットをエクスポートする場合、対応するタイトルを表紙(またはタイトル)ページに自動的に追加したいと考えるかもしれません。これは、既定の目次から最上位の項目をタイトルとして使用することによって(若干変則的な方法で)実現できます。この方法の可否は、エクスポートされたページが最上位ページのサブページという構造になっているかによります。すなわち、エクスポートされるページは(最上位の)ページ 1 枚とあとはすべて子ページという構成でなければなりません。表紙ページに表示されるタイトルは、エクスポートに使用される最上位ページによって変わるということになります。

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

CSS - PDF スタイルシート
.fsTitlePage { position:relative; left:0px; } /* Turn off the default section numbering for this TOC item */ .toclvl0:before { content: &quot; &quot;; 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 スタイルシートに追加して、PDF エクスポートが NoPrint マクロを認識するようにします。

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

インデックス作成

エクスポートされた PDF ファイルの最後の部分でインデックスを取得するには、K15t Software GmbH が作成した Scroll Wiki PDF Exporter プラグインを使用することを検討してください.

注意

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

/temp/htmlexport-20110308-154047-1/export-intermediate-154047-2.html

最終更新日: 2018 年 12 月 4 日

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

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