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

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

このページの内容

お困りですか?

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

コミュニティに質問

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

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

ヘッダーとフッター

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

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

カスタム ヘッダを作成するには、@page ルールに含まれる次のルールのいずれかを定義します: @top-left@top-center,@top-right。このルールを使用すると、ページのヘッダー領域の左側と中央、右側に表示する content をそれぞれ定義できます。

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

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

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 */
}
メモ:

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

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

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

次の例では、src 属性を持つ HTML img 要素を使用して、ヘッダーの左側に画像を追加します。src 属性は Confluence ページに添付された画像を指します。image 要素は、通常 div 要素のコンテナ内に配置されます。

HTML - PDF レイアウト:ヘッダーセクション
      <div style="margin-top: 10.0mm;">
        <img src="https://confluence.atlassian.com/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"

他のフォントを組み込む

初期設定では、Confluence は PDF エクスポート用として Times New Roman、Helvetica、Courier フォントを提供しています。PDF スタイルシートの @font-face CSS ルールで宣言することにより、PDF エクスポートで独自のフォントを使用できます。

次の 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 プラグインを使用することを検討してください.

注意

期待どおりのスタイルにならない場合には、CSS が適用された中間 HTML ソースを確認することをおすすめします。この中間 HTML は複数ページHTML エクスポートを作成するたびに生成され、Confluence のホーム ディレクトリの temp ディレクトリに保存されます。例:

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

最終更新日 2021 年 11 月 24 日

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

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