印刷用CSS

(choco/印刷対応案 より移動)

印刷対応案†

PukiWiki 1.3.xでの印刷対策についての試案

関連†

• dev:PukiWiki/1.4/ちょっと便利に/印刷用表示対応スキン (1.4 向け スキンのみでの印刷対策)
• dev:PukiWiki/1.4/ちょっと便利に/印刷用表示対応スキン2 (1.4 向け スキン + CSS での印刷対策)

第一段階：スキンでの名前付け†

印刷時の対象要素を細かく制御できるようにするために、PukiWikiのページの構成要素にそれぞれ名前をつける。

例えばこのPukiWiki.orgのスキンであれば、

• ヘッダ(header)部分
  • ロゴ画像(header_logo)
  • タイトル(header_title)
  • URL(header_url)
  • メニュー(header_menu)
• 内容(body)部分
  • 左側（Menuと最新の20件があるTD） (body_sub)
  • 右側（ページ本体） (body_main)
• フッタ(footer)部分
  • 添付ファイル(footer_attach)
  • メニューアイコン(footer_menu)
  • 最終更新時間(footer_lastmodified)
  • その他著作権表示など(footer_copyright)

のように分割できる。

具体的にはskinのファイルのそれぞれの要素を囲むように

<div class="header_logo">  ...  </div>

をいれていく。

body_subとbody_mainについてだけは特別で、tdのクラスとして 指定する必要がある（body_subのtdはwidth=120としてあるので、 tdの中身を印刷しないようにしても白い空間になってしまうため、 tdごと印刷対象から外す必要がある）。

第二段階：印刷用CSSの適用†

skinでCSSを指定している場所の、

<link rel="stylesheet" href="skin/default.ja.css" type="text/css" media="screen,print" charset="shift_jis">

の次の行に

<link rel="stylesheet" href="skin/default.print.css" type="text/css" media="print" charset="shift_jis">

を追加する。

第三段階：印刷抑制要素を指定するCSSを作る†

こんな感じで、印刷したくない要素を指定するだけのCSSになる。

div.header_logo {display: none;}
div.header_url {display: none;}
div.header_menu {display: none;}
td.body_sub {display: none;}
div.footer_attach {display: none;}
...

＃ 個人的には今のスキンだとアンカー文字列が印刷時に判別できないので

a:link {text-decoration: underline;}
a:visited {text-decoration: underline;}

＃ も追加しています。

なにが嬉しいか†

私が印刷する時は、極端な話、

• header_title
• body_main
• footer_lastmodified で十分だったりします。Wordで書くより速く、見た目もすっきり。

欠点†

• スキンを構成するファイルのCSSが２つに増えてしまう。
• PukiWikiの画面をそのまま印刷したいと思った時、逆にちょっと面倒。

以下の内容はちょっと古いです

• 印刷に対応するためのスキンとCSS。
  • ３つのファイルを skin/ に置けばOKです
  • default.ja.css と pukiwiki.skin.ja.php は上書きになってしまいますのでバックアップを取っておいてください（ファイル名変えろよ…と自分でも思いますが）

普段の見た目は変わりませんが、印刷した時だけ、Menuなど本体以外の部分の出力が抑制されます。

なんでこんなものをアップしてるのかというのは dev:BugTrack/110 をご覧ください。

• 自分用書き込み追跡リンク
  • dev:BugTrack/57
  • dev:BugTrack/146

質問箱でこの話に答えたものですが、通常の画面構成を印刷する場合と本文のみを印刷する場合の両方に対応したいときは alternate stylesheet の機能を使ってスタイルシートを切り替えてから印刷するしかないように思います。

ただ、そうした場合、IE など標準でスタイルシートを切り替える機能を持っていないブラウザでの扱いが面倒になります。

• reimy 2003-04-09 (WED) 04:48:29

  IE用プラグイン「ス切リボ」を組み込めば、IE5/6でもスタイルシートを切り換えることが可能です。

• choco

  そうなんですけど、共有スペースとしての Wiki を活用するためにわざわざインストールしてもらわなきゃいけないってとこがネックじゃないかと。新たに参加する人が増えるたびに「やってもらわないといけない」わけで。だから正しくは「標準でスタイルシートを切り替える機能を持っていないブラウザへの対応が面倒」ってことですね。実際、自分は最初 alternate stylesheet でやってたんですけど、ここに書かれている方法に変更しました。（自分は Mozilla なんで関係ないんですが。）

  スキンそのものを切り替える機能があれば [印刷バージョン] ボタンをつけて全然違うスキンにしてしまうという方法もあるのですが。

• 名無しさん

  ところで、とてもいい内容なので、もっと分かりやすいページ名に変更しませんか？(^^;

  • 名無しさん 2003-08-19 (TUE) 22:05:09

    「印刷用CSS」とかが分かりやすいですかね。

• 名無しさん 2003-08-28 (THU) 21:35:06

  書いたら、印刷したい。（人間の本能だと思う。）

• >スキンを構成するファイルのCSSが２つに増えてしまう。　@media print を使うとCSSは１つですみます。 -- 2004-12-06 (月) 22:17:32
• 現状は2つあったCSSを一つのphpファイルにまとめてありますので、管理上は１つですが、出力するデータは２つ分出力します。さて、mediaごとの内容を一本にしようというご意見は以前もいただいていますが、いまのところスマートな案が見つかっていません。メンテナンスの手間が増えない、うまい実装ができたらぜひ公開してください :) -- henoheno 2004-12-06 (月) 23:10:30
• CSSを無理に1つにする必要はない気もします。見映えに直結する部分なので、理解しやすく、カスタマイズしやすいことがだいじかも。 -- ありぃ 2004-12-06 (月) 23:27:44
• CSSを1ファイルにする必要が分かりません。　1ファイルにするにしても　@media print{ }を使った方が良いのでは？と思います -- 2006-07-09 (日) 16:12:33

• PukiWikiについて
  • ダウンロード
  • インストール
  • セキュリティ
  • 活用事例
  • 動作実績
  • プラグイン
    • 欲しい...
    • 自作...
  • スキン
    • 自作スキン

• はじめてのPukiWiki
• FAQ
• Q＆A
• Books
• 質問箱
  • 1 2 3 4 5

• PukiWikiを使おう
• 雑談
• メーリングリスト
• 関連ツール
• リンク集
• InterWikiName

• Info in English

• このサイトについて
  • WebTrack
  • Web委員日誌

• お試し
  • PukiWiki 1.5

最新の16件