MovableType のウェブログで、個別記事の印刷用ページを作ることを考える。印刷用ページには、記事の日付や内容を表示し、それ以外のサイドバーやメニューなどは表示ないようにする。#BLOG: MTで印刷用ページを作成するには？ には、メディアタイプを指定することでスタイルシートの切り替えを行う方法が紹介されている。これを応用して、プレビュー画面もブラウザで表示できるようにする。
■ ■ ■
やりたいことのアイデアは次の通り。このアイデアを具体化して最終的なコーディングまで持っていく。実装は JavaScript を使用することになる。
- 通常表示と印刷表示のページは同じ HTML 文書を使いたい
- 印刷表示は URL の最後に ?print をつけて区別したい
- 印刷表示は、通常表示の一部をスタイルシートで非表示にすることで行いたい
- 印刷表示の非表示用スタイルシートは、追加で読み込むようにしたい
- 通常表示には「印刷用表示」、印刷表示には「通常表示」へのリンクを表示したい
少し具体的にすると、次のようになる。これは実際の動作でもある。
- 通常表示と印刷表示の URL は次のようにする
通常表示用の URL: http://nlogn.ath.cx/archives/000227.html
印刷表示用の URL: http://nlogn.ath.cx/archives/000227.html?print
- 印刷表示用スタイルシート styles-print.css を新たに作成し、非表示にしたい要素の指定を上書きする
サイドバーを非表示にする場合: #links { display: none; }
- スタイルシートは、印刷表示の場合 styles-print.css を追加で読み込む
通常表示の場合のスタイルシート指定: <link rel="stylesheet" href="http://nlogn.ath.cx/styles-site.css" type="text/css" />
印刷表示の場合のスタイルシート指定: <link rel="stylesheet" href="http://nlogn.ath.cx/styles-site.css" type="text/css" />
<link rel="stylesheet" href="http://nlogn.ath.cx/styles-print.css" type="text/css" />
- それぞれのページへのリンクを表示する
通常表示用: <a href="http://nlogn.ath.cx/archives/000227.html?print" title="印刷用表示">印刷用表示</a>
印刷表示用: <a href="http://nlogn.ath.cx/archives/000227.html" title="通常表示">通常表示</a>
やっと要件が揃ったので、これを踏まえて実際のコーディングに入る。
まず、印刷表示用のスタイルシート styles-print.css を用意する。内容には、要素の位置の調整と非表示の指定を書く。必要であれば、他の要素も追加する。
/* 位置の調整 */
#content {
margin-right: 10px;
margin-left: 10px;
}
/* 非表示の指定 */
#menu { display: none; }
#links { display: none; }
個別記事用の Individual Entry Template を編集し、ヘッダに赤色部分を追記する。
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<script type="text/javascript" language="javascript">
<!--
var mode = location.search.substring(1);
if (mode == "print") {
document.write('<link rel="stylesheet" href="<$MTBlogURL$>styles-print.css" type="text/css" />');
}
//-->
</script>
同じテンプレートの本文に、リンクのための記述を追加する。
<script type="text/javascript" language="javascript">
<!--
var mode = location.search.substring(1);
if (mode == "print") {
document.write('<a href="<$MTEntryPermalink$>" title="通常表示">通常表示<\/a>');
} else {
document.write('<a href="<$MTEntryPermalink$>?print" title="印刷用表示">印刷用表示<\/a>');
}
//-->
</script>
document.write の中では、終了タグ「</」のスラッシュをエスケープした方がよいとされているので(W3C 勧告 附属書 B: パフォーマンス上、実装上、設計上の注意)、「<\/」としている。テンプレートを保存し、Individual Entry を再構築すれば完了である。このサイトでは、このリンクの文字を画像ファイルにした。しかし、そのため暗号のようになってしまった。印刷することは滅多にないだろうが、それでもあまりにも不親切だろうか。
印刷用表示のページの「通常表示」というリンクは、仕様とは言え、少し邪魔。メディアタイプを指定する方法を組み合わせれば、表示しないようにできそうだ。
Posted by n at 2004-07-15 23:31 | Edit | Comments (1) | Trackback(3)
印刷用ページを作るには
私のブログは、MTではなく、ヤプログ！です。
Posted by: @ピーマン at August 01, 2005 22:19ヤプログでもできるかな・・・と勝手に改造；；
してみたら、なななんと！！できました。
ありがとうございます！