印刷用のスタイルシート(CSS)を指定する

1.印刷用のスタイルシートをテンプレートに指定する

テンプレートの"HTMLヘッダー"を以下のように編集します。

[変更前] モジュールテンプレート：HTMLヘッダー

<meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
<meta name="generator" content="<$mt:ProductName version="1"$>" />
<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
<link rel="start" href="<$mt:BlogURL$>" title="Home" />
<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$mt:Link template="feed_recent"$>" />
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
<$mt:CCLicenseRDF$>

[変更後] モジュールテンプレート：HTMLヘッダー

<meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
<meta name="generator" content="<$mt:ProductName version="1"$>" />
<link rel="stylesheet" href="<$mt:Link template="styles"$>" media="all" type="text/css"/>
<link rel="stylesheet" href="<$mt:BlogURL$>/print.css" media="print" type="text/css" />
<link rel="start" href="<$mt:BlogURL$>" title="Home" />
<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$mt:Link template="feed_recent"$>" />
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
<$mt:CCLicenseRDF$>
<script type="text/javascript" src="<$mt:BlogURL$>/showkiji.js"></script>

2.指定した印刷用スタイルシートに内容を書き込む

今回はMTの3カラムの内、両サイドのカラムは印刷しない設定をします。

MTのデフォルトテンプレートでは、カラムはそれぞれ

• 左のカラム ： #alpha
• 中央カラム ： #beta
• 左のカラム ： #gamma

で指定されていますので、以下のように指定します。

#alpha => 横幅を紙面いっぱいに広げる
#beta、#gamma => 印刷しない

実際には、以下のようになります。

[中央カラムだけを印刷するように指定した印刷用スタイルシート(print.css)]

.layout-twt #alpha {
    width: 956px;
}

#beta{
    display: none;
}

#gamma{
    display: none;
}