WordPressのプラグインの定番Jetpackを利用しています。Jetpackを入れると統計情報や関連記事の表示のほか多くの機能を利用することが出来ます。
Jetpackの関連記事はアイキャッチでなく、記事中画像からアイコンを出している？
このサイトで表示している関連記事もJetpackで出しています。オプションの「Use a large and visually striking layout」にチェックを入れると記事のアイコンが表示されるようになりました。
今のところ、記事にアイキャッチ画像をほとんど指定してません。使われている画像は記事中にある画像です。どうしてこのようにでるのかな？と不思議に思ったのでソースを見てみました。以下のようになっていました。
<img src="http://i0.wp.com/ryus.co.jp/blog/wp-content/uploads/2014/03/Image19.png?resize=350%2C200" width="350" alt="WordPressサイトデータをローカルに構築して試すときの手順">
http://i0.wp.com/ ？？ どうやらAPIを使って画像を加工して返してくれてるようです。
ただ単に大きさを幅もしくは高さ指定で小さくするだけならimgで指定できると思いますが、このAPIではトリミングをしてくれているようです。
このurlをもとにググって調べたらこれは Photon API というものだということがわかりました。
Photon とは画像を加工してくれるAPIみたいです
とてもわかりやすいサイトを発見しました！
Photon API を使って WordPress で画像処理
それによると
※ Photon は、WordPress.com ユーザーと Jetpack を利用して WordPress と接続したユーザーのみ利用できます。
というものだそうです。
またマニュアルもこちらにありました。
http://developer.wordpress.com/docs/photon/
Jetpackをインストールしてあれば使えるようなので早速試してみます。
大きな画像を加工してみる
これは1000×1000ピクセルの画像です。画像urlは
https://usortblog.com//wp-content/uploads/2014/04/Image52.png
これを使っていくつかのパターンを試してみました。
300×500のサイズにトリミングしてみる
?の後に resize=幅,高さ をピクセル数で指定します。resizeの時、数値だけの指定はピクセルになります。
↓
位置を指定してトリミングしてみる
この写真ですがよく見ると上部真ん中あたりに鳥が飛んでいます。この部分だけを切り取ることも可能です。
?の後に crop=x位置,y位置,幅,高さ を指定します。この指定の時は数値だけの指定は％になるため、ピクセル数を指定したい場合は数値の後に px とつけます。
↓
位置を指定してトリミングしてかつ画像サイズを小さくする
パラメーターは & でつなげれば複数指定することもできるようです。
この画像の桜並木と川の部分を横長に切り取ってかつ、幅を500pxで表示してみました。
<img src="http://i0.wp.com/ryus.co.jp/blog/wp-content/uploads/2014/04/Image52.png?crop=11px,475px,984px,335px&w=500">
↓
フィルターや輝度、コントラスト、カラー化などなど…様々な加工が出来ます
フィルターを指定する
filter= でフィルター種類を指定できます。例えばsepiaを指定してみました。
<img src="http://i0.wp.com/ryus.co.jp/blog/wp-content/uploads/2014/04/Image52.png?crop=11px,475px,984px,335px&w=500&filter=sepia">
↓
ちょっと昭和っぽいですかね？
輝度を指定して明るくする
brightness= で数値を指定すると輝度を調整して＋の数値を入れれば明るく、－の数値を入れれば暗くなるようです。brightness=50 を追加指定してみました。
<img src="http://i0.wp.com/ryus.co.jp/blog/wp-content/uploads/2014/04/Image52.png?crop=11px,475px,984px,335px&w=500&brightness=50">
↓
コントラストを指定する
contrast= で数値を指定するとコントラストを調整して＋の数値を入れれば強く、－の数値を入れれば弱くなるようです。contrast=100 を追加指定してみました。
<img src="http://i0.wp.com/ryus.co.jp/blog/wp-content/uploads/2014/04/Image52.png?crop=11px,475px,984px,335px&w=500&contrast=100">
↓
カラー化
colorize=R,G,B でR(赤）、G（緑）、B（青）の数値を指定するとその色を調整して＋の数値を入れれば強く、－の数値を入れれば弱くなるようです。colorize=0,0,150 を追加指定して青を強めにしてみました。
<img src="http://i0.wp.com/ryus.co.jp/blog/wp-content/uploads/2014/04/Image52.png?crop=11px,475px,984px,335px&w=500&colorize=0,0,150">
↓
このほかのもありますが紹介しきれません(^_^;。こちらのページを見ると、だいたいどんなことができるか画像で分かると思います↓
http://developer.wordpress.com/docs/photon/api/
まだまだ色々できそうですね。このAPIを使って画像加工を試していきたいなと思います。楽しみです♪
コメント