HPの印刷プレビューが崩れてしまいます。

Question

###HPの印刷プレビューをブラウザの表示と同じにしたいです。

「weluka」というwordpressプラグインにて制作しましたHPの印刷プレビューが崩れています。
welukaのサポートに聞いても対処できないという事でしたので、ご質問させていただきます。

ちなみに下記のURLが問題のHPです。
URL：http://tannokaikei-web.jp/

以下のように「bootstrap-weluka.min.css」ファイルに以下のcssがあります。
まだまだ長文ありますが、質問欄に入力してもブラウザが止まってしまった為、表記できませんでした。

###該当のソースコード

.label,sub,sup{vertical-align:baseline
}
body,figure{
    margin:0
}
hr,img{
    border:0
}
body,pre{
    word-break:break-all;word-wrap:break-word
}
.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.pre-scrollable{max-height:340px
}
body{
overflow: visible !important;
}

ヘルプサイトで印刷用cssを探して導入してはみましたが、google chlome・IE・Firefoxではスマホ用の幅でプレビューされてしまい、かなり崩れてしまいます。

###試したこと
ヘルプサイトを確認しながらHTMLとCSSを実装しました。

@media print{
.image{ display: none;    }
}

.print_page{
width: 172mm; /* A4縦の幅 */
height: 251mm; /* A4縦の高さ */
page-break-after: always; /* 各ページの終わりに改ページ */
}

<link rel="stylesheet" href="common.css" type="text/css" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

以上、何卒宜しくお願いいたします。

Answer 1

質問文にあるURLにアクセスしてみましたが、印刷設定を指定していると思われる「print.css」が404になってましたよ。

Comments

[s_y]

回答ありがとうございます。

print.cssを入れるディレクトリはどこにいれるなど、指定はございますでしょうか？
404ということはエラーという事ですよね。ファイルは入れているはずなのですが...。

[kunai]

index.htmlというファイルがありますよね？例えばそのフォルダ内にprint.cssを置いているなら、<link rel="stylesheet" href="print.css" type="text/css" media="print">
という指定になります。
index.htmlのフォルダ内に「css」というフォルダを作り、その中にprint.cssを置くと、
<link rel="stylesheet" href="./css/print.css" type="text/css" media="print">
という、現在指定している場所になります。
個人的には後者が好みですね。
ファイルが置いてある場所はわかりますか？
index.htmlから見た構造を教えてもらえると助かります。
index.html
┣css
┃┗print.css
とか見たいな。

[s_y]

WordPressを導入していますので、
┣該当ドメイン（index?）
┣wp-content
┣plugins
┣weluka
┣assets
┣css
┗print.css

以上になると思われます。

サポートからは「WordPressのプラグイン内「costom css」に実装すれば修正されます。」と言われましたが、そのように実装しても変わりませんでした。