いつも週刊メルマガをご覧頂き、誠にありがとうございます。
今週は、CMSproサポート担当の沖野が担当させていただきます。
************************************************
☆★目指せ!トリミングマスター★☆
CMSproサポート担当: 沖野直人
*************************************************
突然ですが、みなさん「トリミング」って言葉は聞いたことありますか?
「あ~ワンちゃんの!」
と思われた方が多いんではないでしょうか。
犬派の沖野としては、犬の話で盛り上がりたいところではありますが、
今回は、普段のHP更新に役立つ方の画像のトリミングのお話をしたいと思います。
まず、「画像のトリミングとはなんぞや?」と。。。
トリミングとはつまり、画像やお写真の一部を切り出すことです。
もっと簡単にいうと写真の必要な部分だけを選択できるということです。
画像のトリミングをするには、従来まではフォトショップや
アプリなどの無料の画像加工ソフトを使うことが一般的でした。
が、WordPressが賢くなった今、なんとなんとWordPressの中にトリミング機能が
搭載されているんです!!
それでは、手順をご紹介致します。
■ トリミング方法手順 ■
*************************************************
- 【 1 :管理画面にログインし画像をアップロード 】
まずは、お写真をWordPress内に収納することが必要です。
以下をご参考いただきながら、アップロードを完了させてください。※「画像・PDFをアップロードする」
http://fa1.info/new_uploa - 【 2 :トリミングしたい写真を選択 】
つぎに、管理画面の左側にある「メディア」< 「ライブラリ」をクリック。
すると、いままでアップロードしたお写真の一覧がズラ~っと表示されますので、
トリミングしたい写真を選択 ▼ご参考画像
http://fa1.info/wp-content/themes/million/img/merumaga_trimming2.jpg
- 【 3 :トリング範囲を決める 】
トリングしたい写真を選択すると、画面の左側に選択した写真が表示され、その下側に
「画像を編集」ボタンがありますのでそちらをクリックしてください。
▼ご参考画像
http://fa1.info/wp-content/themes/million/img/merumaga_trimming3-1.jpgその後の画面で、写真の上でトリミングしたい(選択して残したい)範囲を、
左クリックを押しながらマウスを動かしてドラッグしてみてください。
(全体に選択された範囲がハイライトされます)
▼ご参考画像
http://fa1.info/wp-content/themes/million/img/merumaga_trimming3-2.jpg - 【 4 :トリミング完了! 】
範囲がハイライトされた状態で、テトリスのような左上のトリミングのマークをクリックし、
最後に保存ボタンを押してトリミング完了となります。
▼ご参考画像
http://fa1.info/wp-content/themes/million/img/merumaga_trimming3-3.jpg
http://fa1.info/wp-content/themes/million/img/merumaga_trimming4-1.jpg
http://fa1.info/wp-content/themes/million/img/merumaga_trimming4-2.jpg
********************************************
■ トリミングマスターを目指すなら ■
もう1つ、横幅と高さの比率を設定してトリミングすることも可能です!
【幅と高さの比率を固定してトリミング】
**********************************************
上記の【 1 】と【 2 】の作業を行ってください。
その後トリミングしたい写真を選択し、「画像を編集」ボタンをクリック。
次に、トリミングを行う前に、画像のトリミング縦横比:の欄に数字を入力し、
幅と高さの比率を決めてください。
▼ご参考画像
http://fa1.info/wp-content/themes/million/img/merumaga_trimming_master-1.jpg
比率を決めたら、
トリミングする領域を選択する時に
[Shift]キーを押したままドラッグして範囲を決めることで、
自動的に指定した縦横比になるようになります。
▼ご参考画像
http://fa1.info/wp-content/themes/million/img/merumaga_trimming_master-2.jpg
http://fa1.info/wp-content/themes/million/img/merumaga_trimming_master-3.jpg
http://fa1.info/wp-content/themes/million/img/merumaga_trimming_master-4.jpg
参考例:【比率を2対1とした場合、幅が406pxで高さが203pxとなります】
**********************************************
いかがでしたでしょうか?
その他にも、回転ツールや反転ツールも同時に搭載されています。
最初は少しクセがある機能かもしれませんが、慣れてくると自由に
写真を切り取ることができますので、HP更新の幅が広がると思います。
ぜひとも、色々と積極的に使ってみてください!