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

Confluence is getting a fresh new look and navigation

We’re in the process of rolling out these changes and the documentation may not match your experience. Bear with us while we update it to reflect the new changes. More about navigating the new Confluence

その他の 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('https://your-confluence-instance.atlassian.net/wiki/download/attachments/SPACE_ID/background.png'); background-size: cover; background-repeat: no-repeat; }
次のコードで置換
@media print { body { background-image: url('https://your-confluence-instance.atlassian.net/wiki/download/attachments/SPACE_ID/background.png'); 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 機能コンテンツへの影響
コミュニティ質問、ディスカッション、記事