アイキャッチ画像の高さ変更2

作業目安時間5分

次は、アイキャッチ画像の高さを、変更します。

現在は、アイキャッチ画像の高さがバラバラになっているので、画像の高さをそろえていきます。

アイキャッチ画像の高さ変更

ワードプレスの管理画面を開きます。

左下の「外観」を押します。

左下の「外観」の下の「カスタムCSS」を押します。

一番下の行に移動します。
キーボードの「Enter」を押して、１行ふやします。

下記のCSSコードをコピーして、一番下の行に貼り付けます。

/*アイキャッチ画像高さ変更*/
.ect-vertical-card .entry-card-wrap .entry-card-thumb img{
height:250px;
}
/*アイキャッチ画像高さスマホ用*/
@media screen and (max-width: 510px) {
.ect-vertical-card .entry-card-wrap .entry-card-thumb img{
height:150px;
}
}
.ect-vertical-card .entry-card-wrap .entry-card-thumb img:hover{
opacity:0.7;
transition:0.3s;
}
.card-thumb img:hover{
opacity:0.7;
transition:0.3s;
}

貼り付けました。

一番下の「カスタムCSSの更新」を押します。

コードに関しての説明

パソコン用画像高さ「height:250px」、スマホ用画像高さ「height:150px」の「数値を変更」することにより、画像の高さを調整できます。