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. 「適用」をクリックします。

先日VPSで運用している別サイトでWordPrewwの再設定を行ったのですが、その際にちょっとハマった内容についてのメモです。

WordPressのURLをトップページに指定できない

そのサイトは、これまでは「wp」というディレクトリを作って、そこにWordPressをインストールしていました。つまり「http://hogehoge.com/wp」といったURLで運用していたわけです。

ただ今回WordPress入れ替えに伴って、「wp」の表示を省略して「http://hogehoge.com」というURLで運用しようと思いました。同様の作業は過去に何度も経験があったので、以下のページを参考にindex.phpと.htaccessをルートディレクトリにコピーするなどの作業を行いました

参考：WordPress を専用ディレクトリに配置する – WordPress Codex 日本語版

いつもなら上記ページの「既存のサブディレクトリをルートディレクトリとして表示する場合」の手順で問題なく動くはずなのですが、なぜかトップページは表示されるものの、個別の記事や投稿が404NotFoundになります。

どうもパーマリンク設定が反映されていないようで、デフォルトの「?P=1」などに戻すと表示されるのですが、それ以外だと表示できません。というわけで、どうやら.htaccessが動作していないようだ、というところまでは原因が絞り込めました。

で、今度は下記ページを参考にmod_rewriteやhttpd.confの設定を見直していたのですが、やっぱり直りません。

参考：mod_rewriteの設定(パーマリンク形式を変更した場合にエラー表示された場合) – WordPressの使い方

ここで完全に行き詰ってしまい、かなりの時間悩んでいました。が、色々やって解決してみたら原因は単純でした。やっぱりhttpd.confの設定でした……。

AllowOverrideの指定に注意

httpd.confを見直すと、.htaccessを有効にするために下記の設定を行っていました。

<Directory "/var/www/html/wp">
    AllowOverride All
</Directory>

しかし、よく考えたらindex.phpと.htaccessは一つ上のディレクトリ（/var/www/html）にコピーしたわけですから、「/var/www/html/wp」でAllowOverride Allしてもその下層にしか反映されていません。

よって以下のようにDirectoryの指定を書き直しました。

<Directory "/var/www/html">
    AllowOverride All
</Directory>

これで個別の投稿や記事が、カスタム構造のパーマリンクでも問題なく表示されるようになりました。

というわけで、既存のディレクトリからルートディレクトリにURLを変更する場合は、AllowOverrideの指定に注意しないといけないという話でした。覚え書きな記事ではありますが、もし同じような現象で困っている方がいればお役に立てば幸いです。

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側で調整する必要があるので注意してください。