人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

wp-printプラグインを使用中ですが、ヘッダフッタを印刷したくないのですがうまくいきません。print-css.css内に以下の記述をするも出力されてしまいます。
header.site-header, #secondary, nav.nav-single, #comments, footer#colophon { display: none; }
ブラウザ側で設定するしかないのでしょうか?
良い方法があれば教えてください。

●質問者: kaji0245
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● 牛乳先生(tukihatu)
●100ポイント

wp-printの仕様がさっぱりわからなかったのですが、基本的にはdisplay: none !important;で解消できるかとおもいます。
ただし、wp-printのソースを調べたら、print.cssの読み込みには、mediaにscreenも指定されているのでこのまま使うと表示自体も真っ白になってしまいそうです。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/print-css.css" type="text/css" media="screen, print" />

よってprint.cssに書くのはこういう形になると思います。

@media print {
 header.site-header, #secondary, nav.nav-single, #comments, footer#colophon { display: none !important; }
}

コレでできない場合は指定するIDが間違っていないか、他の場所でdisplay: block !important;などを調べてください。


kaji0245さんのコメント
設定してみましたが、やはりブラウザ設定を優先しているようです。 ブラウザ設定がヘッダフッタONになっていると印字されてしまいます。

牛乳先生(tukihatu)さんのコメント
>ブラウザ設定がヘッダフッタONになっていると印字されてしまいます。 すみません。print.cssの話かと思いましたがもしかしてブラウザごとのヘッダフッタの話をしているのでしょうか? 印刷すると上部にタイトルや日付、下部にページ数などが印字されるあれですか? そのことを指しているのならこちらからのONOFFは無理です。各ブラウザの印刷設定はJavaScriptでは制御できません。(IEならがんばればいけるらしい) 実際にHTMLに書いたソースに対してなら上記の方法で消えると思うのですが、それも消えないのでしょうか。 詳しい状況を知りたいのでお手数ですが使っているブラウザの種類と、ヘッダフッタON設定はどこにあるものなのかと、実際のソースでなくていいのでサンプルのような何か・こういうふうにしたいというサイトがあるなら教えていただけると、もう少し答えられると思います。

kaji0245さんのコメント
今回はまさに以下の話です。 >すみません。print.cssの話かと思いましたがもしかしてブラウザごとのヘッダフッタの話をしているのでしょうか? >印刷すると上部にタイトルや日付、下部にページ数などが印字されるあれですか? 何やら難しそうですね。

牛乳先生(tukihatu)さんのコメント
了解です。前にもあげたとおりその部分を製作者側であれこれするのは無理です。 ただしIEならActiveXをつかって何とかなります(ただしActiveXを使うと警告画面がでますので、そこまでして実装するべきものかどうかは微妙なところです) http://hoshiya.biz/blog/2010/12/activexjavascript.php
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ