WordPressで簡単にスクリーンショット画像を貼り付ける

ブログにスクリーンショット画像を使用したいけど、どうやれば良いの？

こんにちはヤマケン（@noradezain）です。

ブログを効率的にかつスピーディーに運営するためには作業をルーティン化することが大切です。繰り返し行うような作業をルーティン化することでかなりの時間が短縮でき、浮いた時間をブログ内容の精査などに使うことによってより充実した内容に仕上がります。

時間と手間をかけずにスクリーンショット画像を載せたい

ブログを運営していると、説明や手順の工程を伝えるためスクリーンショット画像を使用した記事が自ずと多くなっていきますが、通常のやり方だと

・・・といった手順になることが考えられます。この中で「1.スクリーンショットを撮影」の段階でかなり手間と時間を有すると感じましたので効率的な方法を調べてみました。

複数の異なるモニターサイズの環境でスクリーンショットを撮影する場合や、スマホやタブレットなど小さな画面でスクリーンショットを撮影する場合、逆に27インチのiMacなど大きな画面でスクリーンショットを撮影する場合など、環境によってスクリーンショットのサイズが変わってしまうという問題点があります。

出来ることならどんな環境でも同じサイズでスクリーンショットを撮影して、ブログ全体に統一感をもたせたいと考えましたが、手動でウィンドウサイズを変えてしまうことは誤差が多くなり見栄えが良くありませんので、なるべく早い段階でこの作業を単純なルーティン化しておこうと考えました。

Google chrome を使用しているかたはchrome ウェブストアへ行き、検索欄に「Window Sizer」と入力してください。

Chromeに追加のボタンを押しますと以下のようなメッセージが出ます。

そうするとChromeの上部検索バーの横にWindow Sizerのアイコンが出ますので、そこにカーソルを合わせクリックします。

上記のような様々なウインドウサイズが表示されます。

ここから好きなサイズのものを選択すれば、どんなPC環境でも決まったサイズのウインドウでスクリーンショットを撮影することができます。

さらに「New size」をクリックすると自分の好きなサイズのウインドウも登録できますので、自分に適した設定にするとより効率的に作業が捗るのではないでしょうか。

スクリーンショットの撮影について

Windowsは

Macは

自分の環境はMacなのですが3番目のやり方でやるのが、後々の編集などのことを考えると一番効率が良いかと感じました。

スクリーンショットで撮影した画像について、画面上に補足や矢印などを入れて編集する場合はPhotoshopなどの画像編集ソフトで行いましょう。

特に画像に編集を加えず、トリミング（画像を切り取ること）だけで掲載するという場合はWordpressに備わっているメディア→ライブラリからトリミングすることが可能です。

メディア→ライブラリからトリミングしたい画像を選択します。そして画像下部にある「画像を編集」をクリックします。

次に「トリミング」を選択します。

トリミングをするためのガイドラインが出てきますので、好きな切り取り位置に設定できたらエンターを押します。

たったこれだけの作業で画像のトリミングができます。

ブログはコツコツと毎日ルーティンのように行うものですので、繰り返し行われれる作業や面倒臭いと感じている作業については、出来るだけ効率化する方法を用いることがもチーベーションを維持することにも繋がるのではないでしょうか。