[WordPress.com] 画像の一部を切り取ったり、拡大縮小したりして、思い通りの部分をスライダー用の画像として使用する - WordPress.com 標準の画像編集機能 –

WordPress.com には、2013年9月26日現在、46 個のスライダーつきテーマがあります。

AccessMenuBarApps-3
Post Slider WordPress Themes at WordPress.com

スライダー(または「投稿スライダー」と呼ばれているようです。)とは、例えば、以下のようなものです。

スライダーで表示される画像は、だいたいが投稿記事のアイキャッチ画像です。

スライダーに適用されるアイキャッチ画像のサイズは、幅が 1000px 以上とかの大きめのものを設定しておけば、概ね OK だと思うのですが、テーマの種類によっては、小さめのサイズだったりするとスライダー自体が表示されなかったり、画像が縦横に歪んだり、小さく表示されたり、といった不具合が生じることがあります。

例えば、テーマ「Academica 」の場合は、スライダーに適用されるアイキャッチ画像のサイズを 960 px ✕ 300 px に調整しておくといい感じで表示されるようになるようです。

The suggested size for featured images is 960 pixels wide and 300 pixels high.

Academica Theme — WordPress Themes for Blogs at WordPress.com

画像の一部分を切り取ったり(「トリミング」という用語がよく使われているようです。)、拡大縮小したりして、思い通りの部分だけの決まったサイズの画像を作る方法は、おそらく、数えきれないくらいあると思うのですが、ここでは、WordPress.com 標準の画像編集機能について覚書きしたいと思います。

WordPress.com 標準機能での画像の切り取り・拡大縮小

まず、WordPress.com の画像などの貯蔵庫みたいなものである「メディア」→「ライブラリ」をクリック。

AccessMenuBarApps-4

すでに WordPress.com の方へアップロードしてある画像を使ってもいいのですが、ここでは新たに画像をアップロードしてみます。下のいずれかの「新規追加」をクリック。

AccessMenuBarApps-5

すでにパソコン内にある画像をアップロードしてもいいのですが、ここでは「足成 」というブログとかで自由に使っても OK な画像を配布しているサイトのものを使うことにします。

AccessMenuBarApps-6

スライダーでは大きめのものを使うことが多いので「高解像度(=でかい)」の写真を使用します。

AccessMenuBarApps-7

一旦、パソコンの方に落としておいてから、WordPress.com の方へアップロードします。

AccessMenuBarApps-8

アップロードが終わったら、編集をクリック。

AccessMenuBarApps-9

ここからが本番です。「画像を編集」ボタンをクリック。

AccessMenuBarApps-10

ここから先、手順が重要です。まず、下図のようにカーソルを画像に乗せてからクリックし、右下にビヨーンと伸ばします。すると明るい矩形部分が現れます。

AccessMenuBarApps-11

次に「画像のトリミング」の「縦横比」のところに数値を入力します。

AccessMenuBarApps-13

すると、画像の上に表示された明るい部分の縦横比が入力したものに自動的に切り替わります。

AccessMenuBarApps-12

このあと、「Shift キーを押した状態で」明るい部分の大きさと位置を調整します。Shift キーを押すと縦横比が維持されます。

画像上の一番左にあるアイコンをクリック。

AccessMenuBarApps-14

以上の操作で、思い通りの部分、縦横比で画像が切り取られます。

AccessMenuBarApps-15

「保存」ボタンを押して

AccessMenuBarApps-16

編集内容を確定させます。

AccessMenuBarApps-17

なお、「元の画像を復元」ボタンもあるので、やり直しも可能です

AccessMenuBarApps-18


だいたいのテーマでは、とりあえず大きめの画像(たとえば、「足成」の高解像度の画像など)を使っておけば OK になるように作っているようですが、一部のテーマでは推奨サイズを使わないときちんと表示されないケースもあるので、そのようなときは、上記のようにして画像の縦横比を調整したらうまくいくかもしれません。

以上、WordPress.com 標準のトリミング機能等についての覚書でした。

投稿者: comemo

mac & iPad で情報をインテグレートする

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。