PDF エクスポートの高度なカスタマイズ
This page provides information about 'advanced' PDF export customizations. These expand upon the regular customizations described in Customize exports to 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 Settings > PDF export in the Look and feel card) to produce headers and/or footers for a single page export.
カスタム ヘッダーを作成するには、@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 レイアウト] の [ヘッダーまたはフッター] フィールドに HTML を追加します。
次の例では、src 属性を持つ HTML img 要素を使用して、ヘッダーの左側に画像を追加します。src 属性は Confluence ページに添付された画像を指します。image 要素は、通常 div 要素のコンテナ内に配置されます。
HTML － PDF レイアウト: ヘッダー
<div style="width: 100%; text-align: right; margin-left: 0.5in; font-size: 10px; height: 20px; overflow: hidden;">
<img src="https://ja.confluence.atlassian.com/download/attachments/12346/header-image.png" style="height: 50px;" />
</div>上の例では、ヘッダーに「header-image.png」という画像が含まれています。src 属性の「12346」は、画像が添付されているページの ID 番号です。
次の手順に従って、ページまたはリアルタイム文書に画像を含めます。
画像を Confluence ページまたはリアルタイム文書に添付します。
そのページまたは文書の添付ファイル一覧を表示し、画像を右クリックして、その場所をコピーします。
上記のように、適切な
src=""属性へのリンクを PDF スタイルシートに貼り付けます。画像の URL の
/download/...の前に来る最初の部分を除去し、相対 URL になるように編集します。
メモ:
この例では、
style属性のインライン CSS プロパティであるmargin-topを使用して、画像がページの上部から 10mm 離れるように設定しています。この設定は、ヘッダーの画像がページ上部に接したり、はみ出たりするほど大きい場合に便利です。同様に、フッターでは、
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 では、表紙のタイトルとして使用するために最上位の目次を移動して、スタイル設定し、通常この目次項目に関連付けられるリーダーとページ番号をオフにしています。
CSS - PDF スタイルシート
.fsTitlePage {
position: relative;
left: 0px;
}
/* Turn off the default section numbering for this TOC item */
.toclvl0:before {
content: "";
counter-reset: chapter 0; /* Ensure there's a parent element with a counter for this to work */
}
/* 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;
}この内容はお役に立ちましたか?