THE THOR ザ・トール カテゴリー記事一覧 の画像を16:9にするカスタマイズ

ショートコードの「カテゴリー記事一覧」で表示される画像は【 アスペクト比 1:1 】つまり正方形の画像が表示されます。選択肢はありません。

THE THOR で使用する画像比率は 16:9 や 4:3 などもあるので 1:1 に固定されているのは少し不便ですね。他の画像にあわせて比率を変更したいときもあると思います。
※使用されている画像が正方形にトリミングされたものなので表示される部分が増えることはありません。

この記事で紹介するのは、

「カテゴリー記事一覧」の画像比率を変更するカスタマイズ

です。

このカスタマイズはショートコード「カテゴリー記事一覧(新着順)(ランダム順)(ランク順) 」の全てに適用されるのでご注意ください。

THE THOR カテゴリー記事一覧 の画像を16:9にするカスタマイズ

以下のCSSを追加CSSにコピペ。

アスペクト比 16:9 の場合

.content .archiveScode .eyecatch-11:before {
    padding-top: 56.25%;
}

アスペクト比 4:3 の場合

.content .archiveScode .eyecatch-11:before {
    padding-top: 75%;
}

以上でカスタマイズか完成です。

カスタマイズのサンプル画像

CSSは初心者向け書籍とネット情報で十分に学ぶことができます（体験談）

[wpap service=”with” type=”detail” id=”4797398892″ title=”1冊ですべて身につくHTML & CSSとWebデザイン入門講座”]

あとがき

アスペクト比を変更すると縦幅が狭くなるので横に並ぶタイトルや抜粋とのバランスが難しくなります。それでも「出来ないよりは出来た方が良い」かな？

選択肢が増えるのは良いことだと思います。興味のある方はお試しください。

ではまた次回のカスタマイズでお会いしましょう！