むねさだブログ

またの名を「わんぱくブログ」食・写真・ガジェットを使用した感想や情報を発信中!!

Webサイト全体をレイアウトそのまま印刷したい!という人はChrome拡張使うと良いぞ!

   

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る

スクリーンショット_011316_024635_PM

ブログ歴も、早いもので8年以上が経過しました。むねさだ(@mu_ne3)です。

ブログやネットのニュースなど、印刷して人に見せたい!ということってありますよね?

ただ、なぜかブラウザの「印刷」を押すと、通常表示している見た目と違ってしまい、ヤキモキしちゃいます。

これ、なんとか改善したい!と思って調べてみた所、Chromeの拡張機能で良さそうなものがありましたのでご紹介したいと思います。


スポンサード リンク

Webサイトを印刷しようとするとレイアウトやデザインが崩れる

まず、こちらをご覧ください。

PCで見た、私のブログです。
スクリーンショット_011316_123924_PM

タイトルがあって、その下にプロフィール・カメラ写真・ガジェット・グルメ、などのカテゴリ表示。

その下にカテゴリのパンくず表示がありつつ、記事タイトル。その下に更新日付とSNSボタンがあって、本文(ここで言うと写真)に入ります。

それが、印刷しようとブラウザの「印刷」を押してみると、こんな具合に…。
スクリーンショット_011316_123855_PM

カテゴリは横並びだったのに縦並びに。パンくずも縦並び。左上にはMENUという表示がなぜか表示されたり。

タイトルと日付の後には、無駄に改行されたSNSボタンが表示され、1枚目に写真さえ表示されません。

これでは、困りますよね…。

 

Chromeの拡張機能「Awesome Screenshot」

ということで今回ご紹介しますのは、Webサイトをみたまんまの表示で印刷することができる便利な拡張機能。
スクリーンショット_011316_122841_PM

ブラウザのChromeを使っている人限定になりますが、こちらのリンクから拡張機能を追加してください。

この拡張機能を使うと、やってることとしては、
1.Webサイトを見えていない部分含めて1枚の画像としてスクリーンキャプチャする

2.(必要ならば)注釈をつけたりボカシを入れたりする

3.印刷はプリントも可能だし、PDFとして保存も可能

ということで、具体的な使い方の紹介をしていきます。

 

「Awesome Screenshot」の使い方

拡張機能を入れると右上にカメラのレンズのようなアイコンが表示されます。
スクリーンショット_011316_124446_PM

これが、「Awesome Screenshot」です。

印刷したいWebサイトをChromeに表示させて、この「Awesome Screenshot」を押すと、このような表示が現れます。
スクリーンショット_011316_125216_PM

表示されている領域だったり、エリアを選択してキャプチャもできるのですが、今回はスクロール領域含めてWebサイト全体を選びます。

こちらのこれです!
スクリーンショット_011316_125450_PM

 
すると、Cheromeの別タブでこのような画面が表示されます。
スクリーンショット_011316_125618_PM

これ、要はこの時点でWebサイトが上から下までマルっとスクリーンキャプチャとして撮られてるわけ。
スクリーンショット_011316_010142_PM

この「Awesome Screenshot」の面白い所は、この状態で注釈を付けたり、線をひいたり、ぼかしを入れたりという加工も出来ちゃうんです。
こんな感じで。
スクリーンショット_011316_011432_PM

なので、記事の査読に使ったり、サイトの修正依頼をする時にも便利なんです!

 

編集が終わったら「Done」で印刷or保存

一通り編集が終わったら(というか印刷だけなら特に編集不要で)、右上のDoneボタンを押します。

するとこのような画面に切り替わります。
スクリーンショット_011316_014048_PM

後は、右側中央にある「Local Save」の左側のアイコンを押すと画像として保存。
右側のボタンを押すと、印刷することができます。
スクリーンショット_011316_014409_PM

ここで、左側の選択肢から「PDFに保存」を選ぶと後から印刷できる状態のA4書類の束として保存してくれるのでとても便利です。

無事、見た目そのままのPDFで保存することが出来ました!
PDF

あとはこれをプリントアウトすれば、見た目やレイアウトそのままで印刷することが可能になります。

 

わんぱくブロガー的まとめ

ブログを書いていると、どうしても「印刷して人に見せる」ことがチラホラとあるんですよね。

そういう時に、この「Awesome Screenshot」を使うと、イメージ通りにブログを見せることができるので重宝しています。

ただし、懸念点としては、
・写真もページ途中で見切れて(次ページに続きが)印刷される
・文字も同様なので、査読用だと少し読みづらくなる箇所が発生することがある
・画像をPDF化しているので、文字検索などができない

という感じでしょうか。

それでもかなり便利だと思いますので、気になっていた人は是非お試しください。

あ、もちろん無料です。
「Awesome Screenshot」
 

 - サービス・アプリ

        
  • Pocket
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る
コメントはこちら。

  関連記事

ハーゲンダッツ77個が当選!みんなも応募したほうが良いぞ!

美味しいものが大好きな、むねさだ(@mu_ne3)です。 先日、Twitterで …

マルコメのアニメCMが思った以上に共感&感動するぞ!

美味しいものが大好きな、むねさだ(@mu_ne3)です。 基本、食事にはスープや …

「ジャンプスクエア」の電子書籍が発売日配信開始!あの伝説的読切作品や大場つぐみ×小畑 健の新作「プラチナエンド」が読めるぞ!【PR】

学生時代はジャンプっ子でした、むねさだ(@mu_ne3)です。 社会人になり、い …

「航空券+ホテルのパック」が航空券のみよりも安い!楽天トラベルを上手に活用

飛行機代って便利だけど料金が高いですよね・・・。     僕 …

Flickrでの写真の公開範囲の設定方法を教えるぞ!

みなさん、デジカメで撮影した写真ってどうしていますか? 僕はFlickrというオ …

百獣の王!武井壮とカップヌードルのコラボサイトがなんだか凄くアツいぞ!

中学、高校、大学時代はずっと陸上部でした、むねさだ(@mu_ne3)です。 意外 …

デジカメで撮った写真をすぐにスマホで確認できる「Eye-Fi mobile X2 4GB for docomo」発表イベントに行ってきたぞ!

このブログでも何度か紹介しているEye-Fi(アイファイ)カード。   …

iPhoneユーザー必見。写真アプリの中にフォルダを作って自動で写真を振り分けてくれる「スマートアルバム」が便利すぎるぞ!

  iPhoneと、Eye-Fiという無線LAN搭載のSDカードが手放 …

【こんなに違った!】SIMフリーiPhone6sと格安SIMの運用について比較検討してみたぞ!

実はau歴15年くらいになる、根っからのauユーザーのむねさだ(@mu_ne3) …

自分のパソコンの状態分かってますか?アンチウイルスソフト「ディフェンスプラットフォーム」はパソコンに少し詳しい人におススメだぞ!【PR】

  普段、職場ではWindowsを、家でも家計簿や年賀状などを使うため …