つぶやきです。

ちゃんぽんめんさんのCSSの書き込みで、印刷などを簡単に試して
みました。昔ながらのデザインだと印刷時もそれなりですが、
eyecatchやlayout、段組などを利用した最近の画面だと
印刷は大きく変わってしまいますね。スマートフォンの画面を
横２段というか２列にしたような感じでA4などに印刷出来ると
良いような気がしました。

いしまるさん、ホントにありがとうございます。

当方「昔ながら」のサイトですので、気になりませんでした。
ヘッドコピーがでかでかと表示されるので、
少し内容を変えないといけないと思いました。

まあ、サイトの情報を印刷して来られるお客様もいらっしゃるので、
ホントに助かりました。

HAIKの段組、まだ今チャレンジ途中です。
チェックできずに、スミマセン。

QHMが対象でhaikは多少違う部分があるようですが、
tomozoさんの以下などがCSS変更の際の基礎として
役立つと思います。


CSSの改造 - 一歩先を行く　QHMユーザのためのＴｉｐｓ
http://qhmtips.com/index.php?CSS%E3%81%AE%E6%94%B9%E9%80%A0

話がちょっと変わりますが、
本文中に長いリンク、特に元が日本語のページで記号化されて
長くなったURLを貼り付けた場合に、標準のテーマのhaik_seed、
ブラウザがChromeだとURLがメニュー部分にはみ出してしまいます。
枠(#bs_box)、段組(#cols)でもはみ出しは解消されない。
ソースコードを表示するPukiWikiの#codeプラグインだと本文内で
改行となるが、リンクにならない。
うまい方法はないのかな…。

印刷の件、もう少し調べて見ました。
HAIKだけでなく、WordPressでも、bootstrapを使えば同様になるのですね。

印刷時に１カラムになるのは、仕方ないとも記載しているページがありました。

イメージでは、こんな感じでしょうか。
「WordPress ページを見たままのレイアウトで印刷する」
http://milkveil.com/archives/1755

他にも、
「[CSS]ウェブページを印刷対応にする際に、加えておくと効果的なスタイルのまとめ」
http://coliss.com/articles/build-websites/operation/css/css-style-for-print-media-by-responsivedesignis.html


スミマセン、css、からっきしです。

自分のサイトの印刷は全く見てなかったので、やってみたらびっくり。
やはりリンクのアドレスがざらざらと出て印刷がおかしくなってました。
さっそくナビに#html{{
<style>
@media print {

#toolbar_upper_max {
display:none;
}
#shortcut_list {
display:none;
}

#menubar {
display:none;
}

a[href]:after {
content: "";
}
abbr[title]:after {
content: "";
}

}
/* @media print */
</style>
}}

を書き込んだところ直りました。
haikのデフォルト印刷対応が問題なんでしょうね。
7betaでも同じなので以前からの問題でしょうね。

情報ありがとうございます。
一人だと気が付かない事などもあり、参考になります。

7betaの障害として報告しておきました。
HAIK-CLUBの方では、まだベーターテストが始まりません。
これでは一体いつ完成するのやら。

いしまるさん

haikでは、印刷のことはすっかり忘れていました。
URLがぞろぞろと印刷されるなんて知りませんでした。
こんなものが印刷されても、一般の人は困ってしまいますよね。
ある程度の対策が分かってよかったです。
ありがとうございます。
ナビの印刷をなんとかしようと思っていますが、ちょっと難しいですね。

WordPressの話ですが、
流行りのページは別として、ある議員の方は、活動をWEBにこまめにアップし
ちょっとした資料などに印刷して利用しているということでした。
IEで画像のexif情報の関係で印刷できなくて調べたことがありました。
(ChromeやFirefoxでは印刷できる画像がIEでは印刷できない)

本文の部分はちゃんと印刷できる事は割とニーズはあるようです。

自分のサイトの印刷プレビューを確認してみたところ、A4縦用紙ではナビが「メニューボタン」になり、段組も1列になってしまうことから、スマホ用のレイアウトになっていることがわかりました。
　A4横だとナビや段組が表示されます。
　A3横だと画面通りに近く、A3縦ではスマホモードにならず。

　本文とメニューを選択してA4横用紙に「選択された部分を印刷」にすると画面通りに出ます。A4縦だとこれでもスマホモードになってしまいます。

　つまり印刷も用紙に合わせてレスポンシブ！
　さらにアイキャッチの画像はどうやっても印刷できませんでした。

　いらぬお節介かも。なんてこった。