• 関連ドキュメント
クラウド

その他の 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 with position: 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 レンダリングを実現できます。

代替手段の要約テーブル

サポート対象外

置換後

@page :first

body:first-of-type

@page の背景

背景を body に適用

カスタム CSS での画像とフォントの使用

Confluence エクスポートのカスタム CSS で画像やフォントを使用する場合は、次の手順に従ってアクセスできるようにしてください。

  1. アセットをアップロードする:

    • 自分のスペース内の Confluence ページに移動します。整理しやすくするために、"アセット" のような名前を付けた専用ページを作成します。

    • このページに画像やフォント ファイルをアップロードします。

  2. アセット リンクを取得する:

    • アセットがアップロードされたら、ページの [その他のアクション] メニュー (3 つの点) をクリックします。

    • ドロップダウン メニューから [添付ファイル] を選択します。

    • 添付ファイルのリスト内で、アップロードしたファイルを見つけます。

    • そのファイル名を右クリックし、[リンク先のアドレスをコピー] を選択します。

  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 には表示されません。

 



さらにヘルプが必要ですか?

アトラシアン コミュニティをご利用ください。
コミュニティに質問
このページの内容サポートされていない @page プロパティと代替手段1. @page :first2. @page の背景画像変更の理由代替手段の要約テーブルカスタム CSS での画像とフォントの使用目次のスタイルの制限事項CSS で見出しに番号を付けるPDF エクスポートでサポートされていない CSS 機能コンテンツへの影響
コミュニティ質問、ディスカッション、記事