はてなde印刷！
昨日、自分のブログの一部をハードコピー*1が必要になったので、印刷プレビューを見たらとんでもないことに成っていたのですYO！
ﾅﾝﾃﾞｽｶあれ、黒インキを使って景気回復に一役買うつもりか！？ってくらいひどい有様です。
私の周りにも、黒背景の人が多いのではてな用印刷CSSを制作するかなと思っていたり居なかったり。
HTMLは解るけどCSSはヨーワカランって人が多いので、画一的にコピペすればどこでも動く仕組みにしたい物だ（笑）
はてなでのCSS呼び出し方法
<link rel="stylesheet" href="http://d.hatena.ne.jp/theme/widow_blackwidow/widow_blackwidow.css" type="text/css" media="all">
と言った具合で、メディア呼び出しがallになってるのが原因ですね……。ちなみにこのmedia呼び出しの方法で、NN4の場合は「screen」しか対応していないので、NN4だけのCSSとそれ以外のブラウザでの呼び出しを変えるときに
<link rel="stylesheet" href="nn4.css" type="text/css" media="screen">
<link rel="stylesheet" href="IEandOpera.css" type="text/css" media="screen,tv">
と、指定しておけばnn4.cssはNetscape Navigator4.xしか読み取らず、それ以外のブラウザはIEandOpera.cssを読み込んでくれたりするんです。
本来ならば、ここに1行加えて、<link rel="stylesheet" href="print.css" type="text/css" media="print">を追加してあげれば、自動的に印刷するときはprint.cssの方を読み出してくれるんですが、ハテナの場合はその設定がないので、別な方法で切り分けないといけません。
実際的なCSSの設定方法
実はメディア別にCSSの表示を切り分ける方法が3種類ほどあるのですが、一つは前述の「Link」要素に入れてしまう方法。
もう一つは「@import 規則」を利用する方法があります。
CSSの定義ファイルの中に
@import url("screen.css") screen;
@import url("print.css") print;
@import url("public.css") projection, tv;
と言う具合に別ファイルからさらに呼び出して使う方法もあります。
ルールとしては、次の通り
以上の二点です。しかし、はてなではコレをサポートしているひな形がないので却下です。
そこで出てくるのが「@media 規則」です。
一つのスタイルシートに、複数のメディアタイプに対する規則を記述することが出来るので、ハテナの「詳細デザイン設定」で簡単に登録することが出来るのですよ……。
記法は簡単下の感じで「｛」から「｝」の間にプリンタ側のデザインを決めておくだけです。
@media print { /* 紙媒体向けスタイル定義 */
body { font: 10pt serif }
}
と言った具合……。
んで、実際に作ってみた
ソース公開＝w＝；
@media print {
div.hatena-body{
width: 100%; overflow: hidden; background-color: #fff;}
body{
margin: 0em; padding: 0px 0px 1px 0px; font-size: 100%; text-align: center; background-color: #FFFFFF; color: #000000; word-break: break-all; word-wrap: break-word;}
div.day{
page-break-after:always; background-color:#FFF; color:#000; }
div.sidebar{
display:none;}
div.main{
width:100%;}
h2{
background-color:#000; color:#fff; }
h3{
color:000; font-size:3em; background-color:#FFF; border-style:solid #000 2px; margin-bottom:1em; }a.keyword:link,
a.okeyword:link,
a.keyword:visited,
a.okeyword:visited {
color: #000; text-decoration: none; border-bottom: none; }div.footnote {
color:#000; }
div.commentshort{
color:#000; background-color:#fff; }
}
取りあえずの暫定版です。
印刷したくない部分がある場合はそのブロック（HTMLでは<div>を使っている所）を指定して、「display:none;」を指定する事と印刷するときに外枠が残ってしまう場合があるため、ハテナで外枠を管理する「hatena-body」部分に適応させる
div.hatena-body{
width: 100%; overflow: hidden; background-color: #fff;}
を記述することが必須要件かな？
参考にしたところ：
はてなダイアリーガイド「CSSセレクタ」とは - はてなキーワード
CSS Print Profile総本山
*1:要は、プリンタに出力させること
