Bootstrapで作られたWEBサイトを見たまま印刷(プリントアウト)する方法

Boostrapを使って作ったサイトをPC用の表示で印刷したい!

Bootstrap利用して構築してあるWEBサイトを印刷すると、見たままの状態では印刷されず、紙媒体でも読みやすいように印刷時にレイアウト等が変更されて印刷されます。

Bootstrapデフォルト状態での印刷プレビュー

以下のURLで印刷プレビューしてもらうと、Bootstrapのデフォルトの印刷スタイルを確認出来ます。
http://onocom.net/code/bootstrap-print/default.html

これは、Bootstrapには予め印刷用のスタイルが定義されており、それが印刷時に適用されるためです。

この印刷スタイルには、

・リンクテキストの後にリンク先のURLが表示される!(ハイテク!)
・背景がすべて消える(インク代節約!)
・レイアウトがシンプルになる(タブレットやスマホ用に近い、コンテンツを読みやすいレイアウトになる!)

などなどが含まれます。
デバイスに応じて適切なスタイル(CSS)を定義すべきという素晴らしい思想だと思います。

しかし、そんなことクライアント様には関係ないようで「印刷用のスタイル?わけがわからない。安く作ってくれればいい。」「印刷すると壊れる!(印刷するとレイアウト崩れておかしくなるの意)」などありがたい意見を頂くことがあります。

印刷する環境はやはりPCなので、PC表示を印刷できるようにして欲しい。という要望です。

[Bootstrap 印刷]とかで調べると、印刷時のURLを消す方法とかはよく出てくるのですが、見たまま印刷する方法って意外と出てこないので頭を抱えておりました。

私以外にもそういうお声に頭を悩ませている方がいることを願い、今回、Bootstrapで見たまま印刷する。という方法に真っ向から立ち向かってみました。

お役に立てれば幸いです。

Bootstrapで見たまま印刷する手順

以下の手順でBootstrapサイトを見たまま印刷できるようにしていきます。

  1. Bootstrap公式サイトから印刷用スタイル(@media print)を除外したパッケージをダウンロード
  2. 印刷調整用CSSの適用
  3. 微調整

 

1. Bootstrap公式サイトから印刷用スタイル(@media print)を除外したパッケージをダウンロード

まずは、Boostrapから印刷用のスタイル定義情報(@media print)を削除してあげます。

目視で該当部分を削除する方法もありますが、公式サイトのカスタマイズページやSass・Lessを使った方が間違いないでしょう。

ということでここでは、Bootsrap公式サイトのカスタマイズページを利用する前提で話を進めます。

Bootstrapカスタマイズページ

Bootsrapのカスタマイズページ (Customize and download)
http://getbootstrap.com/customize/

このページはBootstrapのカラム幅や色など、多岐にわたるカスタマイズをウェブ上から簡単に行えるページです。
以下の方法で印刷用のスタイルを除外したBootstrapを取得します。

1-1:ページの最初の方にある大見出し「Less files」の中にある、中見出し「Common CSS」の中の「Print media styles」というチェックボックスのチェックを外し、一番下までスクロールします。

Print media styles - Bootstrapカスタマイズページ選択項目

1-2:ページの一番下に「Compile and Download」というボタンがあるのでクリックしてダウンロードします。

ダウンロードしたZIPファイルには印刷スタイルの含まれないBootstrapが出来上がっています!すごい簡単!

コンパイル&ダウンロード

1-3:ダウンロードしたZIPファイルの中からbootstrap.css,bootstrap.min.cssをコピーして現在のサイトで使っているBootstapファイルを上書きします。

ここまでの操作でBootstrapで構築されたサイトを印刷プレビューしてみましょう。

ステップ1が完了した時点での印刷プレビュー

以下のURLで印刷プレビューしてもらうと、このステップが完了した状態の印刷スタイルを確認出来ます。
http://onocom.net/code/bootstrap-print/step1-complete.html

当初より大分改善はされているものの、スマホやタブレットのようなレイアウトになっているかと思います。手順2でその部分を改善していきます。


蛇足ですが、ダウンロードしたZIPファイルには「config.json」というファイルが含まれています。このファイル先ほどBootstrapのカスタマイズページの上部からアップロードしてあげることでカスタマイズ情報を引き継ぐことができます。

config.jsonの使い方そのため、Bootstrapのバージョンが変わってもこのファイルをアップロードして再度Bootstrapをダウンロードすることで、印刷スタイルの定義されていないBootstrapのCSSファイルを簡単にダウンロードできるのです。


2. 印刷調整用CSSの適用

印刷用スタイルの定義されていないbootstrap.cssを利用すると印刷が見たままに多少近づきますが、レイアウトがスマホやタブレットのようになりがちです。

そこで私が特別に作った黒魔術のようなCSS(bootstrap-print.css)を以下からダウンロードしてサイトに適用してあげます。

bootstrap-print
https://github.com/onocom/bootstrap-print

するとどういうことでしょう。印刷プレビューがPC表示のままで印刷出来るようになっていませんか!?PC表示のまま印刷出来るという方はここまでで作業終了。

全ての対応が終わった時の印刷プレビュー

以下のURLで印刷プレビューしてもらうと、印刷対応が全て完了した状態の印刷スタイルを確認出来ます。
http://onocom.net/code/bootstrap-print/index.html

もし、一部印刷が上手く出来ない方は3.微調整を行っていきます。

3. 微調整

サイトによっては(と言うか殆どのサイトでは)、2の調整用のCSSを導入しただけでは細かな部分でおかしい箇所が出てくると思います。

そこは印刷調整用のCSSに追記するなどして一個ずつ潰していきましょう。

先ほどのbootstrap-print.cssに追記するか、以下の用にプリント用のCSS (@print)を作成して最終調整を行います。

bootstrap-print-adjuster.cssみたいなファイルを作成し、以下のように記述する

さぁ、これで印刷パーフェクトになったはずです!

まとめ

ここに辿り着くまでに意外と時間がかかりました(^_^;)

印刷調整用CSSはまだまだ改良の余地があると思いますので、お気づきの点などあればリクエストをお願いします。

皆様のウェブサイトが見たまま印刷出来るようになってくれることを願います!



[制作者向け] 404 NOT FOUNDページにみるレクサスのおもてなし精神、その他の自動車メーカーの404ページもまとめてみた

「404 – ページが見つかりませんでした」というページってどんなアナウンスしていますか?

リクエストしたURLにコンテンツが存在しなかった場合に表示される、404ページ。皆さんはどのように表示させていますか?

ちなみこのサイトでは、こんな感じで表示されます。(Twenty Fifteenテーマのデフォルトの表示です。)

404 NOT FOUNDページ

いやぁ、おもてなしの精神を感じませんね。私は悪くない、あなたがこのURLを開いたのが悪いんだ!お望みのページを勝手に探してくれって感じるナイスなアナウンスになっています。(言い過ぎ?!)

さて、そんななか、レクサスの404 NOT FOUNDページがシンプルながらも素敵だったので今回紹介します。レクサスを見た後に、他の自動車メーカーの404 NOT FOUNDページも気になったので勉強がてら集めて見ました。

皆様のサイト制作の参考になれば幸いです。

レクサスの404 NOT FOUNDページに感じるおもてなしの精神

さて、私が見たのはこの404 NOT FOUNDページです。

非常に簡潔ながらも、レクサスのおもてなしの精神が行き届いていて、素敵ですね。

大変申し訳ありませんが、該当ページがございません。 トップページへご案内いたします。 このページをブックマーク登録されていた方は、 お手数ですがブックマークの変更をお願いいたします。 なお、このページは5秒後に自動的にジャンプします。 ※自動的にジャンプしない場合は、上記のリンクをクリックして下さい。実際のページを見てみたい方はこちらをクリック

トップページへご案内いたします。

リダイレクトのことを「ご案内致します。」と表現するあたり、ちょっと感動しました。レクサスのショールームで対応をして頂いているような感じを受けます。

また、リダイレクトや画面遷移というようなむずかしい単語は使われず、ジャンプというイメージしやすい言葉で置換えられています。ブックマークしている方への配慮も忘れていません。

このキャプチャだとセンタリングされているように見えますが、実際は左上にコンパクトにまとめられています。これも何か意図があるのかな。

私のブログのNOT FOUNDページと比べると、その差は明らかですね。

その他の自動車メーカーの404 NOT FOUNDページ

レクサス以外の404ページも気になったので集めてみました。各社様々なスタイルで「ページが見つかりませんでした」と伝えてくれています。

※ 一部キャプチャは縦長になりすぎたためトリミングしております。リンク先は各社のトップページにしてありますので、各自でNOT FOUNDページを探してみてくださいませ。

トヨタ自動車

まずはトヨタ。レクサスとほぼ同じ構成でした。シンプルかつ自動リダイレクト。

https://toyota.jp/

トヨタ自動車のNOT FOUNDページ

スズキ

ももクロちゃんがCMをしているハスラーがバカ売れのスズキです。意外とシンプルな感じの作りになっています。

「スズキのサイトでなにかお探しですか?」という文言に言葉にできない違和感を感じるのは私だけでしょうかね。

http://www.suzuki.co.jp/

スズキのNOT FOUNDページ

スバル

スバルのNOT FOUNDページは、メッセージの下にサイトマップやキャンペーン情報を表示しています。

トップページやサイトマップに移動して別のページを探すよりもこの方が機能的だし私は好きでした。

https://www.subaru.jp/

スバルのNOT FOUNDページ

日産自動車

theシンプル。メッセージを表示して5秒後にページ遷移する作りでした。

5秒しか滞在できないし、長い文章は読んで貰えなそうですし。リダイレクトするといいう前提で考えるとこれは有りかと思いました。

http://www.nissan.co.jp/

日産自動車のNOT FOUNDページ

光岡自動車

WordPress で作られているようで、404 File Not Foundと表示されるのはSEO系プラグインか何かの影響かな?と関係ないことを考えてしまいました。

サイトマップへとサイトのトップへと2つのリンクがありますが、ページを探すならサイトマップを見てもらったほうが早いし、2つあると迷いそうだなぁと個人的には思いました。

http://www.mitsuoka-motor.com/

光岡のNOT FOUNDページ

三菱自動車

英語との併記!これは多言語サイトのせいなのか、日本に済む外国人への配慮なのか、少し気になるところです。

シンプルかつリダイレクトでトップページへ行きます。レクサスやトヨタと似たような作りですね。

http://www.mitsubishi-motors.co.jp/

三菱自動車のNOT FOUNDページ

マツダ

シンプルな作りです。リダイレクトはされませんが、上下にグローバルナビゲーションやフッターナビゲーションがあるので迷うことはなさそうです。

「引き続きマツダオフィシャルサイトでの快適なドライブをお楽しみください。」といメッセージが添えられているあたり、マツダらしいですね。

http://www.mazda.co.jp/

マツダのNOT FOUNDページ

ホンダ

一番驚いたのはホンダのサイトでした。

スバルと同じくお知らせや簡単なサイトマップがあるのですが、更にその下には「問題点についてお知らせ下さい」という見出しとともに、フォームが表示されています!こんなNOT FOUNDページはじめて見た!

ホンダのモノづくりに対する精神というものを感じるNOT FOUNDページになっています。

http://www.honda.co.jp/

ホンダのNOT FOUNDページ

ダイハツ

よく見る404ページですね。

「前のページに戻る」ボタンをクリックするとJavaScriptでひとつ前のページに戻る作りになっています。こういうのって検索エンジンから直で来たときって検索エンジンに戻っちゃうので悩みどころですよね。

https://www.daihatsu.co.jp/

ダイハツのNOT FOUNDページ

外国車の自動車メーカー

MINI

ミニはビジュアルでNOT FOUNDを表現している感じでしょうか。

  1. NOT FOUND.という文言を見なければ、パット見、あまり404ページぽくないですね。

https://www.mini.jp

MINIのNOT FOUNDページ

メルセデスベンツ

(!)という表示に見る側が驚きそうですが、ベンツのNOT FOUNDページは画像もなく割りとシンプル。トップページに戻らずに各種リンクを案内しています。

http://www.mercedes-benz.co.jp/

メルセデスベンツのNOT FOUNDページ

BMW

アドレスの入力が誤っている可能性があります。という断定にBMWらしさを感じますね。ヘッダー・フッターからページを見つけてもらえる作りになっています。

http://www.bmw.co.jp/

BMWのNOT FOUNDページ

テスラ

Drupalで作られているサイトのようです。ザ・海外って感じがします。

ページが見つからなかったことと共に、シンプルなナビゲーションが記載されています。

https://www.tesla.com/jp/

テスラのNOT FOUNDページ

まとめ

いかがでしたでしょうか?

お客様の欲しい情報を提供できなかった時、自動車メーカーはどういった応対をするのか。

NOT FOUNDページひとつですが、こうやって見てみると、各社の色が出てますね。

個人的にはスバルやホンダのような機能的な404 NOT FOUNDページが好きです。

特にホンダの「問題点を教えて下さい」っていう姿勢は、本田宗一郎の精神が根付いているように感じました。