こんな方に書いています
・ウェブページの全体をスクショしたいけど、簡単な方法はない？
・拡張機能を使わない方法とか無いの？
サイト全体の画像が欲しい！！契約書や領収書の全体画像を保存したい！！そんな時に利用されるのが、スクリーンショット。いわゆる「スクショ」と言われるものです。Windowsのパソコンなら、「PrintScreen」というボタンを押すと画面のスクショが撮れます。しかし、ふと困ったことがありました。
「ネットの領収書を撮りたいけど、画面に収まらないぞ」
この時どうすればいいんでしょうか。そう、ページ全体をスクショする方法を探せばいいのです！！
今回は主に2つの方法を皆さんに教えたいと思います。
Chromeで拡張機能を使わない方法
デスクトップのまま画像を取る方法
Google Chrome専用の使い方です。
- Windows
「Ctrl+Shift+I」→「Ctrl+Shift+P」→fullを入力しEnter
- Mac
「command+option+I」→「command+option+P」→fullを入力しEnter
モバイル表示の画像に変える方法
- Windows
「Ctrl+Shift+I」→「Ctrl+Shift+M」→「Responsibleからデバイスを選択しページを更新（F5）」→「Ctrl+Shift+P」→fullを入力しEnter
- Mac
「command+option+I」→「command+Shift+M」→「Responsibleからデバイスを選択しページを更新（F5）」→「command+Shift+P」→fullを入力しEnter
以上が拡張機能を使わずにページ全体をスクショする方法です。
普通にページ全体の画像が欲しいときに利用しています。正直に言うとこの方法だとショートカットキーを覚えないといけませんし、基本的にスクショしかできません。ですが、スマホの画面をキャプチャーできるのが利点ですね。
「でも覚えるのめんどくさいじゃん」という方へは次に紹介するプラグインをご紹介しましょう。
拡張機能「Awesome Screenshot」
chromeに追加できる拡張機能です。非常にお手軽で様々なスクリーンショット、JIFも撮影することができる。
インストール手順
- https://chrome.google.com/webstore/search/Awesome%20Screenshot?hl=jaをクリック
- 「+CHROMEに追加」をクリック
- Chrome右上に追加されていればOK
使い方
スクショしたいサイトで赤丸のアイコンをクリックするとこのような表示になります。
日本語表記では無いので解説すると、
- Capture visible part of page
現在、見えている範囲をスクショします。
- Delayed capture
３秒後に見えている範囲をスクショします
- Capture entire page
現在のページ全体をスクショします。
- Select a local image
ローカルにある画像をスクショします。
- Capture desktop
任意のウインドウをスクショします。
様々に機能がありますが、今回は全体をスクショしたいので
- Capture entire pageをクリック
- 「Done」をクリック
- Local Saveの赤丸をクリックして、任意のファイルに保存
以上がサイト全体のスクショを撮る方法です。
まとめ
いかがでしたか？ 今回は主に2つの方法をご紹介させていただきましたが、僕のおすすめは「Awesome Screenshot」です。理由はインストールさえしてしまえば、覚えることも少ないですし、機能も多いからです。
ですが、スマホサイズの画面を撮ることができませんので、そこは臨機応変に使いこなしてください。
皆さんもこの便利な機能を使って見てください！！
それではまた。