【当サイト限定 ドコモクーポン配布中!】iPhone 8、7、Plus、iPadが5,400円割引になる『限定割引クーポン』をusedoor読者にプレゼント!

新着を見る



最終更新 [2017年2月15日]

[スポンサーリンク]




ブラウザ「firefox」でアドオン・プラグインなしでページ全体やスマホ版サイトのスクリーンショットを撮影する方法です。

自分が長いことお世話になっているブラウザ「firefox」はいつのバージョンからかアドオンなしでページ全体のスクリーンショット撮影ができるようになっています。
またPCでスマホ版のサイトのスクショもアドオンなしで撮影できます。

firefox純正の「開発ツール」の1機能としてページ全体のキャプチャーを撮ることができます。
昔はアドオンをインストールして…と面倒でしたがアドオンなしでいけるので便利です。

ということでfirefoxでアドオン・プラグインなしでページ全体&スマホ版サイトのスクショ撮影を行う方法を紹介します。
ちなみにfirefox系の派生ブラウザ(PalemoonやCyberfoxなど)でも同じことができます。


【firefox系ブラウザ】アドオン、プラグインなしでページ全体&スマホ版サイトのスクリーンショットを撮影する方法

開発ツールの1機能を使えばOK。最初だけ簡単な設定が必要

開発ツールの表示方法

firefoxの開発ツールは、メニューバー > ツール > ウェブ開発 > 開発ツールを表示で開きます。
ショートカットキーで起動する場合は「Ctrl+Shift+l」や「F12」などでOKです。
(他の開発ツールを入れているとショートカットキーだと干渉するかも)

初回のみ「ページ全体のスクリーンショット撮影」を有効にする

開発ツールが開いたら、右上の設定アイコンをクリックします。

いろいろとメニューが表示されます。
この中にある「ページ全体のスクリーンショットを撮影します」にチェックを入れます。
開発ツールのメニューの部分にカメラアイコンが表示されればOKです。
これだけで準備完了です。

PC上からスマホ版サイトのスクリーンショットを撮影したい場合は「レスポンシブデザインモード」にチェックを入れておきます。

ページ全体をキャプチャーしたいサイトを開いて撮影

ページ全体のスクリーンショットを撮影したいサイトを表示します。
今回はYahooを撮影させてもらいました。

Yahooにアクセス後、開発ツールを開きます。
開発ツールの上にあるカメラアイコンをクリックします。

ダウンロードの部分にページ全体のスクリーンショット画像が保存されればOKです。

PC版Yahooの全体のスクリーンショット↑
ちゃんとサイトの幅、長さに合わせたサイズのキャプチャー画像が出来上がります。


スマホ版サイトの全体のスクリーンショットを撮影する方法

スマホ版サイトのキャプチャー撮影もこのままできます。
撮影したいサイトを表示し、開発ツールを開きます。

「レスポンシブデザインモード」のアイコンをクリックします。

UAで判定しているサイトやスマホ版のURLが違うサイトはこの方法じゃダメ。UAの変更を。

Yahooの場合↑のようになってしまいます。。
レスポンシブデザインに対応してないサイトだとこれではダメでユーザーエージェントを切り替える必要があります。

ユーザーエージェントの変更は「カスタムユーザーエージェント」となっている部分にUAを入力すればOKです。

↑はUAをカスタムユーザーエージェントにiPhoneのUAを入力した状態。
ちゃんときれいに表示されました。
カスタムユーザーエージェントを入れた状態で一度ページを更新すれば↑のような表示になります。

サイトを表示させる幅などを選択し「カメラアイコン」をクリックすればスクリーンショットが撮影できます。

↑は320×480のサイズでスマホ版YahooをiPhoneのユーザーエージェントで表示した時のキャプチャー画像です。

このようにfirefox系のブラウザは、ページ全体やスマホ版のスクリーンショットをアドオンやプラグインなしで撮影することができます。
firefox系のブラウザでページのキャプチャーを保存したい人は↑の方法でどうぞ。


< この記事をシェア >




usedoorの新着記事をチェック!

記事を書くヤル気が出るのでフォローよろしくお願いしますm(._.)m


このFirefox系ブラウザでアドオンなしでページ全体やスマホ版サイトのスクリーンショットを撮影する方法の最終更新日は2017年2月15日です。
記事の内容に変化やご指摘がありましたら問い合わせフォームまたはusedoorのTwitterまたはusedoorのFacebookページよりご連絡ください。

キーワード:Cyberfox , Firefox , palemoon , キャプチャー , スクリーンショット , スマホサイト , ページ全体 ,




同じカテゴリの記事

ChromeをQRコード、バーコードリーダーとして使う方法 – iPhone・iPadでは専用アプリは不要になるかも

ブラウザ

ブラウザChromeでQRコードが読めるようになった。アップデートでアプリ内からも起動できるように進化!

【Chrome】ブックマーク(お気に入り)データの移行方法 – 派生ブラウザや他ブラウザからインポートできる

ブラウザ

htmlファイルでのインポート/エクスポート、他のブラウザからのインポートもできる


新着記事

【iOS 11~】iPhone・iPadのホーム画面上の複数のアプリアイコンをまとめて同時に移動させる方法

iPhone / iPad

特にiPadだと使いやすくて超便利!まとめてフォルダにブチ込むこともできちゃう

【iOS 11で進化】iPhoneの背面フラッシュライト(懐中電灯)の明るさを変更する方法

iPhone / iPad

iOS 10~コントロールセンターからサクッと懐中電灯の明るさを変更できちゃいますぜ

【iOS 11~】iPhone・iPadの標準カメラアプリでQRコードを読み取る方法 – オフにもできる

iPhone / iPad

ついにiOS標準機能に。もう専用のQRコードリーダーアプリは不要かも

「Newニンテンドー2DS LL モンスターボールエディション/ピカチュウエディション」を予約・購入する方法

ゲーム

『ポケットモンスター ウルトラサン・ウルトラムーン』の発売に合わせて2つの2DS LL限定エディションが登場!


≫ 新着記事をもっと見る



usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    丸亀製麺のクーポンをゲットする方法 – スマホがあれば誰でもOK!公式アプリの使い方

    6月5日(月)までにアプリ会員になると人気の天ぷら3種無料クーポンをプレゼント!


    【Apple Pay】コンビニや店舗、自動販売機などでの支払いはこうやる – ApplePayで支払いする方法

    店舗で支払う時は「ApplePayで!」じゃダメでっせ。支払い・決済方法いろいろ


    【交換対象だった…】iPhone 6sがバッテリー不具合による交換対象だった場合の交換方法と流れ、注意点

    iPhone 6sでカメラ起動→シャットダウン… こんな現象が起きまくってまさかと思ったらバッテリー交換対象だった。。


    注目の記事をぜんぶ見る

  • 最新記事

    【iOS 11~】iPhone・iPadのホーム画面上の複数のアプリアイコンをまとめて同時に移動させる方法

    特にiPadだと使いやすくて超便利!まとめてフォルダにブチ込むこともできちゃう


    【iOS 11で進化】iPhoneの背面フラッシュライト(懐中電灯)の明るさを変更する方法

    iOS 10~コントロールセンターからサクッと懐中電灯の明るさを変更できちゃいますぜ


    【iOS 11~】iPhone・iPadの標準カメラアプリでQRコードを読み取る方法 – オフにもできる

    ついにiOS標準機能に。もう専用のQRコードリーダーアプリは不要かも


    「Newニンテンドー2DS LL モンスターボールエディション/ピカチュウエディション」を予約・購入する方法

    『ポケットモンスター ウルトラサン・ウルトラムーン』の発売に合わせて2つの2DS LL限定エディションが登場!


    最新記事をもっとチェック

  • 人気記事ランキング

    【ミニスーファミ予約開始!!】『ニンテンドークラシックミニ スーパーファミコン』を予約・購入する方法

    【ミニスーファミ予約開始!!】『ニンテンドークラシックミニ スーパーファミコン』を予約・購入する方法

    ジョーシンが抽選受付開始!その他いくつか抽選の場所アリ。ミニスーファミの発売日は10月5日で、価格は7,980円!安い!...


    【9月版】のりかえでiPhone 7を買うならどこが安いか調べてみた! – ドコモ・au・ソフトバンクのiPhone 7料金比較・まとめ

    【9月版】のりかえでiPhone 7を買うならどこが安いか調べてみた! – ドコモ・au・ソフトバンクのiPhone 7料金比較・まとめ

    9月にiPhone7買うなら3キャリアどこが一番安い?MNPで購入した場合の料金を比較...


    『iOS 11』アップデートの感想・ツイートまとめ – iOSをアップデートする方法

    『iOS 11』アップデートの感想・ツイートまとめ – iOSをアップデートする方法

    iOS11にアップデートする前にみんなの反応をチェック!


    ランキングを見る

  • 使い方 カテゴリー

    暮らし
    趣味
    節約・稼ぐ
    WEB
    デジタル
  • キーワード

    Amazon Android apple au Chrome iOS iOS 8 iPad iPhone iPhone 6 iPhone 6 Plus iPhone 6s iPhone 6s Plus iPhone 7 iPhoneおトク Kindle MNP PC SIMフリー SoftBank Windows windows 10 アップデート オトク キャッシュバック クーポン スタンプ スマートフォン セキュリティ ソフトバンク タブレット ドコモ ドコモオトク ドコモオンラインショップ レビュー ワイモバイル 写真 削除 動画 新規契約 楽天モバイル 機種変更 注目・ピックアップ 無料 登録
  • usedoorをフォロー


  • あわせて読みたい記事