GoogleChromeを使用して特定のサイズのウェブサイトのスクリーンショットを撮る方法

GoogleChromeでスクリーンショットを撮る方法

あなたがオンラインで共有したいサイトやページのポートフォリオを持っている代理店や会社なら、あなたはおそらくユニフォームをキャプチャしようとする苦痛を経験したでしょう スクリーンショット 各サイトの。

私たちが使用しているクライアントのXNUMXつは、ホストされているビルドです イントラネットソリューション これは、企業の範囲内で内部的にホストできます。 イントラネットは、企業が会社のニュースを伝えたり、マーケティング情報を配布したり、福利厚生情報を提供したりするのに非常に役立ちます。

OnSembleが親会社のWebサイトからイントラネットソリューションを移行するのを支援しました。 これは、新しいソーシャルプロファイルの構築、Marketoの更新、そしてサイトを結合するために過去に行ったカスタム開発の一部を分解することから、すべてを組み込んだ大規模なプロジェクトでした。

GoogleChromeを使用したクライアントのスクリーンショット

これに気付かないかもしれませんが、GoogleChromeに組み込まれている堅牢な開発者ツールのセットを使用して完璧なスクリーンショットをキャプチャできます。 興味深いことに、それは驚くべき柔軟性を持っているにもかかわらず、あまりよく知られた機能ではありません。

これは、GoogleChromeを使用してWebページの完璧な特定のサイズのスクリーンショットを撮る方法に関する簡単なビデオチュートリアルです。

GoogleChromeでスクリーンショットを撮る手順

Google Chromeの開発者ツールには、デバイスツールバーを使用してサイトをプレビューするオプションがあります。 このツールは、開発者がさまざまなデバイス間でさまざまなビューポートサイズでサイトがどのように表示されるかを確認できるように構築されていますが、Webページの完全なサイズのスクリーンショットを取得するための完璧な方法でもあります。

この場合、美しいイントラネットサイトを構築している業界全体のOnSembleの主要なクライアントのそれぞれにスクリーンショットを撮ってもらい、それらすべてをWebサイトのポートフォリオ内に表示できるようにします。 ページの幅を1200ピクセル、高さを800ピクセルにする必要があります。 これを達成するには:

  1. 右端のナビゲーションボタン(縦に3つ並んだ点)で、 メニューのカスタマイズと制御.

GoogleChromeの開発ツールメニュー

  1. 次の項目を選択します。: その他のツール>開発者ツール

GoogleChromeを使用した開発者ツール

  1. トグル デバイスツールバー デバイスのオプションと寸法を表示します。

GoogleChromeでデバイスツールバーを切り替えます

  1. 最初のオプションをに設定します 敏感な、次にサイズを1200 x 800に設定し、Enterキーを押します。 これで、ページがそれらのサイズで表示されます。

レスポンシブデバイスツールバーGoogleChrome

  1. デバイスツールバーの右側にあるナビゲーションボタン(縦に3つ並んだ点)をクリックして、 スクリーンショットのキャプチャ.

GoogleChromeでスクリーンショットをキャプチャする

  1. Google Chromeは完璧なスクリーンショットを撮り、それをあなたの 資料をダウンロードする 添付してメールで送信できるフォルダ。 フルサイズのスクリーンショットはページ全体に表示され、高さ制限が無視されるため、選択しないでください。

スクリーンショット用のGoogleChromeキーボードショートカット

キーボードショートカットのマスターであれば、これらのショートカットを使用してフルページのスクリーンショットを撮ることもできます。 ビューポートの最大の高さを設定できないため、このアプローチは好きではありません…しかし、ページ全体のスクリーンショットが必要な場合に便利です。

Macのキーボードショートカット:

1. Alt + Command + I 
2. Command + Shift + P

WindowsまたはLinuxでのキーボードショートカット:

1. Ctrl + Shift + I 
2. Ctrl + Shift + P

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.