AGLIA   ライターのための、ホームページのキャプチャー講座
上級者編

前へ TOP 次へ

 

 
レッスン6 上級者編 ブラウザの枠をなしでキャプチャーする その1


 レッスン5までは、ブラウザの枠を入れてキャプチャーしましたが、ここではその枠をなしでキャプチャーする方法を紹介します。掲載媒体によっては枠をつけたまま納品すればデザイナーさんがその後の処理をしてくださる場合もあります。
レッスン8でも別の方法で枠なしでキャプチャーする方法を紹介しています。

このレッスンの目標



このようなキャプチャーを撮ります。



ここをすると拡大します。


 

用意するソフト


ウィンドウのサイズを変更するソフト ここではWindowサイズ!というソフトを利用しました。他のソフトでもよいですが、「クライアント領域」のサイズ変更にも対応しているソフトを使ってください。
キャプチャー用ソフト ここではWinShotといソフトを利用しました。こちらも、「クライアント領域」のキャプチャーに対応しているソフトを用意してください。

*上記2つのソフトはwin7には対応していません。スタッフのwin7 64bit、win7 32bitのいずれの環境では利用できたので今回はこれを利用します。
(windows7対応で、枠なしキャプチャーを上手にできるソフトをご存知の方はご連絡ください)

**以下の説明は、上記ソフトの基本的な設定と利用方法はすでに取得済みであることを前提に説明しております。

 

クライアント領域と、キャプチャーしたい画面の違い

 

6-1

クライアント領域とは...

Windows ベースのアプリケーションの、ツール バー、メニュー、およびステータス バーを除いた部分【 Weblio 辞書 より】

よって左図の赤い枠がIE7のクライアント領域になります。


しかし、掲載時には右端のスクロールバーは不要です。

6-2

普通にクライアント領域だけキャプチャーするとこのようになります。

ここををクリックすると拡大しますので、見てください。

6-3

上記で拡大した図をみると、上下と左にうすいグレイの枠が入っています。
それらは不要です。この枠が各約2ピクセルです。
右端のスルローバーが約20ピクセル。

以上をクライアント領域から切り取る方法を以下で紹介します。






クライアント領域のサイズを変更する


6-4

Windowサイズ!を立ち上げます。

ここでは最終的に800x600の枠なしキャプチャー画面をとりたいので、

サイズ欄で
横を800+20(右スクロールバー)+2(左枠)=822ピクセル
縦を600+2(上枠)+2(下枠)=604ピクセル

クライアントの□にチェックを入れます。

 

*他のサイズで撮りたい場合は、横を22ピクセル、縦を4ピクセルプラスした数値を入力します。


*最終的な画像サイズは800x600、1024x768、1280x1024が一般的ですが、4:3の比率なら大丈夫です。

 

6-5

IE7でキャプチャーしたいホームページを表示します。


Windowサイズ!の左上にあるを、「shift」を押しながら、IE7の画面中央あたりまでドラッグします。

すると黒い枠がクライアント領域に表示されます。


*「shift」を押しながらドラッグしないと、クライアント領域のサイズではなく、枠全体のサイズになるので注意。


6-6

すると左端に枠のないクライアント領域だけの画面が表示されます。


画面をキャプチャーする


6-7

WinShotを立ち上げます。

「環境設定」の画面を出し、「カット」のページに移動します。

「キャプチャと同時にカットを行う」にチェックを入れます。

カットするサイズに

上 2
下 2
左 2
右 20

を入力します。


「OK」をクリック。

 

 

6-8

左図のようにWinshotの設定を、変更します。

「その他の設定」のページ
○保存の拡張子を小文字に変更(.jpg)
○「時間差キャプチャ」にチェックをいれる。秒数は0以外の任意の数字で。
○「拡張アクティブウィンドウキャプチャを有効にする」にチェックを入れる
○「コントロール/クライアントキャプチャの初期値をクライアントにする」にチェックを入れる。

 

「基本設定」のページ
○「マウスカーソルをキャプチャーする」のチェックをはずす。

 

 

6-9


設定の確認のため、タスクバーにある「WinShot」のアイコンを右クリック。

「クイック設定」で、設定が左図のようになっているか確認。

 

6-10

再度タクスバーにある「WinShot」のアイコンを右クリックする。

表示された一覧から、「JPEG保存(J)」を選択⇒「コントロール/クライアント(C」)をクリック。

 


6-11

上記でクリックした直後に、IE上にマウスを移動してクライアント領域が選択されていることを確認してからクリック。

 

WinShotで指定した保存先に、800x600の枠なしキャプチャーが出来上がっている。





*IE7の画面を元に戻すにはWindowサイズ!の「undo」をクリックするか、IE7の下の枠のあたりをクリックします。


出来上がり!



今回の方法は、複数枚をキャプチャーするときには、大変便利です。
レッスン8でも、別の方法を紹介しています。



このページは、(有)アグライアーのライター向けに書いたものです。
他の編集プロダクション、ライターだと違う方法を「よし」とする場合もあります。
参考にするのは構いませんがその点をご注意願います。

 


 

 

トップページへジャンプします AGLIAの会社概要   AGLIAの実績  リンク
JGCへのマイレージ修行記 メルマガ発行者のための文章講座 企業向けメルマガの編集を賜っています 駆け出しライターのための実践講座