サポート » 使い方全般 » twentyeleven 画面通りに印刷用したい

  • bamboobooboo

    (@bamboobooboo)


    twentyelevenのテンプレートを使って子テーマを入れてサイトを作っています。
    印刷したときに、650px以下の設定が適用される上、print部分のcssが適用されるため、ヘッダーやフッターが表示されません。

    単純に画面に1024pxで表示された通りを縮小して印刷したいのですが、この場合twentyelevenの元の@media print 以下をコメントアウトしても、希望通りに印刷されません。

    @media print以下に色々と修正してみたのですが、

    @media print {
     body {
    	padding: 0 2em;
         }
    #page {
    	margin: 2em auto;
    	max-width: 1000px;
    }
    
    .widget-area {
    	display: block;
    }
    
    #primary {
    	float: left;
    	margin: 0 -26.4% 0 0;
    	width: 100%;
    }
    #content {
    	margin: 0 34% 0 5%;
    	width: 61%;
    	font-size:9px
    }
    #content nav {
    	display: block;
    }
    #secondary {
    	float: right;
    	margin-right: 3%;
    	width: 23%;
    }
    #box_content .box h4,#supplementary .widget-title h3{
    font-size:9px}
    #access {
    	background-image: url(img/○○.gif);
    	background-repeat: repeat-x;
    	height: 49px;
    	display: block;
    }
    #access ul li{
    border-left:1px solid #ffffff;
    border-right:1px solid #ffffff;
    font-size:12.5px;
    margin-top:7px;
    }
    #access ul li + li{
    border-right:1px solid #ffffff;
    border-left:0px solid #ffffff;
    margin-top:7px;
    }
    
    #access ul ul li{
    border-right:0px solid #ffffff;
    border-left:0px solid #ffffff;
    margin-top:7px;
    }
    #access div {
    	margin: 0 3%;
    }
    #access a {
              padding:0 1em;
    }
    #access div {
    	margin: 0 7.6%;
    }
    .entry-header .comments-link {
    		display:block;
    }
    	.page-link {
    		display: block;
    }
    
    #branding hgroup {
    	margin: 0 7.6%;
    }
    #branding img {
    	display: block;
    	}
    
    #colophon {
    	clear: both;
             display:  block;
    
    }
    #supplementary {
             clear: both;
    	padding: 1.625em  7.6%;
    	overflow: hidden;
              display:  block;
    }
    #supplementary.three .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 30.85%;
    }
    #supplementary.three .widget-area + .widget-area + .widget-area {
    	margin-right: 0;
    }
    }

    以上のようにしたのですが、IEでは#accessのナビ部分が背景の縦が伸びて、文字が表示されず、幅が狭くなってしまうためかなりレイアウトが崩れてしま士ます。

    グーグルクロームやfirefoxでは、2カラムなのですが1カラムで表示されます。

    単純に画面のまま印刷したいのですが、わかりません。
    どのようにしたらいいのか、ご教授願います。

  • トピック「twentyeleven 画面通りに印刷用したい」には新たに返信することはできません。