隠居のBlog備忘録: MT4.1 でエントリー部分のみを印刷する

　友人から、ブログのヘッダー部分や右サイドメニューを外して、エントリー部分のみを印刷できないかの質問を受けた。確かに、ヘッダー部分や右サイドメニューが印刷されるのは少々うっとうしい。

　方法をググッテみるといつもテンプレートを使わせてもらっている「小粋空間」さんに、「印刷用スタイルシート」というカストマイズがあることが分かった。このカスタマイズは、印刷をするときには、スタイルシートを切り替える仕様になっている。MT4.1、「小粋空間」さんのテンプレート（layout-two-column-liquid-right ）の私のブログ環境に導入してみたので備忘録として書き留めておきたい。
　

印刷用スタイルシート追加を追加する。
　管理画面のデザイン→テンプレート→インデックス・テンプレートの表示で「インデックステンプレートを作成」クリックして、以下のように新しいインデックス・テンプレートを作成する。
- テンプレートの名前：ForPrinting（なんでもよい）
- 出力ファイル名：print.css
- 再構築オプション：チェックを外す
- このテンプレートにリンクするファイル：（空白）
- テンプレートの中身：スタイルシート（styles-site.css）の中身を丸ごとコピー

印刷用スタイルシートの修正
コピーしたスタイルシートで本体のヘッド部分と右サイドメニューが印刷プレビューで表示されないように、該当スタイルのID属性、クラス属性をいじった。
　私の場合、具体的にはスタイルシートの次の項目を青字で書いた部分を付加した。

#header 
    {
     /* padding: 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background-image: url("http://n-huhei.net/Libraly/Image/Wood_ipe_01.gif");   
    background: #8fabbe; 
   text-align: left;     */
   display: none;
}

#links-left-box dl,
#links-right-box dl {
  /*  margin: 0;
    padding: 0;   */
      display: none;
    }

/* 2カラムリキッドレイアウト(右サイドバー) */
.layout-two-column-liquid-right #content {
    /* margin: 0 250px 10px 0px;  */
    margin: 0 10px 0px;    
   /* border-bottom: 1px solid #669;
    border-right: 1px solid #669;
    background-color: #ffffff;  */
    border-style: none; 
}

テンプレートに link 要素追加
　次に、モジュールテンプレートの「ヘッダー」 <head> 部にあるスタイルシートを呼び出している部分を次の青字部分を追加した。
実際には、この部分を先に付加しておいて、ブログのエントリーを表示し、ブラウザーのツールバー「ファイル」→「印刷プレビュー」で確認しながら print.css をいじる試行錯誤をした。
```
   <link rel="stylesheet" href="<$MTLink template="スタイルシート"$>" type="text/css" media="screen,tv" />
   <link rel="stylesheet" href="<$MTBlogURL$>print.css" type="text/css" media="print" />
```

カスタマイズの結果
　左のスクリーンショットは、このカスタマイズをしていない場合とカスタマイズした後との印刷画面の比較である。
　カスタマイズした後は、ヘッダーと右サイドメニューが印刷画面に出てこないので、エントリー部分のみを印刷できる。

隠居のBlog備忘録: MT4.1 でエントリー部分のみを印刷する

タグ:

トラックバック

コメントする

隠居のBlog備忘録: MT4.1 で エントリー部分のみを印刷する

タグ:

トラックバック

コメントする

隠居のBlog備忘録: MT4.1 でエントリー部分のみを印刷する