WordPressでは、ただ単純に画像ファイルをアップロードして投稿に挿入するだけではなく、自動で複数サイズの画像ファイルを作成したり、画像のサイズを変更したりする事もできます。
※目次をクリックすると目次の下部にコンテンツが表示されます。
- １．大きい画像をアップロードすると自動で小さいサイズの画像を作成？
- ２．WordPressで画像の編集もできる
- ３．自動作成された中（300ピクセル幅）サイズ画像を投稿に挿入して、リンク先にオリジナルの画像ファイルを指定
大きい画像をアップロードすると自動で小さいサイズの画像を作成？
１）ファイルのアップロード方法
WordPressの管理画面からファイルをアップロードするには、下記３つの方法があります。（もちろん、SFTPなどのファイル転送ツールを使ってアップロードする事もできます。）
①「メディア」→「新規追加」
②「メディア」→「ライブラリ」→「新規追加」
③投稿または固定ページの編集画面→「メディアを追加」
２）管理画面からアップロードした場合の保存場所
WordPressディレクトリの”wp-content/uploads/西暦年/月”ディレクトリ内に保存されます。
３）アップロード後に作成されるファイル
例えば、1575×517のサイズのimagetest.pngという名前の画像ファイルをアップロードすると、アップロード先のディレクトリに、３つの小さいサイズの画像ファイルも一緒に保存されています。
imagetest.png
imagetest-1024×336.png
imagetest-300×98.png
imagetest-150×150.png
４）なぜ小さいサイズの画像ファイルが自動で作成されるか？
WordPressでは、画像サイズの上限設定が大、中、サムネイルと３つの種類ごとに決まっていて、この上限設定より大きい画像サイズをアップロードすると自動でそれより小さい画像サイズのファイルを作成してくれるようです。
①画像サイズの上限設定
管理画面の「設定」→「メディア」
WordPressの管理画面からファイルをアップロードするには、下記３つの方法があります。（もちろん、SFTPなどのファイル転送ツールを使ってアップロードする事もできます。）
①「メディア」→「新規追加」
②「メディア」→「ライブラリ」→「新規追加」
③投稿または固定ページの編集画面→「メディアを追加」
２）管理画面からアップロードした場合の保存場所
WordPressディレクトリの”wp-content/uploads/西暦年/月”ディレクトリ内に保存されます。
３）アップロード後に作成されるファイル
例えば、1575×517のサイズのimagetest.pngという名前の画像ファイルをアップロードすると、アップロード先のディレクトリに、３つの小さいサイズの画像ファイルも一緒に保存されています。
imagetest.png
imagetest-1024×336.png
imagetest-300×98.png
imagetest-150×150.png
４）なぜ小さいサイズの画像ファイルが自動で作成されるか？
WordPressでは、画像サイズの上限設定が大、中、サムネイルと３つの種類ごとに決まっていて、この上限設定より大きい画像サイズをアップロードすると自動でそれより小さい画像サイズのファイルを作成してくれるようです。
①画像サイズの上限設定
管理画面の「設定」→「メディア」
“画像サイズ”
投稿本文に挿入するときに使われる上限寸法のデフォルト値
・サムネイル 150×150
・中サイズ 300×300
・大サイズ 1024×1024
②1575×517のサイズのimagetest.pngをアップロードした場合
下記のようにオリジナルのファイル以外に、大、中、サムネイル用のサイズの画像ファイルを自動で作成
imagetest-1024×336.png
imagetest-300×98.png
imagetest-150×150.png
③700×230のサイズのimagetest2.pngをアップロードした場合
下記のようにオリジナルのファイル以外に、大、中、サムネイル用のサイズの画像ファイルを自動で作成
imagetest2-300×98.png
imagetest2-150×150.png
WordPressで画像の編集もできる
１）画像の編集方法
アップロード済みの画像ファイルの編集や投稿に挿入済みの画像の編集を行う事ができます。
①アップロードしたファイルの画像の編集
管理画面の「メディア」→「ライブラリ」
→編集対象の画像にカーソルをあて、「編集」をクリック
→「画像編集」をクリック
・画像の拡大縮小
画像のサイズを変更すると、アップロード先のディレクトリ内では下記のように元の画像ファイルは保持されたまま、別の画像ファイルが作成されます。
元の画像 imagetest.png
変更後 imagetest-e1378868563189.png
・元の画像を復元
画像の拡大縮小を実行すると、”元の画像を復元”というリンクが表示されるようになり、元の画像にすぐに戻す事ができます。
②投稿に挿入した画像の編集
投稿または固定ページの編集画面
→ビジュアルエディタに切り替える
→挿入した画像が表示されるので、画像をクリックし、左上の”画像を編集”をクリック
画像のサイズ、配置、テキストの回りこみ、その他様々な項目を設定できます。
アップロード済みの画像ファイルの編集や投稿に挿入済みの画像の編集を行う事ができます。
①アップロードしたファイルの画像の編集
管理画面の「メディア」→「ライブラリ」
→編集対象の画像にカーソルをあて、「編集」をクリック
→「画像編集」をクリック
・画像の拡大縮小
画像のサイズを変更すると、アップロード先のディレクトリ内では下記のように元の画像ファイルは保持されたまま、別の画像ファイルが作成されます。
元の画像 imagetest.png
変更後 imagetest-e1378868563189.png
・元の画像を復元
画像の拡大縮小を実行すると、”元の画像を復元”というリンクが表示されるようになり、元の画像にすぐに戻す事ができます。
②投稿に挿入した画像の編集
投稿または固定ページの編集画面
→ビジュアルエディタに切り替える
→挿入した画像が表示されるので、画像をクリックし、左上の”画像を編集”をクリック
画像のサイズ、配置、テキストの回りこみ、その他様々な項目を設定できます。
自動作成された中（300ピクセル幅）サイズ画像を投稿に挿入して、リンク先にオリジナルの画像ファイルを指定
画像を投稿に挿入する場合は、画像サイズをどのぐらいのサイズにして、どのように配置するか決める必要があります。
WordPressでは、大きいサイズの画像ファイルをアップロードした場合は、自動で中サイズ（300ピクセル幅）の画像ファイルも作成してくれるので、下記のような設定は簡単に実施できます。
挿入する画像サイズ：300ピクセル幅
画像のリンク先 ：オリジナルの大きいサイズの画像ファイル
以下、画像の挿入手順の例を示します。
●投稿に画像ファイルを挿入する手順
①画像を挿入する位置にカーソルを合わせる。
②”メディアを追加”ボタンをクリック。
③挿入する画像選択を選択
画像ファイルを選択すると右側のウィンドウに画像ファイルの詳細情報が表示されます。
④”添付ファイルの詳細”ペインでタイトル、キャプション（画像の下に表示される）、代替テキスト、説明の項目を適宜設定
⑤”添付ファイルの”表示設定”ペインで配置を設定
・なし
配置設定なし。画像は左。テキスト回り込みなし。
・左
画像は左。テキストは右に回りこむ。
・中央
画像は中央。テキストは画像の両側に回りこまない。
・右
画像は右。テキストは左に表示される。
⑥”添付ファイルの”表示設定”ペインで”サイズ”と”リンク先”を設定
下記画像ファイルを挿入する場合の例です。
imagetest2.png（オリジナル700ピクセル幅）
imagetest2-300×98.png
imagetest2-150×150.png
ここでは、挿入する画像サイズは300ピクセル幅、リンクはオリジナル画像にするので、下記のように指定します。
リンク先：”メディアファイル”を選択
サイズ ：中－（300×98）
⑦”投稿に挿入”ボタンを押下
下記のように、挿入された画像ファイルが300ピクセル幅、リンク先がオリジナルの大きい画像として画像が挿入されました。
<a href=”http://example.com/wp-content/uploads/2013/09/imagetest2.png”><img src=”example.com/wp-content/uploads/2013/09/imagetest2-300×98.png” alt=”imagetest2″ width=”300″ height=”98″ class=”alignleft size-medium wp-image-725″ /></a>
WordPressでは、大きいサイズの画像ファイルをアップロードした場合は、自動で中サイズ（300ピクセル幅）の画像ファイルも作成してくれるので、下記のような設定は簡単に実施できます。
挿入する画像サイズ：300ピクセル幅
画像のリンク先 ：オリジナルの大きいサイズの画像ファイル
以下、画像の挿入手順の例を示します。
●投稿に画像ファイルを挿入する手順
①画像を挿入する位置にカーソルを合わせる。
②”メディアを追加”ボタンをクリック。
③挿入する画像選択を選択
画像ファイルを選択すると右側のウィンドウに画像ファイルの詳細情報が表示されます。
④”添付ファイルの詳細”ペインでタイトル、キャプション（画像の下に表示される）、代替テキスト、説明の項目を適宜設定
⑤”添付ファイルの”表示設定”ペインで配置を設定
・なし
配置設定なし。画像は左。テキスト回り込みなし。
・左
画像は左。テキストは右に回りこむ。
・中央
画像は中央。テキストは画像の両側に回りこまない。
・右
画像は右。テキストは左に表示される。
⑥”添付ファイルの”表示設定”ペインで”サイズ”と”リンク先”を設定
下記画像ファイルを挿入する場合の例です。
imagetest2.png（オリジナル700ピクセル幅）
imagetest2-300×98.png
imagetest2-150×150.png
ここでは、挿入する画像サイズは300ピクセル幅、リンクはオリジナル画像にするので、下記のように指定します。
リンク先：”メディアファイル”を選択
サイズ ：中－（300×98）
⑦”投稿に挿入”ボタンを押下
下記のように、挿入された画像ファイルが300ピクセル幅、リンク先がオリジナルの大きい画像として画像が挿入されました。
<a href=”http://example.com/wp-content/uploads/2013/09/imagetest2.png”><img src=”example.com/wp-content/uploads/2013/09/imagetest2-300×98.png” alt=”imagetest2″ width=”300″ height=”98″ class=”alignleft size-medium wp-image-725″ /></a>