サイト(PC・モバイル）でページ全体のスクリーンショットを撮る方法を調べていて、うまくいかなかったので別の方法を見つけたことを報告します。
「サイト」「スクロール」「スクリーンショット」などで検索すると、サイトのスクロール画面全体のスクリーンショットをとる方法がたくさん出てきました。
よく見られるのが、ブラウザがChromeの場合に拡張機能を使ってスクロールキャプチャをとる、以下の方法。これはブラウザがEdgeの場合でもほぼ同じ方法で可能だと紹介されていることが多いです。
Chromeの拡張機能を使ってスクロールキャプチャをとる方法
- デベロッパーツールを立ち上げる
- 詳細機能を呼び出す
- 「capture」もしくは「full」と入力し、「Capture full size screenshot」を選択
- ページ全体のスクリーンショットがダウンロードされる
私は手順の３で、できなくなりました～
上の方法で進めていくと、本当なら３で下のような画面になって”capture”を入力するとフルサイズスクリーンショットのコマンドが出てくるらしいんですね。
入力してみましたが、「コマンドが見つかりませんでした」と表示されてしまいます。
困った・・・。
で、あちこち触っていたのですが、以下の方法でできることが判明。
２．「Webキャプチャ」を選択
３．「エリアをキャプチャする」を選択
４．右クリックからドラッグで範囲選択できるようになるので、キャプチャをとりたい範囲（今回はフルスクリーンをとりたいのでスクロールページの一番下まで）を選択する
５．「コピー」を選択
一つずつ一緒にやりましょう！
まず、スクロールした画面のスクリーンショットをとりたいページで右クリックします。
すると一覧が表示されるので、「Webキャプチャ」を選択します。
すると、画面の上のほうに表示が出てくるので、「エリアをキャプチャする」を選択します。
右クリックするとドラッグで範囲選択できるようになっているので、キャプチャをとりたい範囲（今回はフルスクリーンをとりたいのでスクロールページの一番下まで）を選択します。
その後、「コピー」を選択します。
「コピー」を選択すると、選択したエリアがクリップボードに保管された状態になるので、ペイントなどのソフトで新規の空白ページを立ち上げ、張り付けたあとに画像として名前を付けて保存します。
こんな感じでフルスクリーンキャプチャを画像として保存することができました。
スマホの画面は、ワードプレスの「レスポンシブ」でスマホ画面のプレビューにして、同じ方法でキャプチャをとっています。
なぜ調べた方法でできなかったのかは不明なままですが、とりあえずこれでスクロール画面のスクリーンショットをとることができました。
デベロッパーツールからの手順と違って、いったんペイントなどに張り付けて画像として保存する一手間は必要ですが、必要なエリアだけ選択してキャプチャがとれるのは便利ですね。
私と同じように、デベロッパーツールからのキャプチャができない！という方は、この方法でもフルスクリーンキャプチャがとれるので、一度試してみてください。
