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

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

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

ヘッダーとフッター

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

Single page exports don't support adding HTML headers and footers via the PDF export page, but you can use CSS rules in the PDF stylesheet field (found within Space SettingsPDF export in the Look and feel card) to produce headers and/or footers for a single page export.

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, center and right-hand side of your page's header area, respectively.

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

For example, the following rules add a document title at the center of the header and a page number at the center of the footer:

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 インスタンス内の添付ファイルとして保存されている)画像をヘッダーとフッターに挿入するために、この方法を使用することはできません。

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

To insert an image into the header or footer, add HTML to the Header or Footer fields of the PDF Layout.  

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

HTML - PDF Layout: Header
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 ルールのマージントップ プロパティを設定します。

  • 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 center 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".

 

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

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

 

最終更新日 2021年10月11日)
次でキャッシュ 3:49 PM on Oct 16, 2021 |

その他のヘルプ