HOME
Tech
TwentyTwentyの アイキャッチを追加CSSで修正
カテゴリー
Tech

TwentyTwentyの アイキャッチを追加CSSで修正

公開日:2020年8月19日
最終更新日:2020年8月22日

wordpressのテーマは色々ありますが、私は公式のTwentyTwentyを使っています。皆さんは、アイキャッチ画像が邪魔だったりしませんか。

この記事では追加CSSでアイキャッチ画像を非表示、サイズ変更する方法を書いています。

  • はじめに
  • 追加CSSで非表示
  • 追加CSSでサイズ変更
  • 終わりに

はじめに

皆さんはブログをAMP化していますか。私は以前、プラグインでAMP化しました。wordpressをAMP化中に送信ボタンのエラー

このとき、構造化データのためにアイキャッチ画像も記事に登録するようになりました。サイズは推奨の1200x675pxです。このサイズですが、パソコンで見ると凄く大きくて邪魔なんですよね。

追加CSSで非表示

あまりにも邪魔なので、まずは非表示の方法を探しました。といっても、私は基本的にdisplay:noneしか知らないのですが。色々見てみると、TwentyTwentyではfeatured-mediaを非表示にすればいいみたいです。

コードは下記になります。

.featured-media{display:none}

追加CSSでサイズ変更

非表示にすることで一件落着かと思いきや、Googleの検索結果で画像が出なくなってしまいました。元々検索結果に画像付きで表示されることを狙ってアイキャッチを登録していたため、これでは本末転倒です。

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

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

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

なお、現在私はカテゴリ一覧も使っています。色々調べたところ、下記のコードでカテゴリーページのサイズも変更出来ました。単純にsingularをarchiveに変えただけですね。

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

終わりに

追加CSSで修正することにより、大分見やすくなります。何より関係ない画像は邪魔ですし。

注意点として、構造化データのためには、おそらく非表示よりもサイズ変更の方がいいです。皆さんも試してみて下さい。