質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Twitter Bootstrap

Twitter Bootstrapはウェブアプリとウェブサイトの開発をすぐに始めることができるツイッターのフロントエンドのフレームワークです。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

3670閲覧

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

s_y

総合スコア8

Twitter Bootstrap

Twitter Bootstrapはウェブアプリとウェブサイトの開発をすぐに始めることができるツイッターのフロントエンドのフレームワークです。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/10/13 06:54

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

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

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

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

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

css

1.label,sub,sup{vertical-align:baseline 2} 3body,figure{ 4 margin:0 5} 6hr,img{ 7 border:0 8} 9body,pre{ 10 word-break:break-all;word-wrap:break-word 11} 12.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.pre-scrollable{max-height:340px 13} 14body{ 15overflow: visible !important; 16}

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

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

css

1@media print{ 2.image{ display: none; } 3} 4 5.print_page{ 6width: 172mm; /* A4縦の幅 */ 7height: 251mm; /* A4縦の高さ */ 8page-break-after: always; /* 各ページの終わりに改ページ */ 9}

HTML

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

投稿2016/10/13 07:25

kunai

総合スコア5405

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s_y

2016/10/13 07:54

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

2016/10/13 08:01

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

2016/10/13 08:33

WordPressを導入していますので、 ┣該当ドメイン(index?) ┣wp-content ┣plugins ┣weluka ┣assets ┣css ┗print.css 以上になると思われます。 サポートからは「WordPressのプラグイン内「costom css」に実装すれば修正されます。」と言われましたが、そのように実装しても変わりませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問