Sabakura Blog

サイトやブログに掲載する画像キャプチャ（スクリーンショット撮影）作成には、普段は以前紹介したFireShotを使ったり、レイヤーなどを使う必要がある場合はFireworksを使ってきました。

ただ最近、Windows用の無料キャプチャソフト「Screenpresso」というのを見つけて、こちらも併用しはじめています。（有料のPro版もありますが、無料版でも十分に高機能です）

矢印の形などがMacおよびスマホ向けの有名キャプチャソフト「Skitch」に似ていて、説明コメントなどを綺麗なデザインで入れることができます。またPrintScreenキー一発で起動できるという手軽さも気に入っています。
今回はこのScreenpressoの使い方を簡単に説明してみます。

Screenpressoのインストール

一般的なインストーラー形式のフリーソフトとほぼ同じ手順で、簡単にインストールすることができます。

1. Screenpresso公式サイトのダウンロードページから、自分の環境にあったものをダウンロードします。（通常は「Most popular download」を選べば大丈夫です）
2. ダウンロードの際にメールアドレスの入力を求められるので入力します。
3. ダウンロードしたファイル「Screenpresso.exe」をダブルクリックします。
4. 利用規約が表示されるので、「同意します」にチェックを入れます。
5. 「コンピュータにインストール」をクリックするとインストールが開始されます。

インストールが終了すると、タスクトレイにアイコンが追加されます。初期設定でスタートアップで起動するようになっているので、パソコンを再起動しても常駐しています。

Screenpressoの使い方

画面をキャプチャする

1. キャプチャしたい画面が表示されている状態でPrintScreenキーを押すと、十字のラインが表示されます。
   
2. ラインの交点をドラッグして、キャプチャしたい範囲を矩形（四角形）に選択します。
3. ドラッグ中はモニタ右下に、交点付近の拡大が表示されます。ピクセル単位でこまかくキャプチャしたいときに役立ちます。
   
4. キャプチャが完了すると、モニタ右下にScreenpressoのワークスペース（保存画像の一覧）が表示されます。

キャプチャした画像を編集する

1. タスクトレイのアイコンをダブルクリックすると、Screenpressoのワークスペース（保存画像の一覧）が表示されます。
   
2. 各画像をダブルクリックすると、編集画面が表示されます。
3. 「メイン」タブでは主に「描画ツール」に並んだボタンを使って画像を編集します。
   
   • 矢印の挿入、四角形描画、ぼかし、文字挿入、吹き出し追加、画像挿入、番号（○の中に数字）挿入、強調（蛍光色の矩形）、拡大（画像の一部を拡大表示）の命令が行えます。
4. 「画像」タブでは、切り取り、縮小（画像の一部をカット）、画像サイズ変更などの命令が行えます。
   
5. すべての編集作業が終わったら「メイン」タブに戻り、「確定」ボタンをクリックすると編集内容が上書き保存されます。
6. 保存した画像は標準では（マイ）ピクチャフォルダ内の「Screenpresso」フォルダに保存されています。

おまけ：知っておくと便利な設定

そのまま使っても便利なScreenpressoですが、ちょっとした設定変更などでより便利に利用できます。個人的に役立っている設定などを参考までにメモしておきます。

ワークスペースを複数作成

ワークスペース（保存済み画像の一覧）は、初期設定である「既定値」以外に複数作ることができます。画像の種類、あるいは運営しているサイトやブログごとに分けると、キャプチャ画像が管理しやすくなります。

1. ワークスペースで「新規」ボタンを押すと、「ワークスペースのプロパティ」ダイアログが表示されます。
2. 「氏名」の欄に、サイト名などワークスペースの名前を入力します。（「氏名」というのはおそらく日本語訳の間違いで「名称」という意味だと思います）
3. 「画像」に表示されているボタンからは、そのワークスペースを区別するためのアイコン画像を指定できます。通常はそのままで大丈夫です。
4. 「適用」をクリックすると、「既定値」の下に新しいワークスペースが表示されます。

ワークスペースをショートカットキーで表示

ワークスペースを開くにはマウスだとタスクトレイをダブルクリックしなければいけませんが、これはなかなか面倒です。そこで以下のショートカットが便利です。

Ctrl + Win + PrintScreen

このショートカットキーでワークスペースが一発表示できます。
なおワークスペース右上の「設定」をクリックして設定画面を開き、「ホットキー」タブの「ワークスペース」の項目から別のショートカットキーを割り当てることもできます。

キャプチャ後に自動で画像サイズを一定以下にする

自分のサイトのレイアウトによって、掲載できる画像の最大横幅が制限されている場合も多いと思います。こうした場合には、キャプチャと同時に画像を一定のピクセル数以下にリサイズするように設定できます。

1. ワークスペース右上の「設定」をクリックして設定画面を開きます。
2. 「スクリーンショット」タブを開きます。
3. 「画像のサイズ変更」の「はい」にチェックを入れて「設定」をクリックします。
4. 「最大サイズ」で横幅のピクセルと縦幅のピクセルの最大値を指定します。
5. 「適用」をクリックします。

WordPressの投稿画面（HTML）では、空白行が入った場合は前後を段落と見なし、pタグが自動で挿入されるようになっています。（空白行を含まないたんなる改行の場合はbrタグに変換されます）

そのためメモ帳など各種エディタで書いた文章をそのまま貼り付ければ、文章ごとのまとまりが自動で段落となります。つまりわざわざbrタグやpタグを手打ちする必要はありません。

しかし個人的に困るのがliやddといったタグ内に長文を書きたい場合です。タグ内で空白行があると、pタグが奇妙な挿入のされ方をするためです。
分かりやすくするために、例を挙げてみたいと思います。

liタグ内の改行（空白行）のせいでpタグが自動挿入＆崩れる例

まずWordPressの記事投稿画面で以下のように入力したとします。

<!-- WordPress投稿画面での入力内容 -->
<ul>
<li>
aaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbb

ccccccccccccccccccccccccc
ddddddddddddddddddddddddd
</li>
</ul>

これを実際にブラウザで見ると、以下のように表示されます。

<!-- ブラウザで表示したときのソース -->
<ul>
<li>aaaaaaaaaaaa<br />
bbbbbbbbbbbb</p> ★閉じタグだけ入っています
<p>cccccccccccc<br /> ★先頭に開始タグだけ入っています
dddddddddddd
</li>
</ul>

上記のようにddタグ内の空白行が入ったところで、pタグが奇妙な挿入をされてしまいます。

しかもこのブログの場合、pタグにmarginを設定しているためデザインもあわせて崩れてしまいます。

※pタグが入った下2行だけ先頭に余分なmarginが設定されています。

解決方法

この解決方法としてまず考え付くのは、WordPressのpタグ自動挿入機能そのものをとめる、またはliやddタグ内のみは手打ちでbrを入れるといった方法です。
個人的にはpタグ自動挿入そのものは止めたくないため、改行が必要な長文を入れる場合だけは後者の方法でbrタグを手打ちしていました。

しかしあまりに面倒なときがあるため色々と試行錯誤した結果、下記の方法に落ち着きました。ちょっとハック的な感じなので万人にはおすすめできませんが、同じ現象で困っている方の参考になればと思います。

開始タグの直後に改行を入れる

解決方法はとても単純です。liまたはddタグの開始直後に空白行を入れるだけです。
さきほどの例で実際に示します。

<!-- WordPress投稿画面での入力内容 -->
<ul>
<li>


aaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbb

ccccccccccccccccccccccccc
ddddddddddddddddddddddddd
</li>
</ul>

liタグであれば、上記のように開始タグ直後に空白行を二行連続で入れてください。これによりソースが以下のように変更されます。

<!-- ブラウザで表示したときのソース -->
<ul>
<li>
<p>aaaaaaaaaaaa<br />
bbbbbbbbbbbb</p>
<p>cccccccccccc<br />
dddddddddddd
</li>

上記のようにliタグ内の文章がそれぞれpタグで囲まれるようになります。これによりmarginの差違によるデザイン上の崩れが防止できます。
※なおddタグでは空白行は一行で大丈夫だったのですが、liタグでは二行必要でした。ちょっとこの原因は調査中です。

ただし通常のliやdd内にさらにpタグが入る形になるため、pタグそのもののCSSがさらに上書き適用されます。そのあたりはCSS側で調整する必要があるので注意してください。

以前、ChromeDeveloperToolsの便利さについて記事を書きました。

この記事では、DeveloperToolsはCSSソースをそのまま編集してプレビュー＆全選択してコピーできる、つまりそれをそのまま本来のCSSファイルに貼り付ければ編集作業が完了するというメリットを挙げていました。

そしてさらには、Firebugではこれはできないとまで書いていました……が、これは完全な思い違いでした。FirebugでもCSSソースを直接編集することは可能です。
※もちろんサーバー上のファイルを直接編集という意味ではなく、編集しているように見せかけてのプレビューができる、という意味です。

というわけで、せっかくなので今回の気づきをシェアしてみたいと思います。

FirebugでCSSソースをそのまま編

1. F12キーを押して、Firebugアドオンを呼び出します。
2. CSSのタブをクリックします。
3. 編集方法のリストボタンから、「ソース編集」を選びます。
4. 「ソース編集」という文字部分（ボタン部分）をクリックします。

これでCSSソースを直接編集できるようになります。
ポイントは「ソース編集」を選んだあとに、さらにその文字部分（ボタン部分）を押す必要があることです。

何ヶ月もこれに気がついていませんでした……。
自分の間抜けさに苦笑してしまいますが、他のFirebugの使い方ブログなどでも意外と解説されていないことが多いような気もします。

この方法を使うことで、通常のCSS編集画面と違い、本来のCSSソースを編集できます。もちろん編集したそばから、すぐにリアルタイムでプレビュー画面にも反映されます。

ひとつのメリットは、CSSに書き込んだコメントなどがそのまま閲覧・編集できること（通常の編集画面だとコメントは見えない）です。
あとは、あのFirebug独特の編集方法（Enterするとプロパティがすぐ下に増えるとか）にいまいにち慣れない方も、いつものエディタ感覚で編集できること。

そしてなにより、編集したCSSをそのまま全選択＆コピーして、本来のCSSファイルにそのまま貼り付けることができます。

ただしFirebug全般にいえることですが、画面をリロードしてしまったり、ブラウザがクラッシュしたりすると編集内容は失われてしまいます。

そこで編集途中であっても右クリックから「save as…」を選んでファイルとして保存することも可能です。
Ctrl+Sで上書きとかができないのは残念なところですが、それでも作業中に定期的に保存することで、作業内容すべてが失われることを防いでくれます。

おまけ：ソース編集とライブ編集の違い

それと今回は編集方法に「ソース編集」を選びましたが、もうひとつの「ライブ編集」とどう違うのかに気になる方もいると思います。
ググってもいまいち解説が見当たらなかったのですが、色々と使ってみた感じでは以下の違いがあるようです。

ライブ編集

ライブ編集の特長は、FirebugのCSS編集方法と、直接ソースを編集する方法を同時に利用できることです。

Firebugの編集画面（「ライブ編集」のボタンを押していない状態）で「background-color:red;」というCSSをbodyタグに適用させるとプレビューの背景は赤くなります。

そしてそのまま「ライブ編集」ボタンを押すと、ソースをテキストエディタで編集する画面に移行できます。この際bodyタグのCSSは「background-color:red;」が反映されたままになっており、そのまま編集を続けられます。もちろんプレビューもそのままです。

と便利なライブ編集ですが、ひとつ大きな弱点があります。
それが「ライブ編集」ボタンを押したときのソース編集画面が、コメントなどを省かれた状態のものになってしまうことです。

つまり、編集後に全選択＆コピーして…、という前述の方法が使えなくなります。
※そのため前述の手順では「ソース編集」を選びました。

ソース編集

これはライブ編集とメリット・デメリットが逆になっています。

まずメリットから見ると、「ソース編集」ボタンを押したあとに表示されるソースは、コメントまで含めた完全なソースが表示されることです。
そのため編集後に全選択＆コピー、そしてそのまま別ファイルに貼り付けられます。

一方でデメリットとしては、「ソース編集」ボタンを押していない状態のFirebug編集画面でCSSを変更しても（たとえばbodyをbackground-color:red;にしても）、その後「ソース編集」ボタンを押すと、変更内容は消去されてしまいます。（一応ダイアログが出て、変更内容が失われても大丈夫かは確認してくれます）

個人的にはFirebugの編集方法をあまり使わないのと、やはり全選択＆コピーのメリットがあるので「ソース編集」を使っています。

なお実験としてライブ編集とソース編集を切り替えたり色々していたら、ソース編集ボタンを押してもライブ編集verのソース編集画面になったりしたので、あまり触りすぎずに自分が普段使う方法を決めておくのが良いと思います。