03

17

ブログ記事が全部印刷できるようにという依頼に対応しました

2011年03月17日

ブログの記事が1ページ分しか印刷できないという問題があり調べてみた。
使っているテンプレートによって違うようなので、CSSに問題がありそうだ。

このブログのCSSの出力媒体がすべてのデバイス(media="all")になっていて、なおかつ記事を囲んでいるdivセレクタのoverflowプロパティがhiddenになっていることが原因のようだ。
このセレクタはwidthは固定だが、heightは指定してはいないので、ブラウザで見る限りすべての記事は見えている。よって印刷で一部分しか出力されないのはどうも理解できないのだが。

対策として、overflow:hiddenをはずすことを考えたが、このブログの記事に掲載されている画像の中には固定のwidth幅より大きなものがあり、レイアウトが崩れるので断念。
印刷時のスタイルを定義するという方法も試してみたが、どうもうまく作用しないので、下記を参照してjQueryで行うようにしてみた。
http://d.hatena.ne.jp/jyukutyo/20100603/1275644478

上部に印刷ボタンを設置した。クリックすると印刷のダイアログが出る。
ブログのタイトルやナビゲーション、フッターなどは省いて記事だけを(大きな画像もそのまま全部)印刷することができるようになったが、もう一工夫必要かとも思う。
http://saltheads.blog134.fc2.com/

posted by いちご会 at 15:20 | Comment(0) | 覚書