WordPressで使用する画像を編集するには?|スクリーンショットを撮る・加工・トリミングなど

WordPressで使用する画像を編集するには?|スクリーンショットを撮る・加工・トリミングなど

WordPressで使用する画像を編集するには?
スクリーンショットを撮る・加工・トリミングなど

WordPressでブログ(ウェブページ)を作成するにあたり、訪問者に『画像』を見てもらう事は内容を説明する上で非常に重要です。写真を撮影してその写真を加工・切り取り(トリミング)・文字入れや拡大・縮小など・・・見やすく、分かりやすく文章を補佐する意味で『画像』を表示して見てもらう事は重要かと思います。

特に最近(2018年時点で)ではスマホでのネット閲覧の機会が非常に多くなり、文章を読むより画像や動画での内容理解が多くなっています。文章ばかりより画像で実際のモノや手順を見て閲覧者が理解を深めるケースが多くなっており、何かを伝えるには画像は必須です。

WordPressのブログ・ウェブサイトに内容を説明する画像を加えてゆく事で、訪問者の増加と副業収入の成約率アップが見込めますので、スクリーンショットの撮り方から画像の加工方法、文字入れ、WordPressへのアップロード方法や画像の表示スピードアップ・画像のサイズ縮小など一通りマスターしておき、作業の効率化を図りましょう。

  • スクリーンショットを撮る方法
  • 画像をトリミングする方法
  • 画像を拡大・縮小する方法
  • 画像に文字入れをする方法
  • 画像を横並びにする方法
  • 画像をWordPressにアップロードする方法
  • 画像の容量を縮小する方法
  • 画像の表示を遅らせページ表示を速くする

などなど、全て無料のソフト/アプリを利用します。
上部「目次」を活用してください。

【詳しくはボタンをクリック】

副業で即日収入・スマホで副業出来ます
【詳しくは画像をクリック】

主婦・女性に人気の在宅副業特集です
副業で1日1万円稼ぐには?|日給1万円稼げる安全副業・サイドビジネスで1日1万円を稼ぐ事は可能か?ネットが発達した現代では難しい事ではありません。 副業-スマホやパソコンで時給の高い在宅副業空いた時間に入力作業で稼ぐ事が出来る完全在宅型の副業ビジネスです。全国から応募お待ちしています。 副業の募集|契約金付き文字入力の副業「在宅副業」の募集。 副業で12万円~18万円 本業として月収35万円~50万円程度、18歳以上の方。 デコシール副業の募集|シール貼りの在宅副業女性・主婦NO.1人気の副業「やってみたい」「私にもできそう」と大変人気が高まっている副業です。
副業の募集|テープ起こしで高収入・契約金付き自宅の副業で稼ぎたい方を募集しています。時給換算で4200円~のテープ起こし・文章起こし業務です。在宅副業として月収50万円も可能。 副業の募集|封筒の発送業務で毎日1万円稼ぐ発送した時点で報酬が確定!ご自宅で”封筒の発送”をして頂く副業の募集。1通あたり1000円~高い単価が自慢の副業です。高齢者にも人気! 葉書発送で稼ぐ時給の高い副業副業としては高額の報酬も稼げる葉書の発送のお仕事。ご自宅作業~発送・1通あたり800円!副業で稼ぎたい方を全国から募集中! 副業の募集|塗絵製作の在宅副業-緊急募集在宅で副業をお探しの方、塗絵製作の緊急募集です。簡単な作業で報酬が高めな副業の為、とても人気が有ります。初心者の方も大歓迎!

スクリーンショットを撮る方法
キーボードのPrintScreenを押す

スクリーンショットを撮る

スクリーンショットを撮るには
PrintScreenキーを押します。

そのあと「フォト」か「ペイント」で
余計な部分をカット(トリミング)しましょう。

矢印フォトでトリミングする

フォトでクロップ(トリミング)する

Windows10のアプリ「フォト」でクロップ(トリミング)するのが一番手っ取り早く簡単です。スクリーンショットを撮った画像ファイルをダブルクリックすると「フォト」が立ち上がるよう設定しておくと便利です。トリミング指定で画像が自動でクローズアップされる為、正確に画像を切り取る事が可能です。

フォトでクロップ(トリミング)した画像「フォト」でクロップ(トリミング)しました。

右下に表示される「コピーを保存」を押して切り取った画像を保存しましょう。

矢印ペイントにスクショを貼り付ける

PrintScreenを押しても、「スクリーンショットを保存しました」とWindows上で通知されなかった場合、(実は指定したフォルダに保存されてはいますが)Windowsの「ペイント」を立ち上げて「貼り付け」しましょう。

①PrintScreenを押す
②「ペイント」を立ち上げる
③左上の「貼り付け」を押す

ペイント 貼り付け

ペイント 貼り付け結果

「貼り付け」を押すだけでPrintScreenを押した時点でのスクリーンショットを取得する事が出来ます。ペイントにもトリミングする機能は有りますのでペイント上でトリミングしても良いですし、ペイント上で一旦画像を保存してフォトに移動し、フォトのトリミング(クロップ)を利用しても良いです。個人的には「フォト」のトリミング(クロップ)が使い易くオススメ。

画像を編集(文字入れ・サイズ変更)
おすすめは「Photo Scape」

Photo Scape
└当方はコレを使用しています。

複数の画像を縦・横に連結出来る機能を使いたくて、インストールさせて頂いています。その他一通り機能は揃っていますので、Windowsで画像編集するならダウンロードしておいて損は無いです。

アダルトグッズ通販
└画像横並びの例として

Photo Scapeは・・・
一通りの作業が無料でできます。

  • 画像の拡大・縮小ができる
  • 文字入れ・直線・円や自由曲線など描ける
  • 画像の中に画像を重ねられる
  • GIFアニメを作成できる
  • Youtube動画でのヘルプ完備
    ヘルプの動画を見てみる

photoscape 編集画面

ちなみにこの「fukugyo.business」も全てPhoto Scapeを使用させて頂いて画像のリサイズや文字入れ、枠線の追加、各種の画像編集を行い保存し、ワードプレスにアップロードしています。

矢印画像の拡大・縮小

スマホで撮影した写真などは、WordPressのブログで扱うにはサイズが大きすぎる場合もあり、適切なサイズにリサイズする必要があります。WordPressに大きいサイズのままアップロードすると画像の容量も大きくなり表示スピードが遅くなってしまう事も多いので、適切なサイズに変換する事を推奨します。

(当方はたいてい、横640ピクセルにします)

PhotoScape リサイズ(1)
ホーム→リサイズを押す

PhotoScape リサイズ(2)
変換したいサイズを指定できます。

矢印画像に文字を挿入する方法

画像に文字を入れるには


①編集する画像をフォルダ/ディレクトリから呼び出す
②左下「オブジェクト」を選択

テキスト入力
③『T』マークを押す
(その他吹き出しを入れたりも可能)

テキストのスタイル入力・選択
④挿入するテキストを入力
⑤文字の大きさを指定
⑥影やアウトラインを指定

右上の「OK」を押すと文字列がグラフィックの「ユニット」として作成されるので、マウスでその文字列ユニットをドラッグして文字を挿入したい場所に置きます。画像の保存をお忘れなく!

文字ユニットをドラッグして配置する

Photo Scapeでは画像に文字を挿入出来るほか、矢印線を引っ張って描く、各種図形の作成~画像への挿入(上書き)から画像の中に画像を挿入するなどの各種の編集も可能です。

画像を上下並び・横並びに表示
PhotoScapeの「結合」で簡単です

PhotoScapeの便利な機能、
画像の「結合」について。

PhotoScape 結合

基本的には、マウスで画像を1枚ずつドラッグするだけ。
上下でも左右でも、画像を結合して保存できます。

あらかじめ「リサイズ」でサイズを揃えておくと
楽ですので、結合する画像を縦横揃えたサイズにしましょう。

  • 結合した画像を更にリサイズ可能
  • 結合した画像は「-horz」ファイル名になる
  • 上下/左右に結合できる

など、便利に使えます。

結合サンプル

結合サンプル(セガサターンのゲーム)
スクリーンショットの外周をカットして
右に1枚、下に2枚結合しました。
濃い青の枠線を追加しただけ。

複数の画像を1枚の画像として加工して(結合して)、更にサイズを変更したり、説明する文字を挿入する、画像や図形を付け加えるなど画像加工・編集を簡単かつ自由に行える(しかもこのPhoto Scapeは無料です!)ので、当方は便利に使わせて頂いています。

WordPressで画像を挿入する
メディアを追加し、投稿に挿入

画像の作成・編集が終わったらWordPressのブログ投稿に画像を挿入しましょう。WordPressのブログ編集では「メディア(画像や動画)を追加」して、「投稿に挿入」します。

ワードプレス 画像挿入(メディア追加)
①WordPress記事作成エディタです。
メディア(画像)を追加します

ワードプレス メディア(画像)追加
②ファイル名でアップロードするか
ドラッグ&ドロップでWordPressに画像を追加します。

ワードプレス 画像挿入
③画像のタイトル、代替テキストなどを記入、
表示場所やサイズを指定します。

④最後に「投稿に挿入」を押します。
すると、投稿に下記のようなタグが挿入されます。
※あらかじめ画像を挿入する場所にカーソルを移動しておく

WordPressで画像を挿入した場合、複数のガジェットやブラウザからプレビューしてみる事を強く推奨します。パソコンから見て正しく意図した通り表示されていても、スマホから見た際に縦方向に潰れていたり、画像の部分だけはみ出して横にスクロールしてしまったりしている事が有ります。

WordPressの「テーマ」との相性だったり、画像のサイズが大きすぎる、表示位置を間違えて指定してしまっているなど原因は様々ですが・・・投稿内容をパソコンで閲覧する、スマホやタブレットなど別のガジェットを使用して閲覧してみる、GoogleChromeだけではなくInternetExplorerから、FireFoxから、Edgeから、SafariやOperaから見てみる・・など複数の閲覧手段で画像が意図した通り正しく表示されているか確認しておきたいものです。

└画像が表示されない時は・・┘

矢印画像の横に文字を表示する

画像を左(もしくは右)、
文字を右(もしくは左)に表示したい場合・・

上記のように記述しますが・・スマホの場合横375ピクセルくらいしか使えませんので、画像を横120ピクセルくらいにしないと右側に文字を書けない事になります。

逆に画像が350ピクセル程度で、パソコンでは右側に文字を記入して表示させている場合はスマホで閲覧した際には自動的に画像が上、文字が下に表示されます。

スマホで閲覧される事が多いページの場合には、左に画像・右に文字を表示させるのはあまり現実的とは言えず、かえって訪問者の利便性を損なう場合も多いので注意が必要です。

画像の容量を減らす方法
画像を「減量」(減算)して表示スピードを速める

さて、Wordpressでのブログ作成に欠かす事のできない「画像」の加工や文字入れとWordPressへのアップロードなどに触れてきましたが、そもそも画像の”容量”について考えた事はおありでしょうか?

その昔、8ビットパソコンでは64KBしかRAM容量はありませんでした。32ビットパソコンの黎明期でも2MB、拡張して4MBのメモリ。2018年現在では8GBのメモリが有れば快適、などと言われます。

WordPressでも画像のアップロードは、1回で100MBまでの画像を扱えるようになっています。ですが画像の容量はページの表示速度の速い/遅いに密接に関係しており、画像の美しさを損なう事なく容量だけ減算できれば一番良いです。画像の容量を減らし、ページの表示速度が速くなれば訪問者にとってプラスであり、検索エンジンからの評価も高くなり・・結果的に検索順位が上がり、訪問者の増加=副業収入の増加にもつながるのですから。

画像を最適化する

このルールは、ページ上の画像を最適化して、視覚的な品質に大幅な影響を与えずにファイルサイズを削減できることを PageSpeed Insights が検出した場合にトリガーされます。

概要
画像は、ページをダウンロードする際のデータ量の大部分を占めることがよくあります。そのため、画像を最適化するとデータ量が大幅に減ってパフォーマンスが改善することが少なくありません。ブラウザがダウンロードしなければならないデータ量が減るほど、クライアントの帯域幅の競合が少なくなり、ブラウザでコンテンツをダウンロードして画面に表示するまでの所要時間を短縮できます。

推奨される解決方法
画像アセットの最適な形式と最適化方法を見つけるには、エンコードするデータの種類、画像形式の機能、画質の設定、解像度といった、さまざまな項目にわたる慎重な分析が必要です。また、画像をベクター形式で配信するのが最適かどうかや、必要とする効果を CSS を使って実現できるかどうか、端末の種類に合わせて適切に拡大縮小されたアセットを配信する方法についても検討する必要があります。

引用:PageSpeed Tools Insights

WordPressで使用する画像の容量の減算(圧縮・最適化)には、オンラインツールを使用する方法と、プラグインをインストールして最適化する方法の2つが有ります。

どちらも簡単に利用出来ますので、画像のスリム化・最適化を行っていない方は取り組んでみてください。ページの表示速度の向上=副業収入の増加、との考えに徹して頂ければと思います。

矢印画像圧縮オンラインツール

これらはオンラインで使用でき、ダウンロード/インストールの必要はありません。希望する画像をドラッグ&ドロップするだけで、画像の容量を減らして最適化してくれます。画像を保存し直してWordPressにアップロードすれば良いのです。

矢印画像圧縮・最適化プラグイン

EWWW Image Optimizer
└プラグイン新規追加で検索してください

EWWW Image Optimizerは今までアップロードした画像と、これからアップロードする画像の両方に対応したWordPressのプラグインです。JPG,PNG,GIFに対応しています。

EWWW_image_optimizer 一括最適化

プラグイン「EWWW Image Optimizer」をインストールすると、「メディア」の部分に「一括最適化」という項目が現れます。そこから既存の、「アップロード済みの画像」も最適化・減算が可能です。

これからアップロードする画像は
自動的に最適化されます。

└EWWW Optimizer設定について┘

Basic→Remove Metadataにチェック
Convert→コンバージョンリンクを非表示にチェック
└設定はこれだけで構いません。

画像の表示を遅らせGoogleを騙す
ページの表示速度を見掛けだけ向上する

画像は素のまま表示させると、「ページの表示速度」に悪影響を与えます。全て順番に上から下まで表示すると、Googleから「ページの表示速度が遅い!」とクレームを付けられ、検索順位が下がる・・と言われています。これを回避する為に画像だけ後から表示して、表向きだけ高速化して見せかける手法がポピュラーです。

※ただし・・
2020年をメドに5G通信が実現されれば、モバイル端末でも2018年より大容量のデータを高速で通信する事が可能になります。つまり、「ページの表示速度が遅い」という価値判断基準は無くなるかも。
矢印Lazy Load系プラグインで画像表示を遅延

Lazy Load
└画像を遅らせて表示するプラグイン

Jetpack
└画像を遅延表示させる機能有り

Jetpack設定

この「fukugyo.business」はLazy Loadを使用。
Jetpack内にも同様の機能が有りますね。

ただこの「画像の遅延表示」、ページのスクロールを進めてもなかなか画像が表示されず、かえって利便性が損なわれている印象も受ける事があります。ですから他のページでこういった「画像を遅延表示させて、Google Speed Insightで表向きだけ・見掛け上だけの得点稼ぎ」を止める、つまり画像を遅延表示させるプラグインを停止している例も有る事は申し添えておきます。