画像のトリミングと回転・反転

メディアとして追加された画像に対し、トリミングを行って画像の一部分だけを取り出して表示するといったことが可能です。ここでは画像のトリミングを行う方法と回転/反転などを行う方法について解説します。

1.画像の編集画面
2.画像のトリミング
3.幅と高さの比率を固定してトリミング
4.画像の回転と反転
5.元の画像を復元

画像に対して編集を行うには、管理画面の「メディア」メニューの中にある「ライブラリ」メニューをクリックして下さい。

「メディアライブラリ」の画面が表示されます。

編集を行いたいメディアにマウスを合わせ、表示されたメニューの中から「編集」メニューをクリックして下さい。

メディアの編集画面が表示されます。画像の左下付近に表示されている「画像を編集」をクリックして下さい。

画像に対して編集を行うことができる画面が表示されます。

この画面にて画像のトリミングや回転といった操作を行います。

画像の位置部分だけを取り出すことをトリミングといいます。トリミングを行いたい場合は、表示されている画像の上でマウスをドラッグして範囲を指定して下さい。

選択した領域の幅と高さは画像右側の「選択範囲」というところに表示されています。この値を直接編集することで選択範囲の大きさを調整できます。

次にトリミングした画像をどの画像と置き換えるのかを指定します。画像をアップロードすると「大」「中」「サムネイル」の3つのサイズで画像が自動的に作成されます。この中のどの画像を新しくトリミングして作成した画像と置き換えるのかについて「すべての画像サイズ」「サムネイル」「サムネイル以外の全サイズ」から選択できます。

「すべての画像サイズ」を選択した場合は、トリミングした画像をオリジナル画像として改めて「大」「中」「サムネイル」の3つの画像が作成されます。「サムネイル」を選択した場合はサムネイルだけが作成されます。「サムネイル以外の全サイズ」を選択した場合は「大」と「中」だけが改めて作成されます。(いずれの場合も新しい画像が作成されるのは「大」「中」「サムネイル」に設定されている上限サイズなどの条件をクリアして画像の作成が可能な場合だけです)。

今回は「すべての画像サイズ」を選択しておきました。

選択範囲や変更の対象を選択しましたら、画像の上部に表示されているアイコンの中から一番左にある「トリミング」をクリックして下さい。

トリミングした画像が新しいオリジナル画像として画面に表示されます。

トリミング操作が終了しましたら画像左下に表示されている「保存」をクリックして下さい。

画像の保存が完了しました。

トリミングする時に選択範囲の幅と高さの比率を指定することができます。指定する場合はトリミングを行う前に先に幅と高さの比率を入力して下さい。下記では3対2にしてあります。

入力した比率を維持したままトリミングを行うには、「Shift」キーを押しながら範囲を指定して下さい。選択した範囲が3対2になるように自動的に調整されます。

サムネイルを作成する場合で幅と高さが1対1のサイズになるように選択したい場合は縦横比を1対1に指定しておくと便利です。

画像を編集する画面では画像を回転させたり反転させる機能が用意されています。画像の上に表示されているアイコン4つが左から順に「反時計回りに回転」「時計回りに回転」「垂直方向に反転」「水平方向に反転」となっています。

それでは例として「反時計回りに回転」を行ってみます。

画像が反時計回りの方向へ90度回転しました。

変更内容を保存するには画像左下に表示されている「保存」をクリックして下さい。

画像の保存が完了しました。

画像に対してトリミングを行ったり回転・反転を行った場合でも元のオリジナルの画像に復元することもできます。復元したい場合には画像の右にある「元の画像を復元」をクリックして下さい。

「画像を復元」をクリックして下さい。

画像の復元が完了しました。

このように画像に対して行った編集はいつでも元に戻すことができます。

AdminWeb