写真表示ページで印刷もできるようにしたい

質問

jQueryを使って写真ギャラリーのページを作成しており、好みの小さい写真をクリックすると同じページ内に大きな写真（webページで表示出来る程度のサイズ）を表示するというページを作っています。
そのクリックされた写真を同ページ内にある写真を印刷というボタンを押すと写真印刷用の@media printが呼び出され、写真以外の情報は表示しないようにしたいのです。
プレビューを見ると<p>や<h1>タグなどのテキスト情報はdisplay:noneでは消えないようです。
また、ページのタイトル、日付、ページのURL、ページの枚数情報なども表示されてしまうようなのですが、これらを表示せずに、画像のみを印刷できるようにする方法はありませんか？

回答No.3

ORUKA1951

No.2です。重要なポイントを忘れてました。
　印刷を想定する場合、ブラウザとHTMLの組み合わせで印刷するときちんと設定しないと、画質が荒くなってしまいます。
　もっとも良いのは、印刷に関してはユーザーに任せることです。すなわち、「画像を右クリックして保存した後で、任意の画像ソフトで印刷してください。」とメッセージを書いておくことです。あなたの通常、ネット上の画像を印刷される場合は、そうされているはずです。
　なぜなら、Windowsでは画像をいったん96dpiで描画したのち、実際の解像度が高い場合はそれを適当に？埋めて描画ないし、印刷するためプリンターの解像度(最低でも200dpi,高画質で1200dpi)とは程遠いからです。
　別途「印刷用HTML」を別ウィンドウで開かせるなら、そのHTMLにおいて実際の解像度の数分の一程度のサイズで描画させるようスタイルシートを記述できますから、その対策が多少とも取れます。(もちろん完璧ではありません)
　すなわち、実際の画像が横巾1,200pxなら、HTMLないしスタイルシートでwidth="300"、img{display:block;width:300px;height:auto;}とする必要があるということです。

回答No.2

ORUKA1951

jQueryなどを使わず、まっとうにスタイルシートだけで実装し、media=print用のスタイルシートを用意する本来の方法で良いと思います。
　「画像だけ」と言う部分がいまひとつ判断できないのですが、もしそれが選択した一枚の画像だけでしたら、その画像をひとつだけ含むページを作成して別ウィンドウで開くのが色々な問題を考えると良いでしょう。スタイルシートでも可能ですが、ちょっと複雑になりすぎる感がします。
　一方、ページ全体の写真だけを印刷するのでしたら、page-break-afterプロパティなどを使って、利用者にページ指定をしてもらうとかもあるでしょう。

　また、
・拡大表示された画像を右クリックして表示されるコンテキストメニューからか「画像だけを表示」を選択して画像を表示させて印刷してもらう
　↑これが本来の方法です。率直でわかりやすい
・コンテキストメニューに「画像を印刷」を追加する。--ブラウザ依存です。またユーザーがコンテキストメニューの変更を拒否している場合は無効です。
　など様々な方法があるでしょう。

<div id="album">
　<h2>アルバム</h2>
　<ul>
　　<li><img src="">
　　　<ol>
　　　　<li>撮影情報</li>
　　　　<li><img><!-- 拡大写真 --></li>
　　　</ol>
　　</li>
　　<li><img src="">
　　　<ol>
　　　　<li>撮影情報</li>
　　　　<li><img><!-- 拡大写真 --></li>
　　　</ol>
　　</li>
　　<li><img src="">
　　　<ol>
　　　　<li>撮影情報</li>
　　　　<li><img><!-- 拡大写真 --></li>
　　　</ol>
　　</li>
　</ul>
</div>
@media screen{
#album ul li ol li+li{display:none;}
#album ul li:active ol li+li img{display:block;position:absolute;top:100px;left:100px;}
}
@media print{
#album *{color:transparent;}
#album ul li ol li+li img{display:block;position:absolute;top:100px;left:100px;}
}

回答No.1

tracer

印刷機能の実装は、各ブラウザでかなりの差があります。完全にコントロールしたいのであれば、jQureyでブラウザ判別して、地道にブラウザ毎の対応を実装することになると思います。一番手っ取り早いのは、印刷用のCSSに頼らず、そのまま印刷できるページに誘導することだと思います。