Chromeで縦長ページのスクリーンショットを撮る!

縦長のwebページのスクリーンショットを撮る方法を解説。普通の方法だとブラウザに表示された部分しか撮れませんが、この方法だと全体を撮ることができますよ!

ショートカットキーでサクッと撮る

ショートカットキー3ステップで撮る方法を説明します。

撮りたいwebページを表示して、だまされたと思って以下のショートカットキーを順番に実行してください。

Ctrl + Shift + I

Ctrl + Shift + P

fullと入力 → Enter

上記3ステップのショートカットキーを順番に実行するだけで、画面上に表示されていない部分も含めてwebサイト全体のスクリーンショットが撮れます。

マウスクリックで撮る

マウスクリックだけでも可能です。(結果はショートカットキーで撮ったのと同じです)

例として、当サイトで作成したスケジュール調整ツール「Fuzzz」でやってみます。

ブラウザに表示しきれなくて下が切れてしまってますね。こんな風に画面に表示しきれないwebページの全体像を取りたい場合・・・

Fuzzz

Chromeのデベロッパーツールを開きます。

右上の設定その他のツールデベロッパーツール

デベロッパーツールを開く

デベロッパーツールが開きました。

デベロッパーツール

Toggle device toolbar(赤枠アイコン)をクリック

Toggle device toolbar

Toggle device toolbarの設定(赤枠)→Capture full size screenshotをクリック

Toggle device toolbar

縦長のスクリーンショットが撮れました!

 

関連コンテンツ