### [エントリ印刷時のPDFスタイルカスタマイズ](https://wpforms.com/developers/how-to-customize-printing-an-entry/)
**公開日:** 2021年6月11日
**著者:** David Ozokoye
**抜粋:** このチュートリアルでは、エントリを印刷する際の印刷画面のスタイル設定について説明します。
**コンテンツ:**
エントリを印刷する際に、その外観をカスタマイズしたいと思いませんか？ WPForms には、フォームエントリプレビューの基本的なスタイル設定が含まれています。しかし、簡単な PHP スニペットと CSS ルールを使用すれば、印刷前に独自のスタイルを簡単に追加できます。
このチュートリアルでは、WPForms のエントリ PDF プレビューをカスタマイズする方法を説明します。
---
## フォームの作成
まず、[新しいフォームを作成](https://wpforms.com/docs/creating-first-form/)するか、既存のフォームを編集してフォームビルダーにアクセスする必要があります。フォームビルダーで、フォームに必要なフィールドを追加してください。
私たちのフォームはクラス登録フォームであり、特定のクラスへのサインアップリクエストを受け付けるため、**名前**、**メールアドレス**、**ドロップダウン**（クラスを選択するため）、**数値**（クラスにサインアップする人数）、**日付/時刻**（クラスの希望日を選択するため）、および**段落テキスト**のフォームフィールドがあります。
## スタイルシートの作成とアップロード
次に、専用のスタイルシートを作成し、カスタムスタイルをこの **.css** ファイルに追加します。
CSS ルールを作成したら、FTP または FTP タイプ のプラグインを使用してサイトのテーマディレクトリにアップロードします。
**注意:** FTP を使用したファイルのアップロードについてさらにヘルプが必要な場合は、[WPBeginner のチュートリアル](https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/)をご覧ください。
CSS を使用して、ラベル、ユーザーがフィールドに入力した内容、タイトル、エントリの境界線、および本文の背景色を変更します。
```
body {
background-color: #e1f5fe;
}
#print .page-title h1 {
color: #01579b;
}
#print .fields {
border: 15px solid #eee;
}
#print p.field-name {
color: #01579b;
}
#print p.field-value {
color: #0277bd;
}
```
CSS ファイルをアップロードしたら、次のステップで使用するため、このファイルへの URL をコピーする必要があります。
**注意:** URL の見つけ方がわからない場合は、ホスティング会社に問い合わせてください。サポートしてくれます。
## エントリ印刷をカスタマイズするためのコードの追加
これで、最後のステップは、スタイルシートを指すコードスニペットを追加することです。コードスニペットの追加についてヘルプが必要な場合は、[このチュートリアルを参照してください](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "WPForms 用のカスタム PHP または JavaScript の追加方法")。
```
/*
* エントリ印刷時のスタイルを変更する
*
* @link https://wpforms.com/developers/how-to-customize-printing-an-entry/
*/
function print_page_additional_styles() {
// このリンクをスタイルシートに変更してください
$link = 'http://yoursite.com/print-wpforms-entry-stylesheet.css';
//インラインで独自のカスタムスタイルをエコーして、ページの先頭に追加することもできます
echo '';
printf( '', $link );
}
add_action( 'wpforms_pro_admin_entries_printpreview_print_html_head', 'print_page_additional_styles', 10 );
```
これで、エントリを印刷すると、新しいカスタムスタイルが表示されます。
## よくある質問
以下に、WPForms のエントリ印刷プレビューのカスタマイズに関するよくある質問にお答えします。
#### 印刷ビューで余白を増やすにはどうすればよいですか？
このスニペットを使用するだけで、印刷ビューのあらゆるものにパディング、マージン、幅を追加できます。
```
/*
* マージン、パディング、幅で印刷ビューをカスタマイズする
*
* @link https://wpforms.com/developers/how-to-customize-printing-an-entry/
*/
function wpf_customize_print_entry_styles() {
echo '';
}
add_action('wpforms_pro_admin_entries_printpreview_print_html_head', 'wpf_customize_print_entry_styles', 10);
```
これで、エントリを印刷する前に WPForms の印刷プレビューをカスタマイズする方法がわかりました。
次に、Conversational Forms アドオンのスタイルもカスタマイズしたいですか？ [Conversational Forms 用のスタイルシートのエンキュー方法](https://wpforms.com/developers/how-to-enqueue-a-stylesheet-for-conversational-forms/ "Conversational Forms 用のスタイルシートのエンキュー方法") に関するチュートリアルをご覧ください。
**カテゴリ:** チュートリアル
**タグ:** CSS, エントリ, PHP
---