ブラウザ表示通りの印刷方法について

2010年7月30日 at 16:57

いつもありがたくconcrete5を使わせていただいております。
ver5.4.0.5を利用してサイト構築を行っております。

印刷についてご質問させていただきます。

concrete5で構築したサイトを印刷しようとすると、レイアウトがバラバラ崩れてしまって、ブラウザに表示されてる通りの印刷ができないのですが、表示通りに印刷するにはどのように設定をしたらよろしいのでしょうか?

concrete5japan様のサイトですと、表示通りに印刷できるようなので、ここでご質問させていただきました。

どなたかご教授いただけましたら幸いです。

よろしくお願いいたします。

Re: ブラウザ表示通りの印刷方法について

2010年7月30日 at 17:43
正直なハナシを言うと、全然印刷のことをあまり考えていませんでしたが、

元々、concrete5 に標準で搭載されているプレーンヨーグルトのテーマに手を加えたものです。

一応、印刷がしやすいように白を貴重としたシンプルなデザインをキープし、横幅を固定させました。



印刷を考えたサイトデザインとしては

・シンプルなデザイン
・concrete5の「レイアウト」を使わない
・背景白で、文字を黒にする
・余計な背景画像を使わない
・背景画像がなくても成り立つページにする
・画像に頼らない
・横幅を800-960pxで固定
・CSS + HTMLをしっかり勉強する

です。


この問題は、 concrete5 の問題ではなく、WEBデザイン全般や他のCMSと変わらずCSSやHTMLの業になります。

テーマはオリジナルでしょうか。それとも既存のものでしょうか?



また、印刷に適したテーマなどを教えていただけませんでしょうか > 他の皆さんへ
 

Re: ブラウザ表示通りの印刷方法について

2013年5月2日 at 7:05
お世話になっております。

わたしも試したところ、同じ症状です。
ブラウザの印刷から、concrete5で作成したサイトを印刷しようとすると、cssを読まない状態のレイアウトが表示されます。
こちらのconcrete5Japanのサイトでも、同じことがおこります。

なぜ、ブラウザでの表示通りにならないのでしょうか?
 

Re: ブラウザ表示通りの印刷方法について

2013年5月2日 at 10:14
当サイトに限って言えば、スタイルシートの media 指定が screen になっており、print が指定されていないので、印刷時にはスタイルシートが読み込まれません。どうしてそうしたのかは、忘れました…。たぶん、印刷時はべろっとテキストだけで表示されたほうが便利だと思ってそうしたと思います。media="print" で印刷用のスタイルシートもちゃんと用意してあげれば、きれいに出るとおもいますが、時間がなくて…
<link rel="stylesheet" media="screen" type="text/css" href="/themes/c5japan2011/main.css" />


ちなみに、すべての場合で同じスタイルシートを使いたい場合は media="all" と書けます
 

Re: ブラウザ表示通りの印刷方法について

2013年5月3日 at 7:38
hissyさん、いつもありがとうございます。

教えていただいたとおりにしましたら、PC上での表示と同じようになりました。
ただ、スライドショーやYouTubeビデオ、スタックを使用している箇所が表示されませんので、
ところどころ、穴があいたようになってしまいます。
これは仕方がないのでしょうか・・。
スクリーンショットをとるか(全体が表示されないので不便なのですが)、印刷後のイメージに画像貼り付けするとか、工夫が必要ですね・・?
 

Re: ブラウザ表示通りの印刷方法について

2013年5月4日 at 10:44
スライドショーやYouTubeなど、Javascriptであとから引っ張ってきているものは出なかったりするかもしれませんね。でも、スタックが表示されないのはおかしいです。どんな内容を表示していますか?
 

Re: ブラウザ表示通りの印刷方法について

2013年5月4日 at 12:20
お世話になります。

表示されないのは、HTMLでメニューを書いたものをスタックに登録して、複数ページのサイドバーに使用している部分です。
 

Re: ブラウザ表示通りの印刷方法について

2013年5月4日 at 13:59
そのスタックはログアウトしても見れますでしょうか?ログアウトして表示されなかったら、スタックの編集画面で承認していない可能性があります

ログアウトして見れるのに印刷で出なかったら、個別のHTMLの書き方の問題だと思います
 

Re: ブラウザ表示通りの印刷方法について

2013年5月4日 at 14:21
ありがとうございます。

<ul class=””>
<li class=””></li>
</ul>
というような、リストのみのhtmlなのですが、cssの指定の仕方が悪いのでしょうか・・
確認してみます。