販売実績などの縦長画像はこうしてキャプチャしてます | サラリーマンの副業奮闘記

販売実績などの縦長画像はこうしてキャプチャしてます | サラリーマンの副業奮闘記 記事一覧

販売実績などの縦長画像はこうしてキャプチャしてます

 まいど吉田屋です。


画像、使ってますか?


文字より画像で説明した方が、
圧倒的に伝わり易い場合があります。


例えば、
「アンリミテッドアフィリエイトを50本以上販売しています!」
と文字で説明するより、
インフォトップの販売実績を画像で見せた方が、
説得力がありますよね?


私もそうしています。


でも、この販売実績のように、モニターからはみ出るような画像を、
一発でキャプチャする方法、ご存知ですか?




スクロールしなくてもモニターに表示できるような小さな画像を
キャプチャするには、いろいろな方法があります。


私は、「Rapture」というフリーソフトを愛用しています。


詳しい使い方は、こちらの記事をお読みください。


『画面キャプチャーの撮り方と載せ方』


「Rapture」は、スグに立ち上がって、
欲しい画面をサクッと切り取ることができます。


必要十分な機能を備えていて、
私にとっては、もう手放せないツールですね。


ただし、欠点があります。


モニターからはみ出すような、
大きな画像をキャプチャすることができません。


つまり、画面をスクロールしながら
キャプチャすることができないわけです。


これは、販売実績などの縦長画像が必要なとき、
もの凄く不便なんですね。


モニターの画面ごとに分割してキャプチャし、
画像ソフトで1枚に繋げる、という手はあります。


が、もっとずっとスマートな方法があるんです。


Firefoxのアドオン
「Pearl Crescent Page Saver」を使います。


ダウンロード画面


インストールすると、画面右上に、
カメラのアイコンが現れ、クリックするとメニューが表示されます。


アイコン



ここで、「ページ全体を画像として保存」を選択すると、
モニターには見えていない部分も含めて、
全体をキャプチャーしてくれます。


その画像を、
一旦、PNGかJPEGファイル形式で保存します。


後は、普段使っている画像ソフトで加工すれば、
縦長画像の出来上がり。


私は、GIMPを使っています。


一旦、GIMPに保存画像を取り込み、
必要な部分だけを切り取ります。


そして、「画像の生成」−「クリップボードから」を選ぶと、
切り取った画面だけの画像ファイルができあがります。


GIMPの切り出し


「Rapture」では、ID番号などの表示したくない部分は、
黒線で塗りつぶしていたんですが、
見た目があまり良くありません。


GIMPを使うと、
消したい部分を選択して、「ぼかし」−「ピクセル化」で、
好きな場所にぼかしを入れられるんですね。


GIMPのぼかし


ぼかしの強さはピクセル幅とピクセル高で調整できます。
4くらいが調度いいぼかし加減でしょう。


ピクセル化


ぼかしを入れた画像を保存すると、
縦長画像ができあがります。


でも、この画像をそのままレビューページなどに貼り付けたら、
縦に長すぎて、場所を取っちゃいますよね?


そこで、スクロールバーがついたボックスに表示させます。


やり方は簡単。


まず、スタイルシートに、次のように書き込みます。


.scroll
    {
    overflow:auto;width:465px;height:300px;
    border: 2px solid #CCC;
    margin: 30px 10px 30px 140px;
    }



ここで、widthとheightが、ボックスの幅と高さです。
横スクロールしないよう、widthを調整してください。


marginは、ボックスの外側にある余白部分です。
4つの数字がならんでいますが、
それぞれボックスの上、右、下、左の余白です。


マージン


widthとheightでボックスの大きさを調整し、
marginで、ボックスの位置を調整します。


そして、次のようなHTMLタグを、
index.htmlなどに書き込みます。


<div class="scroll">
<img src="画像のURL" />
</div>


そうすると、スクロールバーの付いたボックスに、
縦長の画像を表示することができます。


モニターをはみ出すような画像のキャプチャに、
是非、使ってみてください。




※ 「Pearl Crescent Page Saver」は、
  6月29日現在、Firefox5に非対応です。
  Firefox5には、以下の無料ツールが対応しています。

  「Screenshot Pimp」


  こちらの記事をご参照ください。



 
comments(6)trackbacks(0)|2011.05.15 Sunday | category:├ 画面キャプチャ
このブログで人気のある記事を読む

ブログパーツ
このブログで人気のある記事を読む

コメント








   

吉田屋さんこんにちはー
マメボーwです。
Raptureの説明から始まり、
これはすごい記事ですね^^

この方法を知りたがっている方いっぱいいますよね^^

有益な記事をありがとうございます

心を込めて♪応援ポチっ( ´艸`)シシシ

賢威と言えば!マメボーw 2011/05/15 12:10 PM

マメボーwさん、いらっしゃい。

お褒めに預かり光栄です♪

皆さんご存知かと思いましたが、
意外に知られてないんですかね?

他の方のコメントが楽しみです。
お役に立てるといいんですが。

吉田屋@中国 2011/05/15 12:35 PM

こんにちは
吉田屋さん

スクロールの仕方のソース、とてもわかりやすかったです。

さっそく取り入れてみたいと考えています^^

GIMPで加工してるんですね。
私はフォトショップでいろいろしてますが、

アフィリエイターさんは、基本GIMPなので、ちょっと予備知識を入れるために0円クリエイターを買って学んでたりします。

応援済です♪

SIRIUSカスタマー@アダチ 2011/05/15 3:44 PM

アダチψさん、いらっしゃい。

GIMPは、ぼかしを入れるときくらいしか
使ってないです。

ペイント系のソフトが必要なときは、
だいたい標準のペイントで済ませちゃいますね。

タイトル画像なんかは、
ほとんどドロー系のinkscapeを使ってます。

吉田屋 2011/05/15 10:11 PM

吉田屋さんこんにちはー。
ちょうど私もキャプチャ―ソフトの話題を書いたところでした(笑)

でも画面からはみ出すくらいの画像をキャプチャーする方法は知らなかったです!

これはマジで使わせていただきます!
応援ずみです!

『脱サラプロブロガー』小澤竜太 2011/05/16 1:15 PM

小澤さん、いらっしゃい。

記事がかぶっちゃいましたね。(笑

Clipdeskは、使ったことありませんが、
軽くて使い易そうですね。

好きな範囲をスクロールしながらキャプチャできれば
完璧なんですが、そういうツールはまだ見たことがないです。

吉田屋 2011/05/16 2:48 PM

トラックバック
この記事のトラックバックURL:

月間アーカイブ



(最近の記事一覧)
Copyright © 2018  販売実績などの縦長画像はこうしてキャプチャしてます | サラリーマンの副業奮闘記 All Rights Reserved.
当サイトのテキストや画像等すべての転載転用・商用販売を固く禁じます
Designed by SEOテンプレートKAETEN X