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

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

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

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

1. @page :first

課題: 最初のページをターゲットとする :first 疑似クラスは、Puppeteer ではサポートされません。
解決策: 代わりに body:first-of-type を使用して、最初のページのコンテンツをターゲットにします。

次のコードを

@page :first {
    /* your css here */
}

次のコードで置換

@media print {
    body:first-of-type {
        /* your css here */
    }
}

2. @page の背景画像

課題: @page ルールに直接適用される背景画像はレンダリングされません。
解決策: position: fixed を使用して、背景画像を body または特定のコンテナーに適用します。

次のコードを

  @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 で画像やフォントを使用する場合は、次の手順に従ってアクセスできるようにしてください。

アセットをアップロードする:
- 自分のスペース内の Confluence ページに移動します。整理しやすくするために、"アセット" のような名前を付けた専用ページを作成します。
- このページに画像やフォントファイルをアップロードします。
アセットリンクを取得する:
- アセットがアップロードされたら、ページの [その他のアクション] メニュー (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) にすべきかどうかを確認するために使用される

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

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

この内容はお役に立ちましたか?

正確ではなかった

明確ではなかった

関係なかった

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

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

コミュニティに質問