Confluence Cloud を検討中ですか?
Confluence Cloudの概要とプランごとに利用可能な機能をご確認ください。
PDF エクスポートの高度なカスタマイズ
2023 年第 2 四半期、Confluence ページをより正確にレンダリングする PDF エクスポートのアップデートをリリースしました。ただし、このアップデートはこのページで説明されているカスタマイズをサポートしていません。これらのカスタマイズが検出された場合、Confluence ページを正確にレンダリングしない古い PDF エクスポート方法にフォールバックされます。
今後のアップデートについては、エクスポート機能の進捗状況をご覧ください。
このページでは、PDF エクスポートの「詳細な」カスタマイズに関する情報を提供します。これによって「PDF へのエクスポートをカスタマイズする」に記載された通常のカスタマイズが拡張されます。
次の情報は高度なユーザー向けのものです。以降で説明する高度なカスタマイズは、Confluence、CSS、HTML の一部の知識を必要とすることにご注意ください。Atlassian はカスタマイズをサポートしていないため、サポート エンジニアはこうした変更をサポートできません。
ヘッダーとフッター
単一ページのエクスポートにヘッダーとフッターを追加する
単一ページのエクスポートでは PDF エクスポート ページからの HTML ヘッダーとフッターの追加はサポート対象外ですが、([スペース設定] > ルック & フィール カードの [PDF エクスポート] の順に移動した先にある) PDF スタイルシート フィールドで、CSS ルールによって単一ページのエクスポート用にヘッダーやフッターを作成できます。
カスタム ヘッダーを作成するには、@page ルールに含まれる次のルールのいずれかを定義します: @top-left、@top-center,、@top-right。このルールを使用すると、ページのヘッダー領域の左側と中央、右側に表示する content をそれぞれ定義できます。
カスタム フッターについては、@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 */
}メモ:
font-family プロパティと font-size プロパティにより、初期設定の CSS ルールに基づいて、ヘッダーとフッターのテキストが本文と同じ初期設定のフォント スタイルでレンダリングされるようになります。
単一ページのエクスポートで、（Confluence インスタンス内の添付ファイルとして保存されている）画像をヘッダーとフッターに挿入するために、この方法を使用することはできません。
ヘッダーとフッターに画像を追加する
ヘッダーまたはフッターに画像を挿入するには [PDF レイアウト] の [ヘッダーまたはフッター] フィールドに HTML を追加します。
次の例では、src 属性を持つ HTML img 要素を使用して、ヘッダーの左側に画像を追加します。src 属性は Confluence ページに添付された画像を指します。image 要素は、通常 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 番号です。
次の手順にしたがって、ページに画像を含めます。
画像を Confluence ページに添付します。
そのページの添付ファイル一覧を表示し、画像を右クリックして、その場所をコピーします。
上記のように、適切な src="" 属性へのリンクを PDF スタイルシートに貼り付けます。
画像の URL の /download/... の前に来る最初の部分を除去し、相対 URL になるように編集します。
メモ:
この例では、style 属性のインライン CSS プロパティである margin-top を使用して、画像がページの上部から 10mm 離れるように設定しています。この設定は、ヘッダーの画像がページ上部に接したり、はみ出たりするほど大きい場合に便利です。
同様に、フッターでは、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 から任意のページセットをエクスポートする場合、対応するタイトルを表紙（またはタイトル）ページに自動的に追加したいと考えるかもしれません。これは、既定の目次から最上位の項目をタイトルとして使用することによって（若干変則的な方法で）実現できます。この方法の可否は、エクスポートされたページが最上位ページのサブページという構造になっているかによります。すなわち、エクスポートされるページは（最上位の）ページ 1 枚とあとはすべて子ページという構成でなければなりません。表紙ページに表示されるタイトルは、エクスポートに使用される最上位ページによって変わるということになります。
以下の CSS では、表紙のタイトルとして使用するために最上位の目次を移動して、スタイル設定し、通常この目次項目に関連付けられるリーダーとページ番号をオフにしています。
CSS - PDF スタイルシート
1
.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; }
この内容はお役に立ちましたか?