MODX Evolution CMS上にCSSリソースを作ってWebページの印刷範囲を指定

MODX Evolution CMSのリソースを使ってCSSを作ることができます。印刷用のCSSを別に作っておき、プリンターには自動的に印刷用CSSのデータが送られるようにすると便利です。

1. 印刷用CSSを作成

ウェブサイトのCSSから印刷範囲に関わるスタイルだけコピー&ペーストして印刷用CSSを作成します。

ここでは、MODX Evolution CMSのリソースで印刷用CSSを作成する場合を例示します。リソース名、エイリアスをprint.css(半角英数字.cssなら何でもOK)と設定していったん保存します。再度リソースを開き、ウェブサイトのCSSから印刷用CSSリソースの本文に印刷範囲に関わるスタイルだけコピー&ペーストします。

印刷用CSSへのリンク

印刷しない領域(以下、非印刷領域)のID、クラスに非表示属性 {display: none;} を追加します。

非印刷領域に特にIDもクラスもない場合は非印刷領域のクラスを作成します。上図では、最終行にある .non-printable が非印刷領域のクラスです。

2. テンプレートに印刷用CSSへのリンクを追加

テンプレートを開いて、<head></head>内に、印刷用CSS(print.css)へのリンクを記述します。

<link rel="stylesheet" type="text/css" href="print.css" media="print">
印刷用CSSへのリンク

必要に応じて非印刷領域用のクラスを設定します。

コメントを投稿

0 コメント