その他の PDF エクスポート設定
Note on @page
Rules in Puppeteer PDF Generation
ブラウザーのレンダリング標準が強化されたため、特定の @page
プロパティは異なる外観にレンダリングされる場合があります。最新のブラウザーとの互換性を確保するには、既存の CSS の調整が必要になる可能性があります。PDF 生成時の最良の結果と互換性については、以下のガイドで、サポートされているプロパティとベストプラクティスをご確認ください。
サポートされていない @page
プロパティと代替手段
1. @page :first
Issue: The
:first
pseudo-class for targeting the first page is not supported in Puppeteer.Solution: Use
body:first-of-type
instead to target the content on the first page.
次のコードを
@page :first {
/* your css here */
}
次のコードで置換
@media print {
body:first-of-type {
/* your css here */
}
}
2. Background Images in @page
Issue: Background images applied directly to the
@page
rule are not rendered.Solution: Apply background images to
body
or a specific container withposition: fixed
.
次のコードを
@page {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
次のコードで置換
@media print {
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
}
変更の理由
Puppeteer は Chromium のレンダリング エンジンを使用しています。このレンダリング エンジンは、@page
のような旧式または印刷固有の CSS ルールよりも、最新の画面ベースの CSS 標準を優先します。@media print
を最新の CSS で使用することで、ブラウザと Puppeteer 間の互換性を確保し、一貫性のある PDF レンダリングを実現できます。
代替手段の要約テーブル
サポート対象外 | 置換後 |
---|---|
|
|
| 背景を |
カスタム CSS での画像とフォントの使用
Confluence エクスポートのカスタム CSS で画像やフォントを使用する場合は、次の手順に従ってアクセスできるようにしてください。
アセットをアップロードする:
自分のスペース内の Confluence ページに移動します。整理しやすくするために、"アセット" のような名前を付けた専用ページを作成します。
このページに画像やフォント ファイルをアップロードします。
アセット リンクを取得する:
アセットがアップロードされたら、ページの [その他のアクション] メニュー (3 つの点) をクリックします。
ドロップダウン メニューから [添付ファイル] を選択します。
添付ファイルのリスト内で、アップロードしたファイルを見つけます。
そのファイル名を右クリックし、[リンク先のアドレスをコピー] を選択します。
CSS でリンクを使用する:
コピーしたリンクを画像やフォントが必要な CSS ファイルに貼り付けます。次に例を示します。
@font-face { font-family: 'CustomFont'; src: url('https://your-confluence-instance.atlassian.net/wiki/download/attachments/SPACE_ID/filename.ttf'); } body, h1, h2, h3, h4, h5, h6, p, a, li, span, div { font-family: 'CustomFont' !important; } body { background-image: url('https://your-confluence-instance.atlassian.net/wiki/download/attachments/SPACE_ID/background.png'); }
注意: アセットが含まれているページに Confluence コンテンツの対象ユーザーがアクセスできることを確認してください。アセット ページでの権限は公開範囲に影響します。
目次のスタイルの制限事項
PDF V2 に移行するにあたり、目次 (TOC) のスタイルの実装には現在制限があることに注意してください。以前は利用できたその他の CSS プロパティは、現在のところ PDF v2 では想定どおりに機能しません。
現在サポートされている TOC プロパティ:
margin: Overall margin
margin-top: Top margin
margin-bottom: Bottom margin
margin-left: Left margin
margin-right: Right margin
size
: ページ サイズdisplay
: 目次を無効 (none
) にすべきかどうかを確認するために使用される
次のような目次のプロパティを変更する場合は、必ず次のセレクターを使用してください。
div.toc-macro {
display: none;
/*other supported properties...*/
}
現時点では、カスタム HTML を目次に追加することはできません。
CSS で見出しに番号を付ける
Confluence のエクスポートの見出しに自動的に番号を付けたい場合は、次の CSS を使用してください。
body { counter-reset: heading1_counter; }
h1 {
counter-reset: heading2_counter;
}
h2 {
counter-reset: heading3_counter;
}
h3 {
counter-reset: heading4_counter;
}
h4 {
counter-reset: heading5_counter;
}
h1:before {
counter-increment: heading1_counter;
content: counter(heading1_counter) ". ";
}
h2:before {
counter-increment: heading2_counter;
content: counter(heading1_counter) "." counter(heading2_counter) ". ";
}
h3:before {
counter-increment: heading3_counter;
content: counter(heading1_counter) "." counter(heading2_counter) "." counter(heading3_counter) ". ";
}
h4:before {
counter-increment: heading4_counter;
content: counter(heading1_counter) "." counter(heading2_counter) "." counter(heading3_counter) "." counter(heading4_counter) ". ";
}
h5:before {
counter-increment: heading5_counter;
content: counter(heading1_counter) "." counter(heading2_counter) "." counter(heading3_counter) "." counter(heading4_counter) "." counter(heading5_counter) ". ";
}
これにより、見出しに階層形式 (1.
、1.1.
、1.1.1.
など) で自動的に番号が付けられるため、構造と読みやすさが向上します。
PDF エクスポートでサポートされていない CSS 機能
新しい PDF エクスポート システム (PDF v2) を使用する場合、最新のブラウザーの制限により、特定の高度な CSS 機能がサポートされなくなりました。具体的には、以前は PDF のフォーマットを強化するために (目次へのページ番号の追加など) に使用されていた target-counter()
や leader()
などの CSS プロパティは、現在のブラウザー技術ではサポートされていません。
コンテンツへの影響
カスタム CSS に次のようなルールが含まれている場合:
div.toc a::after {
content: leader('.') target-counter(attr(href), page);
}
これらのルールは、新しい PDF エクスポート システムでは機能しません。その結果、目次の自動ページ番号付けや、見出しとページ番号をつなぐリーダー (点線) などの機能は、エクスポートされた PDF には表示されません。
この内容はお役に立ちましたか?