ブロガーに大人気のWordPressテーマ「JIN」を購入してみたけど、アイキャッチ画像の高さがバラバラ！
どうにか簡単に揃える方法はないの？
という方のために、カスタマイズ > 追加CSSにコピペするだけでOKなコードを晒しておきます。
PHPのファイルは一切触らなくてOKです。
アイキャッチのサイズがバラバラになる問題
最初にJINを入れてみて気になるのが、アイキャッチを画像の高さがガタガタになることです。
これはテーマが悪いのではなく、もともとの画像サイズを揃えずに運用していたことのツケなので、文句を言っていても始まりません。
決まった比率のdivか何かに背景画像としてアイキャッチを読み込ませ、background-size:coverとかにしておけばどんな画像を放り込まれても崩れなくなります。
不特定多数が利用するものだと運用ルールを守らせようと思ってもだいたい無理なので、あとから破綻しないようにそういうふうにしておくのも大切なことですが、過保護と言えば過保護。
しかしJINはそうではなく、ブロガーがちゃんとまじめに運用して収益を上げるためのテーマ。画像のサイズ統一くらい自分でちゃんとやれ！と、そういうことですね。
コーダー的には、画像はimg要素でhtml内にあるべき、というコーディングの美学も感じます。いいぞいいぞ〜。
| 不具合を感じた時に、まず確認したいこと 動作環境の確認を JINをご利用時に不具合を感じた時には、最初に動作環 よくある質問｜WordPressテーマ「JIN」の設定マニュアル - WordPressテーマ「JIN」の設定マニュアル |
もともとWordPressを使っていてJINをインストールするとサムネイル画像がばらばらになることがあります。
そんなときは「Regenerate Thumbnails」というプラグインを使えば解決できるかもしれません。プラグインの使い方はこちらの記事からどうぞ。
上記のプラグインを使っても表示がバラバラの場合、おそらくアップロードした画像のサイズが小さすぎる可能性があります。この場合、サイズを大きくしてみると解決しますのでお試しください。
とのことで、公式的にはサムネイル作り直しなさいよという回答。
とはいえ、すでに何千件と記事があるような場合はちょっと大変です。
アイキャッチを作り直すのは大変 ひとまずCSSで解決
というわけで、今後はきちんと運用するということにして、ひとまずはCSSで一時しのぎをしてしまいましょう。
あんまり単純作業に時間取りたくないですもんね。
今回対象とするのは、ピックアップコンテンツと、記事のループ部分と、おすすめコンテンツのところです。
細かいことはいいんだよ、という方はこれをそのままコピーして カスタマイズ > 追加CSSに貼ってください。
比率を固定した親要素でimg要素をマスクする
これはよくある比率を一定に保つCSSです。
13行目の
padding-top: 56.25%; /* 16:9 */
ここで比率を16:9にしています。
違う比率、例えば4:3にしたければ75%にすればいいし、3:2にしたければ66.6%にすればOK。
それ以外は電卓を叩きましょう〜。
ここでは、
- アイキャッチのimg要素を囲っているdivやfigureなどの要素を16:9の比率に保つ
- その中のimg要素をposition:absoluteで絶対配置、はみ出した部分は隠す(マスク)
- topとleftを50%の位置にして、左上座標を要素中央へ
- transform: translateでimg画像の高さ&横幅の半分だけ戻す
ということを行っています。
これであれば、16:9より高さの比率が大きい画像であればはみ出たぶんが隠れてくれるので、横一列にしたスライダーがガタガタになったりはせずにすみます。
ただ、16:9より高さの比率が小さい、シネマスコープみたいなアイキャッチを使っていた場合は上下に余白ができてしまいますので、padding-top:何%のところを適宜調整してくださいませ。
それでは、簡単ですがこのへんで！