【Word Press】ブログの画像を適切なサイズに編集する方法

 

 

このような疑問に答えていきます。

 

 

この記事を書いている人

 

みなさんは画像のサイズは気にしていますか？

 

 

色々調べても使っているテーマによって画像サイズは違うし、ぶっちゃけサイズの決まりはありませんでした。

 

しかし、画像の容量が大きいとサイトスピードにも影響するので、今回は無料で使えるツールを使ってブログに使う画像を、最適にする方法を解説していきます。

 

ブログによく使われる画像比

 

ブログによく使わられる画像比は「３：２」「４：３」または「１６：９」が多いようです。

 

これは「３：２」「４：３」は写真に多く使われ、「１６：９」はYou Tubeなどのサムネイルに使われているからです。

 

 

それでは次から自分のブログに使う最適なサイズを測って、編集していきましょう。

 

自分のブログに最適な画像サイズを調べる方法

 

自分のブログに使う画像サイズを測るのには、Google拡張機能の「Page Ruler Redux」を使います。

 

Page Ruler Reduxを取り込む

 

「Chromeに追加」をクリック

 

 

「拡張機能を追加」をクリックして取り込みます。

 

 

ものさしのマークがでたらOKです。

もし出なかったら横のマークをクリックしピンマークをクリックすれば表示されます。

 

 

自分のブログを使ってサイズを測る

 

それではここから自分のブログを使ってサイズを測りましょう。

 

自分のブログの記事ページの見出しの幅を測ります。

※記事作成の画面ではなく、プレビュー画面です。

 

先程のものさしのアイコンをクリックすればカーソルが十字キーに変わるので見出しの両端をクリックします。

 

 

見出しの幅が「728」だと分かりました。

 

 

それでは画像をサイズに合わせて作りましょう。

 

ブログに貼る画像のサイズを合わせる方法

 

それでは画像サイズを合わせて記事に貼り付けましょう。

 

ここで画像を編集しないで貼り付ける場合はプラグインの「EWWW Image Optimizer」で貼り付けられます。

 

プラグイン「EWWW Image Optimizer」での貼り付け方

 

「EWWW Image Optimizer」は画像を劣化させないで投稿時に、自動で画像の容量を圧縮してくれるプラグインで最大の画像サイズも設定できるのでとても便利です。

 

プラグインのインストール方法は【Word Pressをインストールしたら最初に入れときたいプラグインを解説】を参考にしてください。

 

「EWWW Image Optimizer」の設定で画像サイズを設定します。

 

 

設定画面の「リサイズ」から「幅の上限」に測った数値を入力して「変更を保存」をクリックしましょう。

 

それから普段通りに画像を貼り付ければOKです。

 

それでも画像の容量が大きく、もっと圧縮したい場合は1度「TinyPNG」を使って圧縮してからアップするといいです。

 

画像を編集してから貼り付けたい場合

 

先程、画像の横幅が分かったのですが縦の長さは画像比で違うのでツールを使って調べます。

（計算が得意な人は計算してもいいですよ）

 

Ocadwebさんの「アスペクト比計算ツール」を使います。

 

先ほど測った横幅を入力すると、自動で画像比に合わせた縦のサイズが表示されます。

 

今回は「３：２」の画像を使ってサイズ合わせと編集をしたいと思います。

 

使う画像についてはこちらを参考にしてみてください。

【無料７選】タダで使えるおすすめフリー素材・画像２０２０年版

 

画像のサイズ合わせと編集は、無料の画像編集サイトの「Canva」を使って編集します。

 

Canvaの使い方についてはコチラを参考にしてください。

【無料】画像編集サイト『Canva』を使って簡単にアイキャッチ画像を作ろう

 

 

先ほど調べた画像サイズ「３：２」「730：487」を入力して編集画面に移りましょう。

 

 

使う画像をアップロードしましょう。

 

 

画像のサイズを合わせて編集します。

 

 

 

画像圧縮のプラグインを導入していない人は「TinyPNG」で圧縮してからアップすればOKです。

 

 

これで完了です。

 

 

まとめ：画像のファイルサイズには気をつけよう

 

この記事では、画像をちょうどいいサイズに合わせて貼り付ける手順を解説しました。

 

 

最後までお付き合いありがとうございました。