WordPressサイトのプリンターをすぐに使いやすくする方法

公開: 2017-07-30

あなたのWordPressウェブサイトはプリンターフレンドリーですか？その質問が何になっているのかわからない場合は、そうではないかもしれません…

一部のWordPressテーマ開発者は、プリンターフレンドリーなコンテンツのサポートを組み込んでいますが、ほとんどの場合、そうではありません。つまり、実際に読みやすい方法でコンテンツを印刷できるようにする場合は、自分の手で物事を処理する必要があります。これについては、本日お話しします。

この投稿では、Webサイトのプリンターを使いやすくする理由と、CSSまたはプラグインを使用して独自のWordPressWebサイトのプリンターを使いやすくする方法について学習します。

ウェブサイトをプリンターフレンドリーにするものは何ですか？

あなたのウェブサイトには、人々があなたのサイト全体を簡単に閲覧できるようにする要素がたくさんあります。ナビゲーションメニュー、内部ハイパーリンク、サイドバー…これらはすべて、インターネット上のサイトにアクセスする人々にとって、新しい情報を見つけたり、異なるページ間を移動したりできるので便利です。

しかし、サイトから特定のコンテンツを印刷する場合、それらの要素が邪魔になります。考えてみてください…人々はあなたのナビゲーションメニューをクリックしたり、印刷されたページであなたのサイドバーを操作したりすることはできません。

さらに、Webサイトで使用されているフォントとフォントサイズが、印刷されたページのサイズに変換されない場合があります。

そして最後に、多くの人があなたのコンテンツを白黒で印刷しようとしているので（そしてカラーインクは高価です！）、あなたのプリンターに優しいコンテンツにもっとグレースケールの外観を採用することは常に良い考えです。

そのため、Webサイトをプリンターフレンドリーにするためには、主に次のことが必要です。

通常のページサイズで読みやすくするためのフォント、サイズ、間隔の変更
印刷されたページでは役に立たない広告、ナビゲーション、サイドバーなどの無関係な要素を削除する
黒と白以外の要素を多く使用する場合の色の減衰

では、どうすれば実際にそれを行うことができますか？確認してみましょう…

あなたのウェブサイトをCSSでプリンターフレンドリーにする方法

次のセクションでは、CSSを掘り下げることなく、サイトをプリンターフレンドリーにするのに役立つWordPressプラグインをいくつか紹介します。ただし、サイトのプリンターバージョンの外観を完全に制御したい場合は、実際にメディアセレクターを使用して、ページの印刷バージョンのスタイルを設定できます。

プリンターフレンドリーコンテンツの基本的なCSSビルディングブロックは次のとおりです。

 @media print {
/ *プリンタ固有のスタイルはここにあります* /
}

このメディア宣言に追加するCSSスタイルは、ページの印刷バージョンにのみ影響します。

そこからどこへ行くの？まあ、それの多くはあなたの特定の好みやテーマに依存するので、正確な答えを与えるのは難しいです。

しかし、一般的に、CSSでやりたいことがいくつかあります。

display：noneを使用して、サイドバー、ナビゲーションメニュー、検索フォームなど、印刷されたページで役に立たない要素を削除します。
読みやすいフォントサイズを設定します。 Reed DesignのPointsto Pixelsチャートは、MicrosoftWordやGoogleDocsなどのプリンタに適したプログラムで使い慣れているフォントサイズとピクセルがどのように関連しているかを把握するのに役立ちます。
ほとんどの人は印刷されたページで読みやすいと感じるので、プリンタスタイルにはセリフフォントを使用してください。
特にインクの多い背景色を使用している場合は、色を変更します。ほとんどのブラウザは、多くの状況でデフォルトで白い背景になりますが、問題が発生すると大量のインクが無駄になる可能性があるため、確認することをお勧めします。

上記の4つのことを行うだけで、かなりプリンターフレンドリーなWebサイトがすでにできているはずです。ただし、さらに先に進みたい場合は、より高度な戦術を実装することもできます。たとえば、：afterを使用して、リンクのURLを出力できます。これにより、投稿から不要なメディア（ビデオなど、印刷にはあまり役立ちません）などが削除されます。

プリンターフレンドリーなCSSスタイルの実際のいくつかのより具体的な例が必要な場合は、サンプルページ全体を通過するため、SmashingMagazineからのこの投稿を読むことをお勧めします。

あなたのサイトをプリンターフレンドリーにするためのいくつかのWordPressプラグイン

CSSで手を汚したくない場合は、いつものように、WordPressプラグインに助けを求めることができます。さまざまなオプションがありますが、ここにいくつかの推奨事項があります。

ただし、始める前に、これらのプラグインは、ユーザーが各プラグインによって提供される専用の[この印刷]ボタンをクリックした場合にのみ機能することを伝えたいと思います。ユーザーがブラウザの印刷オプションに直接移動しても、サイトのプリンタスタイルには影響しません。

WP-印刷

WP-Printは、プリンターフレンドリーなWordPressサイトの作成に役立つ人気のある無料のプラグインです。プラグインは、専用の[この印刷]ボタンを追加するだけでなく、ユーザーフレンドリーなインターフェイスも提供します。これは常に、前のCSSセクションで説明した設定の多くをカスタマイズするためのものです。

プリンターフレンドリー

このプラグインがDiviおよびDiviBuilderでどのように機能するかを知りたいと思いました。そこで、私は物事がどのように機能するかを確認するために簡単なテスト投稿を設定しました。テスト投稿のWebバージョンは次のようになります。

そして、その投稿のプリンターフレンドリーバージョンは次のようになります（覚えておいてください-画像の動作をカスタマイズできます-私の例ではデフォルトを使用しています）：

プラグインの特に優れた点の1つは、コンテンツ内リンクの引用が自動的に追加されることです。また、すべてのナビゲーションオプションが削除されます。

「これを印刷」ボタンを追加するには、テーマのテンプレートファイルを快適に掘り下げる必要があることに注意してください。これはほとんどコピーアンドペーストの作業ですが、初心者は少し混乱するかもしれません。

価格：無料| 詳しくは

印刷、PDF、PrintFriendlyによる電子メール

先に進む前に、このプラグインの主な注意点を紹介したいと思います。無料バージョンは広告でサポートされています。理想的ではありません…しかし、プラグイン自体は非常に素晴らしく、広告は特に邪魔になりません。

それが大したことではない場合、またはプロにアップグレードする意思がある場合は、読み続けてください…

PrintFriendlyのWordPressプラグインは、PrintFriendlyサービスをサイトに統合します。これは、WordPressテーマの無関係な部分を取り除くだけでなく、印刷されたページの外観をユーザーがある程度制御できるクールなサービスです。

WP-Printのように、プラグインはあなたに印刷ボタンを与えます。クリックすると、そのボタンをクリックするとライトボックスウィンドウが開きます。これは、ユーザーが印刷バージョンをプレビューしたり、画像やテキストのサイズを調整したりできる場所です。

WP-Printのクールなリンク引用機能はありませんが、訪問者に制御できるので素晴らしいと思います。また、もう1つの優れた点は、読者が投稿をPDFまたは電子メールとして簡単に共有またはダウンロードできることです。

価格：広告サポート付きで無料。プロバージョンは月額$ 4から始まります| 詳しくは

まとめ

あなたの訪問者の大多数があなたのコンテンツをオンラインで消費することは事実ですが、それはあなたがあなたのコンテンツを紙に印刷したい人々を完全に無視するべきであるという意味ではありません。プリンターフレンドリーなウェブサイトを作成することは一度限りのことです。そして、それを配置すると、訪問者は素晴らしい体験をしながら、必要に応じてコンテンツを印刷できます。

さて、あなたに行きましょう– Webサイトからコンテンツを印刷したことはありますか？ ほとんどのWebサイトのプリンター対応バージョンについて、何が好きまたは嫌いですか？

AVIcon / shutterstock.comによる記事のサムネイル画像