WordPress

【超簡単!】スクロールするページの全画面キャプチャを取る方法!


パソコンを使いながら人差し指で合図する女性

「Print Screen」ボタンを押した場合は、いま表示している部分しかキャプチャすることができませんが、Webサイトデザインの保管や比較などの場合、スクロールした全画面をキャプチャしたい場合があります

■ 全画面をキャプチャした例

全画面をキャプチャした例

サイト全体を縦長にキャプチャした画像を使うと、次のようなサイト紹介テクニックでも使えます。

※ 画像の上にマウスを持ってくることで、画像を自動スクロールします。

本記事では、スクロールが必要な Web サイトの全画面キャプチャを取得する方法を紹介します。

「Google Chrome」または「Microsoft Edge」の標準機能でキャプチャする方法

Chrome または Edge をお使いの場合、拡張機能の追加なしで使える標準のディベロッパーツールを用いてキャプチャすることが可能です。

■ ディベロッパーツールの起動方法


ディベロッパーツールはブラウザ上でショートカットキーを押すことで起動します。

※ Chrome、Edge とも手順は同一です。

ディベロッパーツール起動方法

  • Windows の場合:「Ctrl+Shift+I」または「F12」キー
  • Mac の場合:「⌘(コマンド記号)+option+i」
ディベロッパーツールの起動方法

右側にプログラムコードのような表示が現れたら成功です。

(右側の細かい部分は使いませんので、「わけわからない」と心配しなくても大丈夫です)

■ キャプチャの取得方法

画面上部にある操作パネルを利用します。

右上にある青いボタン

右上にある「デバイス エミュレーションの切り替え」ボタンが青いことを確認します。

(青くなかった場合は、1回押して青くしてください)

フルスクリーンのキャプチャを取る操作

横に「・」が3個ならんだアイコンをクリックして、「フルサイズのスクリーンショットをキャプチャする」を選択することで、全画面のキャプチャを取得します。

まとめ

Microsoft Edge または Chrome で Web ページの全画面フルスクリーンショットの撮り方です。

  • ディベロッパーツールから、「フルサイズのスクリーンショットをキャプチャする」を選択する

どんどんキャプチャしましょう!

WordPress の情報、テクニック一覧はこちらをクリック!










ブログランキング・にほんブログ村へ  




Presented By Irojiro Haraguro .Com