アイキャッチ画像をトリミングして出力する方法

20140612

昨日、かわいくて人気のあるテーマchocolatをカスタマイズ ヘッダ画像をアイキャッチ画像にで、アイキャッチ画像をヘッダ画像と置き換えて出力するようにしました。

しかし、ヘッダ画像の(大)をそのまま表示しているのでかなりのスペースを取られてしまっていました。そこで、今回はアイキャッチ画像をトリミングして出力するようにカスタマイズしてみました。

トリミングの構想—どのようにトリミングしたいか

今指定してあるヘッダ画像の縦は380ピクセル横幅は980ピクセルでした。だいたいこのぐらいの大きさにトリミングしたいと思います。

調べてみるとCSSでトリミングすることは可能みたいなのですが、開始位置を固定で指定しないといけないようです。アイキャッチ画像に指定する画像がどのような大きさかは決まっていないので、固定だとちょっとうまくありません。大きめの画像を指定するので 縦横の真ん中 の画像部分をヘッダに表示したいと思います。

そこで、思い出したのが Jetpackの機能のPhotonです。このblogでも urlに書くだけで投稿中にある画像を簡単トリミング! Photon API でご紹介しています。

Photonresize機能は、

resize and crop to given dimensions (px)

ということでリサイズしてレイアウトにあった構図に切り取ってくれるようです。結果を見ると縦横の真ん中のところを切り取ってくれるようです。

ということで、アイキャッチ画像のリサイズをPhotonで行ってみようと思います。

Photonで大きいアイキャッチ画像のリサイズをする

アイキャッチ画像のURLを取得します。

get_post_thumbnail_idhttp://付きのアイキャッチ画像のURLが取得できます。photonの記述に追加する部分はhttp://部分は不要ですので、

このようにhttp://部分をなくしてしまいます。そして、Photonでリサイズしたものをイメージとして出力するのが、

この指定方法です。http://i0.wp.com/ の後にhttp://部分を取ったサムネールのURLをくっつけます
resize=横幅ピクセル,縦幅ピクセル を指定します。

これで表示すると、

Photon使用前↓

Image

Photon使用後↓

Image

このように真ん中のあたりでリサイズされて表示されました。アイキャッチ画像を独自の大きさで表示したいときはこのような方法でリサイズすることが出来ます!

おまけ:chocolatのheader修正

昨日、子テーマでheader.phpを修正しましたが上記のPhotonを追加した部分と、アイキャッチ画像にdiv指定をし忘れていたのでその部分を追加しました。

これで、div指定を忘れていたので画像の上下が詰まっていたのが、

Image

このように空くようになりました。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る