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

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

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

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

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

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

マウスクリックで撮る

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

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

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

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

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

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

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

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

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