Firefox でココログを印刷しようとすると本文が１ページ目しか表示されない

これはココログのテンプレートで使っている CSS が overflow:hidden を設定しているためです。これがわかるまでは、page-break (改ページ)まわりの設定や自作スクリプトがはく HTML のコードが悪いのかとかなり悩みました。

《檜山正幸のキマイラ飼育記：[日常]長文記事を読んでもらいたい人は印刷向けスタイルシート設定した方がいいよ》を読んでプリンタまわりの設定をしようとしたところ、上記不具合に気付きました。

CSS がエディットできるなら、例えば次を足せば良いはずです。

@media print {
    #calender, #left, #right, div.comment-form {display:none;} 
    
    #container {margin: 0 0 0 0; width:100%; border:0;}
    #center {margin: 0 0 0 0; width:100%; overflow:visible;}
    .content {margin: 0 0 0 0; /* padding: 0 0 0 0; */ }
}

ちなみに display:none はサイドバー等を表示しないようにするために付けています。必要に応じて修正してください。

2006-03-28 のココログのバージョンアップで、ココログプロでないユーザーも CSS が一部使えるようになっているそうなので、できることならば、サイト管理者が対応するべきでしょう。ユーザーが管理者に訴るべきと言いたいです。

ところが、現在 2010-05-23 ですが、2006-3-27 にはこの記事を出していたにもかかわらず、直っていないサイトが普通のままのようです。

そこで、Firefox ということですし、ユーザー側で CSS をいじってしまうことを勧めてもいいだろうと考えました。その方法を紹介します。

Firefox でユーザー側で CSS をいじるといえば、まず、Stylish というアドオンが思い浮かびます。しかし、この方法はうまく行きません。なぜなら、 CSS 内の @-moz-document 要素の中では、@media が使えないらしいからです。

そこで、Greasemonkey を使って、ユーザー側で javascript を実行して CSS を書き換えることにします。GM_addStyle を使って上記の文字列を足すと……私のところではうまくいきました。

以下にそのユーザースクリプトへのリンクを置いておきます。Greasemonkey のアドオンをインスールしてから、以下をクリックして下さい。サイトとして、 "cocolog-nifty.com" ドメインだけ指定してあります。ココログは cocolog-nifty.com 以外にもありますし、すでに対応しているサイトもあるはずです。それを足したり引いたりするのはユーザーでもできますので、いろいろ試してみてください。

  ●cocolog_print_fix.user.js
    
■参考
  ●《Software Salariman: CSS @media for Firefox Stylish Add-in》。
  ●《asamuzaK.jp : FirefoxのuserContent.css》。@import にもメディアタイプを指定できるらしいので、Stylish でもそれを使えば同等のことができるのかもしれません。それを試す方は、このリンクが参考になるかも。
    
更新：2006-03-27,2010-05-23
初公開：2006年03月27日 02:07:16
最新版：2010年05月28日 21:13:18


Comments:

[E:pen] 更新：主に「ところが」以降を足し、Greasemonkey スクリプトを公開した。とはいえ、このスクリプトは今日作ったばかりでテスト不十分。私にとってはいつものことだけど…。
投稿: JRF | 2010-05-23 23:12:40 (JST)

[E:happy02] 更新：asamuzaK.jp の方法を見つけ、リンクを足す。そんな方法があったんだと驚く。Greasemonkey は使えないが、userContent.css なら使えるというところもひょっとするとあるかもしれないので、リンクしておいた。
投稿: JRF | 2010-05-28 21:18:30 (JST)

トラックバックいただいたものです。

> @import にもメディアタイプを指定できるらしいので、Stylish でもそれを使えば同等のことができるのかもしれません

Stylishはデータベースとして内容を保持しているようですので、@importを使うのは無理なような気がしますけど。
ちゃんと検証したわけじゃありませんが。

投稿: asamuzak.jp | 2010-07-31 18:03:06 (JST)

[E:bearing] 上を書いた段階では、Stylish がどこにファイルを保存しているのか知りませんでした。探したがそれらしいファイルが見あたらなかったのです。データベースになっていたのですね。@import url("file:...") print; …とかも試してみましたが、確かにできません。

Firefox は chrome 周りで裏ワザがあるので、知識のない私にはひょっとすると何かあるのではないかという疑いは残りますが、今の私は asamuzak.jp 様と同じ結論です。

ともあれ、貴重な情報・コメントをいただきました。ありがとうございます。

投稿: JRF | 2010-07-31 19:16:48 (JST)

[E:bearing] 更新：cocolog_print_fix.user.js のバージョン 0.02 にする。Firefox 4 でエラーが出るのを修正。

投稿: JRF | 2011-05-11 01:13:47 (JST)

[E:noodle] 更新：cocolog_print_fix.user.js をバージョン 0.03 にする。Firefox 17 から Greasemonkey に E4X が使えなくなったらしく(参：[cocolog:74918848])、それに対応した。

投稿: JRF | 2012-12-12 17:57:27 (JST)

Links:

檜山正幸のキマイラ飼育記：[日常]長文記事を読んでもらいたい人は印刷向けスタイルシート設定した方がいいよ: http://d.hatena.ne.jp/m-hiyama/20060320/1142815498 (hbm)
cocolog_print_fix.user.js: http://jrf.cocolog-nifty.com/archive/cocolog_print_fix.user.js
Software Salariman: CSS @media for Firefox Stylish Add-in: http://softwaresalariman.blogspot.com/2009/05/css-media-for-firefox-stylish-add-in.html (hbm)
asamuzaK.jp : FirefoxのuserContent.css: http://asamuzak.jp/html/ua/126 (hbm)
asamuzak.jp: http://asamuzak.jp