アイキャッチの画像サイズを追加cssで変える

公開日:2020年10月15日最終更新日:2020年10月31日

wordpressのテーマは色々ありますが、私は公式のTwentyTwentyを使っています。皆さんは、どのようにアイキャッチ画像のサイズを変えていますか？

はじめに

私はプラグインを使ってサイトをAMP化しています（wordpressのAMPでリダイレクトエラー）。AMPサイトはアイキャッチの画像サイズを1200ｘ675pxにしなければならず、表示が大きくなってしまうんですよね。

ちなみに、このサイズは構造化データのための対処です。構造化データを気にしない人は小さいアイキャッチで登録しても良いかもしれません。

初めは非表示にすれば良いのかと考え、追加cssを使って非表示にしました。ですが、これは良くありませんでした。確かにアイキャッチは非表示になり、構造化データにも登録されます。しかし、googleで検索した時にアイキャッチ画像が出てこなくなってしまいました。

参考にコードを記しておきます。追加cssに書けば良いです。


.featured-media{display:none}

サイズ変更について色々調べたところ、ブログのウラ側様のページに方法が載っていました。ブログのウラ側様のページ


.singular .featured-media-inner {
    position: relative;
    left: calc(50% - 50vw);
    width: 100vw;
    max-width: 40rem;
}

このコードを追加cssに書けば、記事ページのアイキャッチサイズを変更出来ます。widthは画面幅で、100vwは画面いっぱいです。50vwにすると画面半分になります。max-widthは最大サイズで、widthの限界値となります。

カテゴリ一ページのサイズ変更は下記です。singularをarchiveに変えるだけですね。


.archive .featured-media-inner {
    position: relative;
    left: calc(50% - 50vw);
    width: 100vw;
    max-width: 40rem;
}

アイキャッチ画像は記事を見たい人からすると邪魔ですよね。特にスマホで見る場合、スクロールの手間が増えてしまいます。アイキャッチサイズは最低限にしたいですね。

TwentyTwentyでアイキャッチ画像のサイズ変更をしたい方は、参考にしてみて下さい。