【WP】Twenty Fourteenのアイキャッチ問題はJetpackで楽々解決。

心機一転と言う気持ちも乗せて、テーマを2014年度デフォルトテーマTwenty Fourteenに変更しました。
それに伴い、幾つかスタイル変更などが有ったのでメモ書き程度に記載。

スポンサーリンク

アイキャッチに関連した問題

Auto Post Thumbnailで作られたアイキャッチのままだと、PC向けでは偏りスマホ向けではバラバラになってしまう。

Photon無効

テーマをTwenty Fourteenに変えてすぐの状態A

横長アイキャッチ表示縦に合わせて挿入されるので右側に余白ができる。

Photon無効2

テーマをTwenty Fourteenに変えてすぐの状態B

縦長アイキャッチ表示上と同じく右側に余白。
むしろ余白の方が多い、縦長(lll-ω-)

Photon抜粋無効

Twenty Fourteenのアーカイブ表示を抜粋に変えた状態

余白は同じ…。
元画像のサイズに縦幅が影響され、記事によってアイキャッチの高さが異なるのが目立つ。
※抜粋のやり方は【Twenty Fourteen】トップページを抜粋表示に変更 | WordPress Collegeを参考にした

Photon無効i

iPhone5のsafariで閲覧した場合

アイキャッチの横幅は統一されるが、高さはばらばら。

これを解消する為に1番お手軽だと思われるのはJetpackのをPhotonを有効にすることです。
Photonチェック
それだけで、このような結果になります。

Photon有効1

テーマをTwenty Fourteenに変えてすぐの状態A

上下をカットして表示。

Photon有効2

テーマをTwenty Fourteenに変えてすぐの状態B

上下をカットして拡大表示。
その結果画像が粗くなる。

Photon抜粋有効

Twenty Fourteenのアーカイブ表示を抜粋に変えた状態

アイキャッチに使われる画像のサイズに関係なく、どの記事でも672px × 372pxで表示され統一感が生まれる。

Photon有効i

iPhone5のsafariで閲覧した場合

全ての画像が同じ大きさで表示され見た目が良い。

他のテーマでこの機能を使用来た時は、アイキャッチ画像が指定サイズと異なるんだけど…と言った結果になって無効にしたりもしたけれど、さすがはデフォルトテーマだ!と言ったところ。
ちなみに、詳しい原理は知らない(・_・;
Firefoxの機能サイトの要素で確認してみると、


なっていて、おそらくresize=672%2C372による作用だと思われる。
resize=については解説しているサイトを参照のこと。

Photon API | Developer Resources
Photon API | Developer Resources
Photon API を使って WordPress で画像処理 | プログラミング生放送
Photon API を使って WordPress で画像処理 | プログラミング生放送

JetpackのPhotonを使うと、コマンドを追加するだけでサイズやカラーの変更などが可能。
サイトの色を落ち着いた雰囲気で統一したいとき、コマンドを追加してアイキャッチをセピアやモノトーンにすると良いかも。

ジェットパックに行き着くまでの話

ここからはあんまり関係ない話。

このテーマ変えてすぐ思ったのが、Twenty Fourteenってアイキャッチ大き過ぎだろでした。
Googleの検査でも重い理由やらスマホでサイト表示した時に本文が見えないとか言われる原因にもなったし、いっそ外してしまえと調べ始めて幾つかのサイトに書かれていたことを参考にデザインの変更をしました。

twentyfourteenで投稿コンテンツ上部に表示されるアイキャッチ画像を消して余白調整する | RYUS blog
twentyfourteenで投稿コンテンツ上部に表示されるアイキャッチ画像を消して余白調整する | RYUS blog
TwentyFourteenの一覧表示を全デバイスで統一する | work.log
TwentyFourteenの一覧表示を全デバイスで統一する | work.log

この2つ以外にもあるけれど、メインはこの2つだった…と思った。
これを参考にしながら作った物はSTINGER3Gushに近いスタイル。
よく有るブログみたいで見る人も慣れてるだろうし……って、それじゃTwenty Fourteenをテーマに選んだ理由ないじゃんと完成してから気がついた(lll-ω-)

Twenty FourteenはTwenty Fourteenのまま変われる

Twenty Fourteenの個性を削ぎ落として行くことが良いことと思えなくなったので、スタイルを大きく変えずにアイキャッチの調整と配色の変更にとどめることした。

配色変更で参考にしたのがこのサイトのTwenty Fourteenタグ。

2014年版 WordPress の使い方 | WordPress College
2014年版 WordPress の使い方 | WordPress College

アイキャッチは、過去の記事はそのままでこれからアップする記事をTwenty Fourteenの仕様に合わせれば良いと考え他のことを調べていた。何かのリンクでPhoton API を使って WordPress で画像処理 | プログラミング生放送へ飛び、Photonを有効にしたらアイキャッチに関することが一気に解決した。
突き進むだけでなく、時には寄り道や脇道は必要なんだなとしみじみ思った出来事だった。

2014/08/08追記

Jetpackをアップデートしたらこの機能は無くなってしまった(つД<。シクシク・・ WordPress › Post Thumbnail Editor « WordPress Pluginsを使って個々の調整をすると良いのかも。めんどうだけれど、関連記事なども含めて狙った範囲で切り取ることが出来るので、自動で登録するより見栄えが良くなる。

スポンサーリンク