その他の PDF エクスポート設定

Puppeteer の PDF 生成における @page ルールに関する注意事項

ブラウザーのレンダリング標準が強化されたため、特定の @page プロパティは異なる外観にレンダリングされる場合があります。最新のブラウザーとの互換性を確保するには、既存の CSS の調整が必要になる可能性があります。PDF 生成時の最良の結果と互換性については、以下のガイドで、サポートされているプロパティとベストプラクティスをご確認ください。


サポートされていない @page プロパティと代替手段

1. @page :first

  • 課題: 最初のページをターゲットとする :first 疑似クラスは、Puppeteer ではサポートされません。

  • 解決策: 代わりに body:first-of-type を使用して、最初のページのコンテンツをターゲットにします。

次のコードを
1 2 3 @page :first { /* your css here */ }
次のコードで置換
1 2 3 4 5 @media print { body:first-of-type { /* your css here */ } }

2. @page の背景画像

  • 課題: @page ルールに直接適用される背景画像はレンダリングされません。

  • 解決策: position: fixed を使用して、背景画像を body または特定のコンテナーに適用します。

次のコードを
1 2 3 4 5 @page { background-image: url('background.jpg'); background-size: cover; background-repeat: no-repeat; }
次のコードで置換
1 2 3 4 5 6 7 @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 ファイルに貼り付けます。次に例を示します。

      1 2 3 4 5 6 7 8 9 10 11 @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) にすべきかどうかを確認するために使用される

次のような目次のプロパティを変更する場合は、必ず次のセレクターを使用してください。

1 2 3 4 div.toc-macro { display: none; /*other supported properties...*/ }

現時点では、カスタム HTML を目次に追加することはできません。


CSS で見出しに番号を付ける

Confluence のエクスポートの見出しに自動的に番号を付けたい場合は、次の CSS を使用してください。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 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 に次のようなルールが含まれている場合:

1 2 3 div.toc a::after { content: leader('.') target-counter(attr(href), page); }

これらのルールは、新しい PDF エクスポート システムでは機能しません。その結果、目次の自動ページ番号付けや、見出しとページ番号をつなぐリーダー (点線) などの機能は、エクスポートされた PDF には表示されません。

 



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

アトラシアン コミュニティをご利用ください。