WordPress サイトを印刷できるようにする方法

Web デザイナー、開発者、または Web サイト所有者として、Web サイトのページを印刷する必要があることはほとんどありません。ただし、必要が生じて Web ページをプリンタに送信する必要がある場合は、Web ページが紙の上でも画面上でも同じように表示されることを確認する必要があります。

Web サイトが印刷準備ができていない場合、ページが紙の上でごちゃごちゃに見えるだけでなく、紙に印刷すると低品質になる可能性があります。明らかに、それはあなたやあなたの Web 訪問者が見たいものではありません。すべての Web 訪問者がオンラインで Web コンテンツを読んでいるわけではないことに注意してください。

この投稿では、WordPress Web サイトを印刷対応にして、印刷ページが紙の上で鮮明で整然と表示されるようにする方法について説明します。まず、印刷可能な Web サイトの必要性は何でしょうか?

WordPress ウェブサイトを印刷対応にする理由は何ですか?

インターネットユーザーの大多数がデジタルデバイスを使用して Web サーフィンを行っていることを考慮すると、なぜ Web サイトを印刷できるようにする必要があるのかと疑問に思う人もいるかもしれません。実際のところ、人々があなたの Web サイトのコンテンツをどのように読むかについて推測すべきではありません。実際のところ、Web サイト訪問者の大多数はコンテンツをオンラインで直接読んでいますが、Web ページを印刷する可能性のある少数のユーザーに対応するのは良いことです。また、ウェブサイトを印刷できるようにするのは大した労力ではないことを考えると、そうしない理由はほとんどありません。

一般に、印刷物を含め、コンテンツにアクセスする可能性のあるすべての方法に対応する必要があります。基本的に、Web 訪問者がコンテンツを使用したいと考えているあらゆる用途に備えておく必要があります。たとえば、読者が自分の仕事に関連する投稿を見つけて、それをプレゼンテーションの参照点として使用することにした場合、それを印刷したくなるでしょう。誰がサイトを訪問し、コンテンツをどのように使用するかはわかりません。では、WordPress ブログをデジタル画面と紙の両方で鮮明に表示するにはどうすればよいでしょうか?

印刷対応 WordPress プラグイン

WordPress の修正にはご想像のとおり、常にプラグインが役に立ちます。印刷用に独自の CSS を作成することは強力ですが、テストと発生した問題の修正にさらに時間がかかることは言うまでもなく、少し計画する必要があります。したがって、CSS を書くのに手を汚したくない場合は、その仕事を行うためのプラグインを選択するだけです。ブログのレイアウトの複雑さに応じて使用できるプラグインがいくつかあります。考慮すべき点をいくつか挙げます。

Easy Social Share WordPress プラグイン

CodeCanyon で最も人気のあるプラグインの 1 つである Easy Social Share には、読者がブログを簡単に共有できるようにする優れた機能が満載されています。このプラグインには 20 を超える主要なソーシャルネットワークのサポートが含まれているだけでなく、任意の投稿やページに追加できる便利な印刷オプションも含まれています。また、[印刷] ボタンはすべてのソーシャル共有ボタンに含まれているため、ウェブサイトに印刷オプションをすばやくシームレスに追加できます。

印刷に適した PDF ボタンの無料 WordPress プラグイン

印刷フレンドリーおよび PDF ボタンは、ボタンをクリックするだけで Web ページの印刷版を作成します。その後、ページを PDF として保存したり、紙に印刷したりできます。 20 を超える言語をサポートし、ユーザーの言語設定に合わせて言語を自動的に調整します。このプラグインには他にも多数の機能が付属しており、何よりも無料で (広告付きで) 使用できます。広告なしのバージョンが必要な場合は、サブスクリプションを購入する必要があります。

WP Print 無料の WordPress プラグイン

これは、WordPress ブログを手間をかけずに印刷できるようにするもう 1 つの優れたプラグインです。以前のプラグインほど多くの機能はありませんが、印刷するページ要素を制御するための適切な設定セットが備わっています。 Web ページには 1 つの印刷ボタンが表示され、ユーザーはこれを使用して任意のページの印刷可能なバージョンを生成できます。

印刷用のカスタム CSS

コーディングに慣れている場合は、WordPress ブログを印刷できるようにするときの良い出発点は CSS です。実際、Web サイトを印刷可能にするには、基本的に要素を非表示または表示するための CSS スタイルを記述して、紙上で鮮明に表示できるようにする必要があります。テーマが印刷準備ができていない場合、またはカスタムの印刷スタイルを追加したい場合は、カスタム CSS を追加したり、お気に入りのカスタム CSS プラグインをインストールして有効にしたりできるように、まず子テーマを作成してください。

あとは、カスタム印刷スタイル（CSS）を追加してウェブページを印刷できるようにするだけです。これも簡単です。次のように宣言を作成し、その宣言内にスタイルを記述するだけです。

@media print {
/* your print styles */
}

この宣言は、指定されたスタイルを使用して Web ページの印刷時の外観を制御するメディアクエリです。

2 番目の方法は、すべての印刷スタイルを別の CSS ファイルに入れる方法です。これは、よりクリーンで整理された方法であり、ブログのメンテナンスタスクを実行するときに特に便利です。新しい CSS ファイルを作成し、スタイルを記述します (@media print 宣言から始めることを忘れないでください)。その後、カスタム印刷 CSS ファイルをテーマに読み込みます。スタイルファイルに含めるものはすべてです。あなた次第ですが、基本的には、ブログの印刷版に掲載したいものはすべて含めることになります。

印刷用にスタイルを設定するときの一般的なガイドラインをいくつか示します。

サイドバーなど、印刷版には表示したくない部分がいくつかあります。その場合、display: none を使用してこれらの部分を非表示にするときは、印刷時にページがごちゃごちゃに見えないように、残りのブロックを必ず再編成してください。
デジタル画面に最適な、em またはピクセル単位ではなく、フォントサイズのポイントを使用します。一方、プリンターはポイントに最適です。
ブログの印刷版では全幅を使用する必要があります。デジタルデバイスでは幅のサイズを制限するのは良いことですが、紙に印刷する場合は見栄えが良くありません。
特に非常に活発なブログの場合は、コメントセクションのコンテンツを削除してください。
ナビゲーションとフッターのコンテンツを削除します (これらの要素では単に display: none を使用します)。ほとんどの場合、印刷版で重要なのはページ上のテキストコンテンツだけであるため、印刷用 CSS を作成する際には主に焦点を当てる必要があります。
前の点に加えて、関連するテキストの内容を理解するために絶対に必要な場合を除き、すべての画像を非表示にすることも検討する必要があります。明らかに、他のすべてのインタラクティブメディア要素は紙の上に散らかるだけなので、デフォルトでは非表示にする必要があります。リンクも紙面上では無意味なので削除する必要があります。

WordPress.org には、印刷スタイルシートの素晴らしい例があり、スタイルシートを作成する際の参考として使用できます。こちらをご覧ください。

まとめ

Web サイトを印刷できるようにすることは、Web サイトを構築するときに多くの人が考えることではありません。ただし、Web と印刷物の両方を最初からデザインすることが重要です。それにもかかわらず、これを行わずに行き詰まりを感じた場合、それを修正するのは非常に簡単です。実際、テーマに印刷スタイルを実装するのが非常に簡単であることを考えると、特に上記で推奨されているプラグインのいずれかを使用している場合は、WordPress 初心者であっても、ほとんどの人がこれらの変更を自分で行うことができるはずです。

それで、あなたのブログを印刷できるようにする予定はありますか?すでにこれらの対策を講じている場合、どうでしたか?以下のコメント欄であなたの経験をぜひお聞かせください。