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

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

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

ヘッダーとフッター

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

単一ページのエクスポートでは PDF エクスポート ページからの HTML ヘッダーとフッターの追加はサポート対象外ですが、([スペース設定] > ルック & フィール カードの [PDF エクスポート] の順に移動した先にある) PDF スタイルシート フィールドで、CSS ルールによって単一ページのエクスポート用にヘッダーやフッターを作成できます。

カスタム ヘッダーを作成するには、@page ルールに含まれる次のルールをいずれか定義します: @top-left@top-center@top-right。これらのルールによって、ページのヘッダー領域の左側、中央、右側に表示するコンテンツを定義できます。

フッターをカスタマイズするには、@pageルール内の @bottom-left@bottom-center@bottom-right ルールを定義します。

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

CSS - PDF スタイルシート

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 @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 */ }

メモ:

  • フォントファミリープロパティとフォントサイズ プロパティの設定によって、既定の CSS ルールに基づき、ヘッダーとフッターのテキストは本文に使用したのと同じ既定のフォントスタイルで表示されるようになります。

  • 単一ページのエクスポートで、(Confluence インスタンス内の添付ファイルとして保存されている)画像をヘッダーとフッターに挿入するために、この方法を使用することはできません。

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

ヘッダーまたはフッターに画像を挿入するには [PDF レイアウト] の [ヘッダーまたはフッター] フィールドに HTML を追加します。  

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

HTML - PDF レイアウト: ヘッダー

1 2 3 <div style="margin-top: 10.0mm;"> <img src="https://ja.confluence.atlassian.com/download/attachments/12346/header-image.png" /> </div>

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

 

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

  1. 画像を Confluence ページに添付します。

  2. そのページの添付ファイル一覧を表示し、画像を右クリックして、その場所をコピーします。

  3. 上記のように、PDF スタイルシートの適切な src="" 属性にリンクを貼り付けます。

  4. 画像の URL の /download/... の前に来る最初の部分を除去し、相対 URL になるように編集します。

メモ:

  • この例では、インライン CSS プロパティの style 属性からマージントップを使用して、画像がページの最上部から 10 ミリ離れるように設定しています。この設定は、ヘッダーの画像がページ上部に接したり、はみ出たりするほど大きい場合に便利です。

  • 同様に、フッターでは、マージンボトム:XXmm プロパティを使用して、画像がページ下部から「XX」ミリ離れるように設定できます。

  • 非常に大きな画像は、ページの本文にはみ出したり、ヘッダーまたはフッター内で使用されるテキストや他の要素の位置を変更したりする可能性があります。そのような場合、画像のサイズを小さくしてから、もう一度 Confluence ページに添付し直すことをお勧めします。画像のサイズを変えずに、かわりに下のコンテンツを移動したい場合は、@page CSS ルールのマージントップ プロパティを設定します。

  • 初期設定では、ヘッダーまたはフッターの画像はページの左側に揃えられます。ただし、style 属性に text-align:center または text-align:right の各プロパティのいずれかを追加することで、この画像をページの中央または右側に揃えられます。たとえば、ヘッダー画像をページの右側に揃えるには、style 属性を style="margin-top:10mm; text-align:right" のように設定します。

 

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

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

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

CSS - PDF スタイルシート

1 .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; }

 

その他のヘルプ