先日からブログのテーマをWordPressの公式から発表されている「Twenty Fourteen」に変えています。
左のサイドバーを黒いデザインに変えたいなぁ……となんとなく思っていたところにちょうど発表されたので、かなりびっくり！その他の細々としたところもかなりカッコ良くて、ほとんどカスタマイズせずに使えそうだったので、すぐに飛びつきました。
唯一とまどったのが、アイキャッチ画像の大きさ。
以前はもっと小さな正方形の画像を使っていたので、横長のカタチとデカさには驚きました。
でも慣れると写真が映えて、これはこれで良いな～と思うようになりました。
ただ、問題になるのが「Twenty Fourteen」に乗り換える以前アップしていたアイキャッチ画像です。
そのまま表示すると妙に小さくなってしまうし、余白の部分に灰色の画像が表示されて、あまり見栄えがよろしくありません。
もちろん、これまでのアイキャッチ画像を上げなおしても良いんだけど、正直面倒臭い……。
「Twenty Fourteen」ではアイキャッチ画像が672*372pxになっているので、適当にこの大きさに統一できたらなと思いました。
というわけで、自分のやったことを忘備録として残しておきます。
考え方は、画像を横幅672pxになるように（縦横同じ率で）拡大、または縮小して表示。
高さ部分は真ん中から372px分だけ表示、はみ出るところは表示しないというものです。
なので、こういう不自然な切り取り方になることもあります。
また、元画像が大きい物を使用することになるため、表示が重くなる可能性があります。
もし参考にされる方がいらっしゃいましたら、上記の2点をお考えの上、自己責任で導入してみてください。
「Twenty Fourteen」の子テーマを作り、style.cssファイルに次のコードを追加します。
/* アイキャッチ画像 */
.post-thumbnail {
display: block;
position: relative;
max-width: 672px;
height: 372px;
z-index: 0;
overflow:hidden;
}
.post-thumbnail img {
width: 100%;
height: 372px;
}
※2014.3.15
幅の狭い環境で酷い見え方になっていたので、post-thumbnail imgの書き方を変更しました。テンプレの性質上、若干像が歪むケースが出てきてしまいますので、問題のない画像でお試し下さい。
※2014.3.17
バックのグレー部分を白にし、画像が歪まないように post-thumbnail imgの書き方を修正しました。
そして今回はついでに、アイキャッチ画像の上部の空白部分も詰めてみました。
/* 6.0 Contentコンテンツの上部分に空白を作らない */
.content-area {
padding-top: 0;
}
わたしには細かいことは分かりませんのでお問い合せ不可でございますが、間違っているところがあればぜひ教えて下さい（えー
photo: thisismyurl
