記事の先頭に表示しているアイキャッチ画像のサイズを小さくする方法

記事の先頭のアイキャッチ画像を小さく

あくまでも個人的になんだけけど、パソコン表示の記事の画像って大きすぎると思うんです。

スマホ表示なら、横幅いっぱいの画像でいいと思います。

けど、パソコン表示なら、画面の横幅いっぱいじゃ大きすぎるんです。

SANGOのアイキャッチ画像サイズ

なので、SANGOなんだけど、「外観」「カスタマイズ」「追加CSS」に

/* 記事先頭の画像 */
.post-thumbnail img {
width:400px !important;
height:250px !important;
}

というのを記述しています。

本当は、

/* 記事先頭の画像 */
.post-thumbnail img {
width:400px;
height:250px;
}

でいいと思います。

もし、CSSが効かなかったら、!important; のある下記にしてくださいね。

画像の大きさは、好みのサイズにしてくださいね。

別に400×250がいいとか、おすすめってことではありません。

あくまで、好みの問題です。

ただ、スマホ表示で横幅いっぱいにするには、400pxくらいは必要だと思います。

Luxeritasのアイキャッチ画像サイズ

Luxeritasの場合は、「カスタマイズ（外観）」「追加CSS」に

/* 記事先頭の画像 */
.post-top-thumbnail img {
width:400px !important;
height:250px !important;
}

を追記しています。

.post-thumbnail img　→　.post-top-thumbnail img　のところが違うだけです。

Cocoonのアイキャッチ画像サイズ

Cocoonの場合、「外観」「カスタマイズ」「追加CSS」に追記でいいと思うんだけど、

「外観」「テーマエディター」で子テーマのstyle.cssに追記してありました。

Cocoonの場合、トップなど一覧ページのサムネイルも画像サイズを変更したからかな？

/* 記事先頭の画像 */
.eye-catch img {
width: auto; !important;
height:180px !important;
}

/* 一覧の画像 */
.entry-card-thumb img {
width: auto; !important;
height:90px !important;
}

Cocoonの/* 一覧の画像 */　→　トップなど一覧ページの画像サイズは、かなり強引なので、マネしないほうがいいと思います。

よく読まれている記事

クラウド型の超快速レンタルサーバーのColorfulBox 初心者にオススメ！格安レンタルサーバーのロリポップ！ スターサーバーは、お勧めの初心者向けレンタルサーバー