PrintFriendly

読者が実際に使う印刷、PDF、メール送信ボタン。

以下で設定をカスタマイズし、スニペットをサイトに貼り付ければ完了です。

はじめに

ステップ1

サイトに追加したいボタンを選択してください

ステップ2

画像設定を行う

ヘッダー画像

印刷用ページの上部に表示したい画像を選択してください。ウェブサイトのアイコンを選択すると、サイトのファビコンが使用されます。または、画像をアップロードすることもできます。

ページに画像を表示する

印刷用ページおよびPDFページに画像を表示するかどうかを選択してください。

画像の位置

このオプションを使用すると、印刷用ページ上で画像をどのように配置するかを選択できます。

ステップ3

カスタムCSS （任意）

コンテンツのスタイルをカスタマイズしたり、印刷やPDF出力時に要素を非表示にしたりするには、カスタムCSSを使用できます。

CSSファイルを使用する

「カスタムCSS」の入力欄にCSSファイルのURLを入力し、生成されたボタンコードを使用してください。

printfriendly-css タグを使用する

ページに「printfriendly-css」タグを追加し、その中にCSSとボタンコードを記述することができます。

<printfriendly-css style="display: none;">
  h4 {
    font-size: 24px !important;
  }
</printfriendly-css>
カスタマイズ例▾

注:CSSの適用範囲を #printfriendly に限定し、!important を追加して、デフォルトのスタイルを上書きしてください

印刷／PDFの余白をカスタマイズする

@media print {
  @page {
    margin: 5mm !important;
  }
}

URLを非表示にする

#printfriendly #pf-src {
  display: none !important;
}

タイトルを非表示にする

#printfriendly #pf-title {
  display: none !important;
}

Google Fonts を使用する

/* Use the Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

#printfriendly {
  font-family: 'Inter', sans-serif !important;
}

横向きで印刷／PDF

@media print {
  @page {
    size: landscape !important;
  }
}

ステップ4

PrintFriendlyの機能を設定する

メールでページを共有できるようにする

このオプションを有効にすると、PrintFriendlyウィンドウに「メール」ボタンが表示されます。ユーザーがページのURLを他のユーザーにメールで送信できるようにするかどうかを選択してください。

PDFのダウンロードを許可する

このオプションを有効にすると、PrintFriendlyのウィンドウに「PDF」ボタンが表示されます。ユーザーが印刷用ページをPDF形式でエクスポートできるようにするかどうかを選択してください。

ユーザーがウェブページの印刷用バージョンを作成できるようにします。

このオプションを有効にすると、PrintFriendlyウィンドウに「印刷」ボタンが表示されます。ユーザーにウェブページの印刷用バージョンを作成させるかどうかを選択してください。

ユーザーが印刷用ページからコンテンツを削除できるようにします。

このオプションを使用すると、ユーザーは印刷用ページからコンテンツを削除してから、そのページを印刷またはPDF化することができます。実際のウェブサイト上のコンテンツを削除することはできません。

Pro版限定機能

画像をBase64でエンコードします。

サイトが一般公開されていない場合、プロバイダが第三者（例：Zendesk）からの画像リクエストをブロックしている場合、またはPDFに画像が含まれていない場合は、この機能を有効にしてください。

表示されていないコンテンツを含める

デフォルトでは、PrintFriendly Proはページ上の表示されているコンテンツのみを表示します。非表示のコンテンツ（例：非表示のタブ内のコンテンツ）も表示させたい場合は、この機能を有効にしてください。

ステップ5

PrintFriendlyの印刷ボタンを表示させたい場所に、このコードを挿入してください。

<printfriendly-options style="display:none;" data-content-features="disableClickToDel=0;hideImages=0;imageDisplayStyle=block;disablePDF=0;disableEmail=0;disablePrint=0;encodeImages=0;showHiddenContent=0;"></printfriendly-options><script>var pfBtVersion='3';(function(){var js,pf;pf=document.createElement('script');pf.type='text/javascript';pf.src='//www.printfriendly.com/printfriendly.js';document.getElementsByTagName('head')[0].appendChild(pf);})();</script><a href="https://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="PrintFriendly and PDF"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="//cdn.printfriendly.com/buttons/new/three-icons-light.svg" alt="PrintFriendly and PDF"/></a>

PrintFriendly Proを入手する

PrintFriendly ProはGDPRに準拠しており、さらに多くの優れた機能を備えています。今すぐご自身のドメイン用に購入しましょう。

「Print Button Pro」を入手する