姫野先生のブログ『私的司法書士試験研究所』の記事を印刷する際に、印刷に邪魔な部分を消してしまうためのブックマークレットです。
先生のブログでは、平成18年12月現在、「過去問分析のかたち」という連載が行われています。この連載は素晴らしいものですが、先生のブログの記事を印刷する際、印刷には邪魔なサイドバーやトラックバック情報、投稿フォームまでもが印刷されてしまい、個人的に残念に思っていました。電車で読むべく出勤前に慌てて印刷するというような場合は仕方がないにしても、ファイリングして保存するなら、無駄な情報を削り、必要な情報だけをファイルしたいと思うのが、人情です。
そういうわけで、そのような「印刷に含めたくない部分」を消してしまうための Bookmarklet を作りました。私個人の環境（具体的には改造に詳述）に最適化したものですが、他の方にも有効かもしれませんので、公開しておきます。
なお、平成18年12月現在の『私的司法書士試験研究所』の XHTML ソースにアドホックに対応させたものですから、将来、FC2ブログの仕様変更等があれば、使えなくなる可能性もあります。
基本的に自分で使う物として作ったので、クロス・ブラウザを意識していません。
以上で準備は完了です。
なお、リロードすれば、元の表示に戻ります。
まず、トラックバックの部分を、要素ごと JavaScript で削除（removeChild()）しています。
次に、body 要素に id="hiroyukihimeno-blog42-fc2-com" を追加します。
最後に、外部の CSS ファイルを読み込んで、以下の様に見栄えを整形しています。
display: none !important;）ハードウェアやソフトウェアにダメージを与える処理、個人情報の盗み読み等やっていないことを明記しておきますが、不安な向きにあってはコードを読んで納得してからお使いください。
javascript:(
function(){
m=document.getElementById('mainBlock');
m.removeChild(m.childNodes[20]);
document.body.id='hiroyukihimeno-blog42-fc2-com';
var e=document.createElement('link');
e.rel='stylesheet';
e.type='text/css';
e.href='http://homepage.mac.com/s_urano/shiteki_print.css';
document.getElementsByTagName('head')[0].appendChild(e);
}
)();
ありがちな一問一答集
そうです。
印刷プレビューを画像化したものをおいておきます。
私は Mac ユーザなので、Windows 版 IE をプライベートで使うことはありません。また、Mac 版 IE もすでに開発・配布が終了しているため、使っていません。よって、私が自分の時間を割いて IE に対応させることはありません。
お望みなら自由に改造していただいてかまいませんが、特に IE6 は CSS セレクタのサポートが貧弱なため、これに対応させるのはかなりしんどい作業になると思われます。IE の場合には、印刷したい部分だけをワープロにコピー・アンド・ペーストし、ワープロから印刷する方法が楽でしょう。
なお、セキュリティの面において IE の脆弱さはかねてから話題になっていましたが、Internet Explorer Unsafe for 284 Days in 2006 - Security Fix というレポートも出ましたので、常用ブラウザとしては、IE から他のブラウザへの乗り換えをご検討されてはいかがでしょうか。どうしても IE でしか使えないサービスのみに IE を利用し、普段は他の安全なブラウザを常用するという「使い分け」も、自衛手段としては有効でしょう。
私が印刷して読みたいからです。コメントが不要な場合には、改造の節を参考に対応してください。
ユーザCSSで変更するのが比較的容易です。改造の節を参考にしてください。なお、デフォルトは 8pt（8ポイント）になっています。
そのような使い方を想定して作っていません。
参考までに、私個人の環境を以下に記しておきます。似通った環境の方は、そのまま使える可能性が高いと思われます。
多少の調整が必要な場合には、以下を一瞥してみるとヒントがあるかもしれません。
Blog の普及によって、CSSだけなら何とかという方も増えてきたようです。この場合には、厳密に言えば改造には当たりませんが、ユーザCSSで調整するのが比較的楽でしょう。
2006年12月23日版から、body 要素に id="hiroyukihimeno-blog42-fc2-com" を生成する処理を追加しましたので、CSSセレクタで以下の例の後段の様に指定すれば、他のサイトへ影響を与えることもありません。
/* すべてのサイトの div 要素にマッチ */
div {
color: red;
background-color: transparent;
}
/* id="hiroyukihimeno-blog42-fc2-com" の子孫の div 要素のみにマッチ */
#hiroyukihimeno-blog42-fc2-com div {
color: black;
background-color: white;
}
実際にユーザCSSで指定する場合には、!important 宣言を忘れない様にしてください。以下、いくつか例を挙げておきます。
#hiroyukihimeno-blog42-fc2-com {
font-size: 12pt !important;
font-family: serif !important;
}
以上の指定で、本文のフォントが 12pt の明朝体になります。大きさは好みの数値に指定してください。
#hiroyukihimeno-blog42-fc2-com .mainEntryBlock {
display: none !important;
}
#hiroyukihimeno-blog42-fc2-com .mainEntryBlock:first-child {
display: block !important;
}
#hiroyukihimeno-blog42-fc2-com {
margin: 1cm 2cm !important;
}
この例の場合、上下に1cm、左右に2cmの余白をとります。
ここでは CSS や JavaScript の書き方については省きます。受験生が勉強そっちのけでそれらを習得するのもどうかと思いますので、素人を自認する方は諦めてください。
そうでない方は、以下のアウトラインを参考に、チューニング程度の改造を勉強の合間にやってみてもよいかもしれません。念のため、自己責任でどうぞと申し添えておきます。
file:///...の要領で、http経由ならhttp://www.example.com/path/modified.css の要領で）Opera でも、Bookmarklet が問題なく動作することは確認済です。しかし、用紙の余白が、Mozilla 系ブラウザより狭くなります。body 要素の横マージンを広げるとよいと思います。改造が面倒な場合には、印刷直前に手動で余白を設定しても同じことですが。
解像度の低いインクジェットプリンタの場合には、デフォルトの 8pt 指定ではフォントが潰れるかもしれません。この場合には、指定フォントサイズを大きくしてください。公開しているCSSでは、html 要素に指定してあります。
他方、カラープリンタの場合には、白黒印刷対応は不要ですから、CSS 中、白黒印刷用の旨のコメント以降を削除してしまうとよいでしょう。
body 要素に id="hiroyukihimeno-blog42-fc2-com" を生成する処理を追加