WordPressのscreenshot.pngを縦横比4:3で作成する簡単な方法

皆さんスクリーンショットどうやって作ってますか?
OSの標準機能を使うだけで画像はすぐに用意できますね。

  • Windowsなら「Alt + PrintScreen」してから画像ソフトにペースト
  • Macなら「Ctrl + Shift + 4 + Space」で保存先を選択

私も最初はこの方法で作っていました。
ただ、これだとスクリーンショットの縦横比を合わせるのが面倒なんですよね。

「PhotoShopとかGimpで加工すればいいじゃん」

はい、確かにその通り・・・
なんですけど、初めから縦横費は固定すればもっと楽じゃね?

と言うことで、簡単な方法をまとめました

必要なモノ

  • リサイズツール
  • キャプチャ用のブラウザプラグイン

手順

まず、FireFoxにブラウザをキャプチャするPluginをインストールします

Pearl Crescent Page Saver Basic
https://addons.mozilla.jp/firefox/details/10367

インストールして再起動すると、ブラウザの右上にカメラマークが出現します。
pearl-crescent-page-saver-basic
次に、ブラウザのウィンドウサイズを4:3にします。
ブラウザを指定したサイズに変更するには、

  1. FireFoxでresizeMyBrowserを開く
  2. 右側の「create a new preset」をクリック
  3. 縦横費4:3になるようにサイズ(例: Width = 1080 / Height = 810)を入力
  4. 追加された「1080 x 810」のパネルをクリック
    resize-my-browser
    新しいウィンドウが指定サイズで起動するので、キャプチャしたい自分のWordPressサイトを開いてカメラマークを押して保存先を指定すれば4:3の画像が用意できます。

あとはリサイズツールを使って縦横比を固定したまま「880 x 660」にリサイズすればOK!(WoerdPress3.8からスクリーンショットのサイズが「600 x 450」から「880 x 660」に変更になりました)

リサイズについては簡単なので詳細は割愛しますが、Macなら標準搭載されている「プレビュー」でリサイズできます。

  1. 保存したファイルをクリックしてプレビューで開く
  2. 「ツール」->「サイズを調整」を選択
  3. 縦横比固定にチェックして幅に600を入力

なぜリサイズが必要なのか?

600 x 450をいきなり作ってしまうと、小さすぎるからです。
スクリーンショットは全体像が写っていないとあまり意味がありませんので、テーマの見栄えが何となく分かるモノを作る必要があるわけですね。

4:3の比率一覧

計算するのが面倒なので縦横比4:3で使えそうなサイズ一覧も作っておきました。
ちなみに、よく使ってるのは1080 x 810です。

1200900
1080810
960720