WEB制作の備忘録|朧なる足痕

Google Chrome ページ全体のスクリーンショット

Google Chrome スクリーンショット

Webページ全体(スクロール)のスクリーンショットを撮るのに、長らくブラウザGoogle Chrome拡張機能「Full Page Screen Capture」や「FireShot」などを使用していましたが、徐々に機能が怪しくなってきたので別の機能を使用することにします。

  • 右上縦3点>その他のツール>デベロッパーツールcommand+option+i
  • 「Toggle device toolbar」アイコンをクリック

f:id:hak00810:20200427212810j:plain

  • 上部バー>「Responsive」>1920(PC表示)>右上縦3点の下の縦3点>Capture full size screenshot

f:id:hak00810:20200427213350p:plain

  • 上部バー>「確認したいモバイル」>右上縦3点の下の縦3点>Capture full size screenshot

f:id:hak00810:20200427213413p:plain

  • PCのダウンロードフォルダに自動で保存されます。

(別手順:デベロッパーツールを開く>command+shift+pで開いたバーに「full」と入力 >...>Capture full size screenshotを選んでreturn

フルページで取れない場合の対処法

見たままの箇所しかスクリーンショットできない場合は、以下の手順を行うとうまくいきました。

  • 「確認したいモバイル」を設定した状態で、リロード>...>Capture full size screenshot
  • 上部バー>「Responsive」>375×2000(SP表示):2000など実際よりも長い高さを入力>キャプチャ画面の右と下に出てくるメジャーのようなものの上にカーソルをあわせ、↔︎で高さを合わせる>...>Capture full size screenshotを選んでreturn

フルスクリーンレイアウトの場合の対処法

(もっと良い方法が他にあると思います!)
背景画像がフルスクリーンのせいか、うまくスクリーンショットがとれないです。
その場合は下のサイズにあわせて、1ページずつCapture screenshotを取り、Photoshopなどでつなげるというアナログな方法をとっています。

    • PC表示:Responsive:1920×1080px
    • SP表示:iPhone 6/7/8

<参考サイト>

47ossan.com
blanche-toile.com