PDF エクスポートの高度なカスタマイズ
このページでは、PDF エクスポートの「高度な」カスタマイズに関する情報を提供します。これにより「PDF へのエクスポートをカスタマイズする」に記載された通常のカスタマイズが拡張されます。
ヘッダーとフッター
単一ページのエクスポートにヘッダーとフッターを追加する
単一ページのエクスポートでは PDF レイアウト ページを使用した HTML ヘッダーとフッターの追加はサポートされませんが、PDF スタイルシート ページ ([スペース設定] > [ルック アンド フィール] > [PDF スタイル シート]) の CSS ルールを使用すれば、単一ページのエクスポートにヘッダーやフッターを追加できます。
カスタム ヘッダを作成するには、@page ルールに含まれる次のルールのいずれかを定義します: @top-left、@top-center,、@top-right。このルールを使用すると、ページのヘッダー領域の左側と中央、右側に表示する content をそれぞれ定義できます。
カスタム フッターについては、@page ルール内で @bottom-left、@bottom-center および @bottom-right ルールを定義します。
たとえば、次のルールは、ヘッダーの中央にドキュメントのタイトルを追加し、フッターの中央にページ番号を追加します。
@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 のレイアウト画面のヘッダーまたはフッターセクションに HTML を追加します。
次の例では、src 属性を持つ HTML img 要素を使用して、ヘッダーの左側に画像を追加します。src 属性は Confluence ページに添付された画像を指します。image 要素は、通常 div 要素のコンテナ内に配置されます。
<div style="margin-top: 10.0mm;">
<img src="https://confluence.atlassian.com/download/attachments/12346/header-image.png" />
</div>
src 属性の "12346" は、画像が添付されているページの ID 番号です。次の手順にしたがって、ページに画像を含めます。
- 画像を Confluence ページに添付します。
- そのページの添付ファイル一覧を表示し、画像を右クリックして、その場所をコピーします。
- 上記のように、適切な
src=""属性へのリンクを PDF スタイルシートに貼り付けます。 - 画像の URL の
/download/...の前に来る最初の部分を除去し、相対 URL になるように編集します。
メモ:
- この例では、
style属性のインライン CSS プロパティであるmargin-topを使用して、画像がページの上部から 10 mm 離れるように設定しています。この設定は、ヘッダーの画像がページ上部に接したり、はみ出たりするほど大きい場合に便利です。 - 同様に、フッターでは、
margin-bottom:XXmmプロパティを使用して、画像がページ下部から "XX" mm 離れるように設定できます。 - 非常に大きな画像は、ページの本文にはみ出したり、ヘッダーまたはフッター内で使用されるテキストや他の要素の位置に影響したりする可能性があります。そのような場合、画像のサイズを小さくしてから、もう一度 Confluence ページに添付することをおすすめします。画像のサイズを変えず、ほかのコンテンツを下に移動したい場合は、
@pageCSS ルールのmargin-topプロパティを設定します。 - 初期設定では、ヘッダーまたはフッターの画像はページの左側に揃えられます。ただし、
style属性にtext-align:centerまたはtext-align:rightプロパティのいずれかを追加することで、この画像をページの中央または右側に揃えることができます。たとえば、ヘッダー画像をページの右側に揃えるには、style属性を次のように設定します:style="margin-top:10mm; text-align:right"。
タイトルページに動的なタイトルを追加する
Confluence から任意のページセットをエクスポートする場合、対応するタイトルを表紙（またはタイトル）ページに自動的に追加したいと考えるかもしれません。これは、既定の目次から最上位の項目をタイトルとして使用することによって（若干変則的な方法で）実現できます。この方法の可否は、エクスポートされたページが最上位ページのサブページという構造になっているかによります。すなわち、エクスポートされるページは（最上位の）ページ 1 枚とあとはすべて子ページという構成でなければなりません。表紙ページに表示されるタイトルは、エクスポートに使用される最上位ページによって変わるということになります。
以下の 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; }